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 环境的问题，那么可能是因为缓存，

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

清除缓存

npm  cache  clear  --force

 查看版本号：

---

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

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

---