摘要：在年月份发布了版本，经过重构之后，可以说是一个船心版本在项目都落地之后，就想升级一下版本，尝一尝带来的舒适，也是为后面项目的开展做一个准备。选了之后会询问是否开启模式，以及选择预处理器，这里根据个人情况选用。
vue-cli在2018年8月份发布了3.0版本，经过重构之后，可以说是一个船心版本！
在项目都落地之后，就想升级一下cli版本，尝一尝3.0带来的舒适，也是为后面项目的开展做一个准备。
首先，如果电脑已经安装了vue-cli2.0，需先进行卸载操作
</>复制代码
# npmnpm uninstall vue-cli -g# yarnyarn global remove vue-cli
卸载后进行安装操作
</>复制代码
# npmnpm install @vue/cli -g# yarnyarn 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 to select, to toggle all, 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了！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103190.html
摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。 前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，...
摘要：同时增加了单元测试，使用了，增加了可视化配置权限，增加了自定义布局等等，优化了原先的权限方案，支持不刷新页面更新路由等等功能。虽然它的初衷是为了单元测试的，但正好满足了我们的需求。它会重写浏览器的对象，从而才能拦截所有请求，代理到本地。前言 vue-element-admin 从 2017.04.17提交第一个 commit 以来，维护至今已经有两年多的时间了了，发布了四十多个版本，收获了三...
摘要：安装完成之后，打开命令行工具，然后输入，输入和，如下图，如果出现相应的版本号，则说明安装成功。 先说点什么 刚从坑里爬出来,来和大家分享一下,也许我写的东西大部分文章都有,但是也有些新的东西,小白仔细看哦,大牛来了也请指点一二,也帮助我进步! 进入正题 Vue 2.0 项目的基本创建 一.Vue 2.0 的环境搭建 1.node.js安装 安装原因:Node.js 是一个服务器...
阅读 3508·2023-04-25 18:14
阅读 1624·2021-11-24 09:38
阅读 3343·2021-09-22 14:59
阅读 3138·2021-08-09 13:43
阅读 2656·2019-08-30 15:54
阅读 635·2019-08-30 13:06
阅读 1639·2019-08-30 12:52
阅读 2789·2019-08-30 11:13
