Vue.js开发网页,一步步来·用这个命令检查一下是否安装成功·这会生成一个目录里面包含了你的项目打包文件
Vue.js开发网页,一步步来!
一、安装Vue.js
要开始用Vue.js建网站,首先得把环境装好。步骤是这样的:
- 去Node.js官网下载并安装最新版的Node.js,它自带npm(一个包管理器)。
- 在命令行里,用这个命令安装Vue CLI:`npm install -g @vue/cli`。
- 装完之后,用这个命令检查一下是否安装成功:`vue --version`。
二、创建项目结构
用Vue CLI来建一个新项目:
- 在命令行里,运行这个命令:`vue create my-project`。
- 跟着提示选默认配置或者自定义配置,项目就创建好了。
- 进入项目目录:`cd my-project`。
- 启动开发服务器:`npm run serve`。
项目结构大概是这样子的:
目录 | 说明 |
---|---|
src | 项目源代码 |
node_modules | 项目依赖的npm包 |
public | 公共文件,如静态资源 |
views | 页面组件 |
assets | 资产文件,如图片、样式等 |
三、编写组件
组件是Vue.js的基石,它们是可复用的UI构建块。下面是创建和使用组件的步骤:
- 在项目目录下创建一个新文件,比如`MyComponent.vue`。
- 写点代码进去,比如这样:
Hello, Vue!