准备：全局安装脚手架工具 vue-cli
npm命令npm i vue-cli -g
如果安装了yarn 可以用yarn global add vue-cli
安装之后通过vue --version可查看版本
1，使用vue命令在当前目录快速生成项目 vue init webpack 项目名字
- 1，默认项目名字
- 2，默认项目描述
- 3，作者（默认读取git配置）
- 4，选择构建版本， 选择runtime生成文件更小一点，约小30%
- 5，是否安装vue-router（路由） y
- 6，是否使用eslint校验代码 y
- 7，选择eslint标准 standard
- 8，单元测试 n
- 9，是否设置e2e设置 n
- 10，安装依赖包 安装yarn之后就选择yarn，没有就npm
2，根据命令1进入项目，命令2运行项目命令2也可以用 yarn dev（config目录下index.js中的autoOpenBrowser设置为true可配置为自动打开浏览器）
3，vue项目目录说明：
1, build目录： 跟webpack相关的目录
2, config目录：常用的配置index.js
autoOpenBrowser: true: 是否自动打开浏览器
useEslint: true (是否使用eslint校验代码)
3, src目录： 写代码的地方
4, static目录：static目录中的文件不会被webpack打包
.gitkeep: 如果一个目录是空的，会git忽略掉 （不显示）加.gitkeep文件可以被git管理
5, babelrc: babel的配置文件
6, editorconfig: 编辑器的配置 保证将来所有的编辑器的代码的缩进风格都是一样的
vscode需要一个插件 editorconfig
7, eslintigore: 打包后的一些目录忽略掉
8, eslintrc: eslint的配置文件
8, .gitignore: git的忽视文件
9, postcssrc.js：预编译（类似sass，less）
10, index.html 整个vue项目的模板文件
11, package.json 项目的包文件
12，README.md 执行文件
13, yarn.lock 安装yarn的时候一个配置文件
4，src目录：
- 1，assets文件： 存放静态资源，公共的图片，公共的样式，公共的js等
- 2，componenents : 存放组件
- 3，router ：存放路由（index.js）
- 4，App.vue : 整个页面的根组件
- 5，main.js : 初始化vue实例并使用所需要的插件（其中初始化了一个vue对象,el为实例提供挂载元素）
5，关闭vue生产提示
Vue.config.productionTip = false
6，这行注释能避免实例化对象没有接收或使用而报错
/* eslint-disable no-new */
7，配置路由 ：
- 1，引入vue-router
- 2，配置规则
8，新建组件：
- 1，在src下新建文件夹components，其中新建新组件
- 2，在main.js引入新组件
9，路由提取：
- 1，在src下新建文件夹router，其中新建index.js配置路由
- 2，把路由相关的放进去
到这里，就全部配置好了，其实步骤1，2之后，56789都是自动配置好的，我们只要使用就好啦！