VUE CLI4新特性以及项目搭建

默认进行懒观察。在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
更精准的变更通知。2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
新加入了 TypeScript 以及 PWA 的支持
目录结构和依赖版本的变更

新增插件 vue add vuex vue add router
pug-plain已重命名为pug-plain-loader
默认目录结构已更改
src/store.js 改为 src/store/index.js
src/router.js 改为 src/router/index.js
由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json
但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }
获得更好的一致性
"@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v4
sass-loader由 v7 的版本升级到了 v8
core-js由 v2 的版本升级到了 v3
webpack-chain由 v4 的版本升级到了 v6
css-loader由 v1 的版本升级到了 v3
url-loader由 v1 的版本升级到了 v2
file-loader由 v3 的版本升级到了 v4
copy-webpack-plugin由 v4 的版本升级到了 v5
terser-webpack-plugin由 v1 的版本升级到了 v2
@vue/cli-plugin-pwa由 v3 的版本升级到了 v4
api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')
lintOnSave 选项的默认值（未指定时）从 true 更改为 default
废弃vue-cli-service test:e2e
@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x
@vue/cli-plugin-unit-mocha 升级到Mocha 6
@vue/cli-plugin-unit-jest jest由 v23 升级到v24
@vue/cli-plugin-typescript 更好的ts(x)支持，胜过js(x)

npm uninstall -g vue-cli
 
npm install -g @vue/cli

安装好了之后输入 vue -V 查看版本

vue create <Project Name> //文件名 不支持驼峰（含大写字母）

default 是使用默认配置

Manually select features 是自定义配置，我选的是自定义配置

按上下键切换，空格键选择

是否使用class风格的组件语法，是
是否使用babel做转义，是

选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，选择 N

css 的预处理器我选择的是 Sass/SCSS(with dart-sass) 。node-sass是自动编译实时的，dart-sass需要保存后才会生效

sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现

选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多

然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个

如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字

然后就开始创建项目，创建完成之后输入命令

npm run serve