脚本宝典收集整理的这篇文章主要介绍了（小白篇）vue-cli3.0创建项目+引入element-ui，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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保存，并给这个配置命名，然后就开始下载模板啦

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

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

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

再选择Fully import

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的（小白篇）vue-cli3.0创建项目+引入element-ui全部内容，希望文章能够帮你解决（小白篇）vue-cli3.0创建项目+引入element-ui所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。