24. vue-cli（简单版）
重点：
使用 vue-cli 搭建项目；
项目的各个目录及文件的用途。
一、从无到有搭建项目
- 安装 nodeJS（若已安装可忽略）
官网下载链接：https://nodejs.org/en/download/
2. 安装淘宝 npm 镜像（若已安装可忽略）
npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 全局安装 vue-cli（若已安装可忽略）
npm install -g vue-cli
// 或者使用淘宝源
cnpm install -g vue-cli
4. 初始化项目
vue init webpack my-project
5. 进入项目
cd my-project
6. 安装依赖
npm install
// 使用淘宝源
cnpm install
7. 启动项目
npm run dev
项目启动成功后，命令行会提示你：
Your application is running here: http://localhost:8080
你只要打开浏览器，在地址栏输入 http://localhost:8080 ，就会看到这个页面：
二、目录结构
打开项目目录，会发现里面有很多目录，目录里边还有各种文件。如图：
- build 目录（与 webpack 相关都在这个目录中）
build.js // 生产环境构建代码
check-versions.js // 检查node&npm等版本
dev-client.js // 热载入相关
dev-server.js // 构建本地伺服器
utils.js // 构建配置公用工具
vue-loader.conf.js // vue载入器
webpack.base.conf.js // webpack基础环境配置
webpack.dev.conf.js // webpack开发环境配置
webpack.prod.conf.js // webpack生产环境配置
2. config（项目开发环境配置相关代码记忆）
dev.env.js // 开发环境变数
index.js //项目一些配置变数
prod.env.js // 生产环境变数
3. node_modules（项目依赖的模块记忆）
4. src（源码目录）
assets // 资源目录
components // vue公共组件
router // 前端路由
App.vue // 页面入口文件（根组件）
main.js // 程序入口文件（入口js文件）
5. static（ 静态文件，比如一些图片，json数据等）
6. 其他文件
.babelrc // ES6语法编译配置
.editorconfig // 定义代码格式
.gitignore // git上传需要忽略的文件格式
index.html // 入口页面
package.json // 项目基本信息
README.md // 项目说明
这篇文章简单介绍了使用 vue-cli 搭建项目的步骤，以及项目中各目录及文件的用途。
这是简书上找的一篇详细介绍 vue-cli 的文章：
Vue2全家桶之一：vue-cli（vue脚手架）超详细教程
END~~
推荐阅读：
