Vue-CLI
一、什么是Vue-CLI
Vue-CLI (Command Line Interface) 是vue官方提供的脚手架工具, 默认已经帮我们搭建好了一套利用webpack管理vue的项目结构
作用：能够帮我们快速搭建一个webpack管理的项目结构。 因为使用webpack搭建项目是比较繁琐的，Vue为了简化这一操作，于是开发出了Vue-CLI。通过vue-cli我们就可以直接使用webpack。
二、安装Vue-CLI
可以使用下列任一命令安装：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装之后，可以用这个命令来检查是否安装成功及其版本是否正确：
vue --version
apple (master *) book-vue $ vue --version
@vue/cli 4.4.5
三、通过脚手架创建项目
- 在命令行进入一个目录，运行以下命令来创建一个新项目：
vue create project-name(项目名称)
运行命令后会弹出一个窗口：
default 是 使用默认配置，默认安装及自动配置babel，eslint
Manually select features 是 自定义配置，需要我们手动配置，可以自己选择需要配置什么东西
这里选择自定义配置
通过↑ ↓ 箭头选择你要配置的项，按 空格 是选中，按 a 是全选，按 i 是反选。
每个配置项的解释：
( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，
需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试
选完之后按 Enter。分别选择每个对应功能的具体包。
选择是否使用history router
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。
我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。
选yes的话需要服务器那边再进行设置。(Use history mode for router? (Requires proper server setup for index fallback in production))
css 预处理器
node-sass是自动编译实时的，dart-sass需要保存后才会生效。sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现。而且Sass/Scss性能会更好,会更快一些。
选择Eslint代码验证规则
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多。我这里先选择ESLint + Standard config（标准规范）。
选择什么时候进行代码规则检测
( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
选择单元测试
我的项目中并没有选择单元测试，但是如果选择了的话会有一下内容
选择如何存放配置
In dedicated config files 独立文件放置
In package.json 放package.json里
选择In dedicated config files放到单独的文件中， 便于后续管理
如果是选择 独立文件放置，项目会有单独如下图所示的几件文件。
是否保存当前配置
键入N不记录，如果键入Y需要输入保存名字。如果保存的话下一次就不需要一步一步地从头开始配置.
然后开始安装
npm run serve是通过dev-serve打包的，会打包到内存中，所以在项目结构中是看不到打包后的文件夹的。 如果想打包到磁盘上可以通过npm run build指令打包，打包后会生成一个dist目录 到这里我们的项目就已搭建完成啦~~
安装完后，运行:
