一：安装与创建
1.如果安装有vue-cli 2.0 1.0 先卸载
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
由于权限原因，我本身用了sudo npm uninstall vue-cli -g 来卸载
2.安装vue-cli3
npm install -g @vue/cli
# OR
yarn global add @vue/cli
由于权限原因，我本身用了sudo npm install -g @vue/cli 来安装
3.查看是否安装成功vue-cli3
vue --version
显示安装成功了, 版本号已经是3.2.1
image.png
4.创建项目
vue create vuecli3test
//OR
vue ui
4.1.第一步可以选择自定义模块，空格键可以选中可取消选中。个人是不太喜欢eslint的，束手束脚
image.png
4.2.之后一路回车，
创建好的项目如下，至此就可以为所欲为了
image.png
相比vue-cli2少了很多配置build、config这些配置文件不开放了。
4.3.可以在根目录下创建一个vue.config.js文件存放配置。
参考官方文档：https://cli.vuejs.org/zh/guide/webpack.html
// vue.config.js
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
}
}
}
5.安装插件,在项目的根目录下执行
vue add @vue/eslint //安装eslint
vue add router //安装router
vue add vuex //安装vuex
二：遇到的问题
1.使用npm 安装vue-cli3报错
npm ERR! path /usr/local/lib/node_modules/@vue/cli/node_modules/atob/bin/atob.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/@vue/cli/node_modules/atob/bin/atob.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
原因：之前用了yarn 安装vue-cli
解决方法：先用yarn卸载之前旧的vue-cli,再使用yarn安装
yarn global remove vue-cli
yarn global add @vue/cli
2.使用vue ui 出现了报错
Error: Cannot find module 'core-js/modules/es7.object.entries'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
at Function.Module._load (internal/modules/cjs/loader.js:520:25)
at Module.require (internal/modules/cjs/loader.js:650:17)
at require (internal/modules/cjs/helpers.js:20:18)
...
解决方法： 安装core-js npm i core-js -g
三：vue-cli3的优点
1.可以使用loadsh语法
<%= VALUE %> 用来做不转义插值；
<%- VALUE %> 用来做 HTML 转义插值；
<% expression %> 用来描述 JavaScript 流程控制。
2. Preload预先加载
[`<link rel="preload">`]
是一种 resource hint，用来指定页面加载后很快会被用到的资源，
所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
3. Prefetch空闲加载
[`<link rel="prefetch">`]
是一种 resource hint，用来告诉浏览器在页面加载完成后，
利用空闲时间提前获取用户未来可能会访问的内容。
