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目录等)


 

 

 

 

 

 

 

 

 

Logo

前往低代码交流专区

更多推荐