Vue-cli3初体验

一：安装与创建

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，用来告诉浏览器在页面加载完成后，
利用空闲时间提前获取用户未来可能会访问的内容。

4. 打包的文件都自动加了hash值，不用担心浏览器取的还是缓存文件

5.打包后文件体积更小，合并成了一个文件，减少了不必要的网络请求

6.兼容低版浏览器，可自动打包两个包。支持ES2015+ 的浏览器一个包，不支持ES2015+ 的浏览器一个包

7. 隐藏了大部分webpack的配置，简化配置（这是我个人不是很喜欢的）