vue-cli在2018年8月份发布了3.0版本,经过重构之后,可以说是一个船心版本!
在项目都落地之后,就想升级一下cli版本,尝一尝3.0带来的舒适,也是为后面项目的开展做一个准备。
首先,如果电脑已经安装了vue-cli2.0,需先进行卸载操作

# npm
npm uninstall vue-cli -g
# yarn
yarn global remove vue-cli

卸载后进行安装操作

# npm
npm install @vue/cli -g
# yarn
yarn global add @vue/cli

安装成功后,敲入以下命令行创建项目

vue create test-cli3

这跟2.0的vue init webpack命令不一样,如想保持一致的输入效果,请自行安装

npm install @vue/cli-init -g

那么下面就跟着创建步骤一步一步来吧!

在上面敲入创建项目的命令之后,就会出现下面的选择:

? Please pick a preset: (Use arrow keys)
> first_test (vue-router, less, babel, eslint)
  default (babel, eslint)
  Manually select features

选择插件,默认的只有babel和eslint,这里选择Manually select featrues,后面通过手动配置自己所需要的插件

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
>(*) Babel  // 预编译
 ( ) TypeScript  //TS
 ( ) Progressive Web App (PWA) Support
 (*) Router // 路由
 (*) Vuex // 数据仓库
 (*) CSS Pre-processors // css预处理器
 (*) Linter / Formatter  // 代码格式化
 ( ) Unit Testing // 单元测试
 ( ) E2E Testing  // e2e测试

上面的插件根据项目情况需要,使用空格选中。上面带*号的就是我这一次选中的。
选了router之后会询问是否开启history模式,以及选择css预处理器,这里根据个人情况选用。
接下来就是eslint选用规则,个人推荐第一或者第四种

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

选择完eslint规则之后,再选择Lint on save配置当保存代码时使用校验规则。

下一步就是询问要将babel、eslint这些配置单独配置成文件还是放在package.json文件,这里为了不让package.json文件显得太混乱,把配置单独弄成文件,也方便配置

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.
> In dedicated config files
> In package.json

配置完这些之后,就会询问你是否将刚刚这些配置保存,方便以后创建项目的时候直接使用

Save this as a preset for future projects? (y/N)

这里敲y保存,并给这个配置命名,然后就开始下载模板啦

clipboard.png

上面就是下载完的项目结构,比2.0少了很多文件夹,也没有一大堆webpack的配置文件,这对于很多小白来说,不用一开始就需要理解很多配置,看起来比较清爽。

下面就开始安装element-ui
在cli3.0安装插件也有一些差异,具体请移步官网查看详细文档

这里使用vue add element命令安装element-ui

再选择Fully import

PS:这里需要注意一点,使用vue add安装插件时,应确保当前项目提交最新,因为有可能会覆盖掉app.vue这个文件的部分内容,比如安装element,就会将app.vue的内容增加多一个按钮的显示,如图

clipboard.png

那看到这个图,也就说明element-ui安装成功啦,然后就可以在各个组件里面,跟以前一样使用element了!

本文固定链接: http://www.js-code.com/vue-js/vue-js_26354.html