vue-cli脚手架version2和3的使用及更新的问题解决

vue-cli2.+版本升级 vue-cli3.+版本首先卸载旧版本npm uninstall vue-cli -g安装新版本npm i @vue/cli -g包名称由 vue-cli 改成了 @vue/cli安装更新之后，通过 vue -V 查看 vue-cli 安装的版本，如果版本没有发生变化，排除掉 npm 环境的问题，那么可能是因为缓存...

扛狼1427

6181人浏览 · 2019-08-16 11:30:21

扛狼1427 · 2019-08-16 11:30:21 发布

vue-cli2.+版本升级 vue-cli3.+版本

首先卸载旧版本

npm uninstall vue-cli -g

安装新版本

npm i @vue/cli -g

包名称由 vue-cli 改成了 @vue/cli

安装更新之后，通过 vue -V 查看 vue-cli 安装的版本，如果版本没有发生变化，排除掉 npm 环境的问题，那么可能是因为缓存，

这时，需要清理缓存。注意：使用管理员身份运行此命令

清除缓存

npm cache clear --force

查看版本号：

@vue/cli（3.版本）和 vue-cli（2.版本）的区别

vue-cli 创建项目： vue init webpack [项目名称] @vue/cli创建项目： vue create 项目名称如果使用git Bash Here ，则需要通过 winpty vue.cmd create 项目名称创建项目，否则，交互提示符无效
vue-cli 启动项目： npm run dev @vue/cli 启动项目： npm run serve
@vue/cli 相对于 vue-cli 少了 build（项目的配置文件webpack.config.js等）和config（dev环境、prod环境）目录文件可通过新建 vue.config.js 进行代替
vue-cli中的.babelrc文件替换成@vue/cli中的babel.config.js文件
vue-cli 2.版本中 package.json 包配置文件 browserslist @vue/cli 3. 版本中 package.json 包配置文件 browserslist
vue-cli 2.版本中 .postcssrc.js 文件 @vue/cli 3.版本中 .postcssrc.js 文件

创建@vue/cli 项目

vue create hello-world hello-world:项目名称

默认创建则一路安装依赖，坐等安装完成即可

手动创建：

按空格进行对应选择，a全选，i反选

这里我们只采用 Babel + Router + Vuex + Css Processors

npm run serve 运行时报错：

去less的github中找问题和答案 https://github.com/less/less.js/issues/3414 ，下载less3.9.0的版本即可

安装@vue/cli 3的版本后还想使用vue-cli 2的版本？

默认情况下，@vue/cli已经没有 vue init webpack 命令了，可通过全局安装一个桥接工具

npm i -g @vue/cli-init

即可使用 vue init webpack 项目名称创建项目

创建的依然是vue-cli 2.版本的 vue项目（包含build和config目录等）

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^