vue-cli脚手架的介绍
vue-cli
1. 单文件组件
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“Home.vue”。
需要使用第三方构建工具将vue文件转换为正常的html文件才能被浏览器解析。比如webpack和官方提供的：vue-cli。
webpack是什么
Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。
打包的好处：
- 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
- 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
- 将代码打包的同时进行混淆，提高代码的安全性。
vue-cli是什么
vue-cli是基于nodejs+webpack封装的命令行工具。
用vue-cli执行build，实际上是webpack做的。原本需要自己配置webpack的相关配置，被cli简化了。
2.创建项目
2.1 安装
文档：https://cli.vuejs.org/zh/guide/
前提条件：node >=8.9
可以使用下列任一命令安装
yarn global add @vue/cli
npm install -g @vue/cli
安装完成之后输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。
2.2 切换目录
切换到你要创建项目的目录，然后使用命令创建一个名叫helloword的项目
vue create helloword
2.3 选择配置类型
首先会让你选择一个preset（预设），前两个选项是默认设置，一个是vue2版本，一个是vue3版本，适合快速创建项目的原型。
最后一个选项需要手动对项目进行设置，适合有经验的开发者。这里用方向键↓选择最后一个，按Enter键，确认选择。
2.4 选择配置
操作提示：空格键是选中与取消，A键是全选，回车是确定
| 选项 | 说明 |
|---|---|
| Babel | 转码器，用于将ES6代码转为ES5代码，从而在现有环境下执行。 |
| TypeScript | TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。 |
| Progressive Web App (PWA) Support | 支持渐进式web应用程序 |
| Router | vue-router |
| Vuex | vue的状态管理 |
| CSS Pre-processors | 支持 CSS 预处理器。 |
| Linter / Formatter | 代码风格检查和格式验证 |
| Unit Testing | 单元测试。 |
| E2E Testing | E2E 测试 |
| Unit Testing | 单元测试。 |
选择CSS预处理和接下来要学习的Router和Vuex。按Enter键，接下来会根据你选择的功能进行进一步的配置。
选择Vue的版本，这里我们先选择2.x版本。
问你是否在Vue-router中使用history模式，输入y，表示是。
2.5 css预处理
- 相同
- 都是用来将sass编译成css的工具。
- 区别
- node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
- dart-sass 是用 drat VM 来编译 sass；
- node-sass是自动编译实时的，dart-sass需要保存后才会生效
- 推荐 dart-sass 性能更好（也是 sass 官方使用的），而且 node-sass 因为国情问题经常装不上
2.6 代码检测
第1个选项是指ESLint仅用于错误预防，后三个选项是让你选择ESLint和哪一种代码规范一起使用。ESLine是用于代码校验的，至于代码风格则由另外的规范来限制，如这里的Aribnb、Standard和Prettier。至于选择哪种代码规范，这要看公司的要求，这里推荐Prettier，即第4个选项。
2.7 语法检查方式
这里选择第1项：保存时检测。
2.8 配置文件存放目录
第1个选项是指在专门的配置文件中存放配置信息，第2个选项是把配置信息全放在package.json文件中。选择第1个选项并按Enter键。
2.9 是否保存配置
接下来询问是否保存本次配置，保存的配置可以供以后项目使用。如果选择了保存，以后再用vue create 命令创建项目时，就会出现保存过的配置，然后直接选择该配置就可以了。
输入y并按Enter键，接下来是给本次配置取个名字。输入名字并按Enter键，就开始创建脚手架项目了，这中间会根据配置自动下载需要的包，项目创建完成后，会看到如下信息
2.10 启动项目
在终端中依次输入下面命令。
cd my-project // 进入到项目根目录
npm run serve // 启动项目
3.项目结构
|── node_modules //项目依赖的模块
├── public
│ ├── favicon.ico //页签图标
│ └── index.html //主页面
├── src
│ ├── assets: //存放静态资源
│ │ └── logo.png //logo图片
│ │── component: //编写的组件放这个目录下
│ │ └── HelloWorld.vue
│ │── App.vue: //项目的根组件
│ │── main.js: //程序入口文件 ，加载各种公共组件和所需要用到的插件
├── .browserslistrc
├── .gitignore: git //配置在git提交项目代码时忽略哪些文件或文件夹
├── babel.config.js: //babel 的配置文件
├── .eslintrc.js //ESLint使用的配置文件
├── package.json:// 应用包配置文件
├── README.md:// 应用描述文件
├── package-lock.json //包版本控制文件
下面来看几个关键文件的代码。
3.1 App.vue
这是一个典型的单文件组件，在一个文件中包含了组件代码、模板代码和css样式规则。在这个组件中引入了HelloWorld组件，然后在template元素中使用它。
App组件是项目的主组件
3.2 main.js
main.js是程序入口文件，该文件主要用于加载各种公共组件和项目需要用到的各种插件，并创建Vue的根实例。
在该文件中，使用import语句导入Vue模块和App根组件，这不同于之前在HTML文件中的引用方式。
Vue.config.productionTip用于提示是否在项目启动时生成提示信息，false表示不生成。
3.3 index.html
项目的主页面。可以看到一个id属性值为app的空的div元素，组件实例会动态挂载到该元素上。
3.4 package.json文件
在使用npm安装依赖的模块时，可以根据模块是否需要在生产环境下使用而选择附加-S（即–save）或者-D（即–save-dev）参数。
如果某个模块只是在开发环境中使用，则可以使用-D参数来安装，在安装完成后将依赖项写入devDependencies中，而在devDependencies中的依赖项，在项目打包发布时并不会一起打包。
3.5将项目打包的指令
vue build
会生成dist文件