vue-cli脚手架构建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
一、安装node.js
二、安装vue-cli
npm install -g vue-cli
三、生成项目
vue init < template-name > < project-name >
template-name为生成项目使用的模板,可以运行vue list查看所有可用的官方模板。
例如:
vue init webpack my-project
命令输入后,会进入安装阶段,需要用户输入一些信息。
- Install vue-router 是否安装vue-router
- Use ESLint to lint your code 是否使用ESLint管理代码
- Set up unit tests 是否安装单元测试
四、运行
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目。
进入项目目录,安装依赖。
npm install
项目目录结构如下:
. ├── build/ # 构建脚本目录(npm run *) │ └── ... ├── config/ │ ├── index.js # 项目配置文件 │ └── ... ├── src/ │ ├── main.js # 入口js │ ├── App.vue # 根组件 │ ├── components/ # 公共组件 │ │ └── ...
| |—— router/ # 前端路由
| | |_ ... │ └── assets/ # 资源文件 │ └── ... ├── static/ # 纯静态资源 ├── index.html # 入口页面 └── package.json # 依赖
然后启动项目:
npm run dev
启动成功如下,浏览器中打开运行
五、打包上线
自己的项目文件都需要放到 src 文件夹下。
项目开发完成之后,运行下面命令打包:
npm run build
打包完成后,会生成 dist 文件夹,只需要将 dist 文件夹放到服务器就行了。
官方文档:https://github.com/vuejs/vue-cli