Vue/cli 2与3

写在正文之前： 查了许多教程，网上大多都是2.*之前版本的cli，而官网也说明了Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。因此我自己总结了一份。
and新版的@vue/cli要求node版本在8.9以上，如未达到请更新node版本，这里我使用的是node10.15.3

老版本vue-cli创建一个项目

1. 全局安装老版本的vue-cli：npm install --global vue-cli
   安装成功之后，输入命令vue -V，如果出现相应的版本号，则说明安装成功。

2. 使用vue-cli脚手架构建项目
   输入命令：vue int template-name template-name
   其中template-name是模板名，在其官网目前有六种模板，一般常用webpack.
   而template-name则是我们自己起的项目名。
   输入命令后，会询问几个简单的选项，如下：

   · Project name :项目名称 ，如果不需要更改直接回车就可以了。
   · Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
   · Author：作者，会自动读取配置git的作者。
   · Install vue-router? 是否安装vue的路由插件，一般需要安装，所以选择Y
   · Use ESLint to lint your code? 是否用ESLint来限制代码错误和风格。最好是进行配置。
   · setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
   · Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

3. 进入项目路径，安装依赖：npm install

4. 依赖安装完成以后，执行npm run dev，开启dev服务器，就会自动打开浏览器显示项目页面。

老版本项目结构

1. 首先从package.json看起：
   首先一个不具名对象包括name、version/description等是刚刚配置作者项目名等。其中scripts(脚本)字段内包含的是若干个命令，可在命令行通过npm run dev执行键，就等于执行了值。其中，dev start都是开发时使用的脚本，bulid是开发完成进行打包压缩使用的脚本。
   例如：

“scripts” :{
	"dev":"node bulid/dev-server.js"
}

在package.json文件中还有两个对象dependencies和devDependencies,其中dependencies是运行时用到的依赖包，devDependencies是开发时用到的依赖包。上面运行npm install时就是在下载安装这些依赖包。
package.json文件中的engines（引擎）对象则是说明了所使用引擎最低的版本号。
package.json文件中的browserslist则是浏览器配置。例如：

browserslist{
	">1%",      //  需要浏览器市场份额大于1%
	"last 2 versions",    //   要是最近的两个版本
	"not ie <= 8"         //     小于ie8不能使用
}

2. .babelrc文件
   用来配置ES6、ES5的，
   首先presets字段是一个数组，结构如下：

"presets":[         //预设
	[
		"env",     // 代表支持ES2017~ES2015的语法，如果写的是ES2015说明只支持ES2015的语法
		{
			"modules":false,        //是否支持模块化，如果支持需写明那种模块化规范
			"targets":{
				"browsers":["> 1%", "last 2 versions", not ie <= 8]
			}
		}
	],
	"stage-2"     //  草案阶段  一种新的语法需要经历五个阶段才会被证实批准，stage-2是第三阶段草案阶段，只要能进入草案阶段一般就会进入正式阶段。
]

3. .editorconfig文件：编辑器配置（此配置权重大于编辑器的配置）
   设置编辑器的编码方式、空格、是否隐藏空格、每行结尾有插入符可插入新行等。
4. .eslintignore文件：忽略一些文件夹对语法格式的检测。
5. .eslintrc.js文件：代码检测，一些代码的说明（代码格式）
   在rules字段可配置一些规则。(0代表不检测此错误，1代表不报错但警告，2代表报错)
6. .gitignore文件：忽略一些文件夹，这些文件夹不会被上传到git上。
7. .postcssrc.js文件：配置css的插件，自动增加一些前缀。
8. index.html文件：主页面，
   文件内只有一个div,通过main.js文件将所有标签注入到index.html文件。

src文件夹结构

main.js入口文件。被注入到index.html文件。
引入了Vue.js、App.vue、router文件夹。
App.vue是一个单文件组件，分为三部分（模板、script、css样式）

新版@vue/cli创建一个项目

1. 下载@vue/cli包npm install -g @vue/cli
2. 运行命令：vue create project_name
   然后会被提示选取一个 preset。可以选默认的出来包含基本的 Babel + ESLint 设置的 preset，其余的都没有比如路由,vuex等都需要自己手动去装，也可以选“手动配置”来选取需要的特性。这里我选择了手动配置。
3. 选择手动配置后进入到选择功能步骤， 我的选择如下：然后回车。

? Check the features needed for your project:
 (*) Babel
 (*) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

4. 选择接下来的选项，然后回车，就开始自动下载安装依赖包了

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press  to select,  to toggle all,  to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N

5. 等待下载安装完毕，就会提示。

  Successfully created project cli_demo.
  Get started with the following commands:

 $ cd cli_demo
 $ npm run serve

现在就可以运行或者开始项目了。