从vue-cli2.x升级到@vue/cli 4.x(node v14.15.0 / vue.js 3.0)

一，查看当前安装的vue-cli的版本:

1,vue-cli的官方站地址:

https://cli.vuejs.org/

2,查看本机安装的vue-cli的版本

[liuhongdi@localhost ~]$ vue --version
2.9.6

[liuhongdi@localhost ~]$ vue -V
2.9.6

3,查看npm支持的vue-cli的版本:

[root@localhost vuecli4]# npm view vue-cli versions
 
[
  '1.0.0', '1.0.1', '1.0.2', '1.0.3',
  '1.1.0', '1.1.1', '1.1.2', '1.1.3',
  '1.2.0', '1.3.0', '1.4.0', '2.0.0',
  '2.0.1', '2.0.2', '2.0.3', '2.0.4',
  '2.1.0', '2.1.1', '2.2.0', '2.3.1',
  '2.4.0', '2.5.0', '2.5.1', '2.6.0',
  '2.7.0', '2.8.0', '2.8.1', '2.8.2',
  '2.9.0', '2.9.1', '2.9.2', '2.9.3',
  '2.9.4', '2.9.5', '2.9.6'
]

二，vue-cli/@vue/cli的版本更迭

vue-cli从3.0开始，在npm库中的名字改为: @vue/cli

我们查看npm对@vue/cli 3.0以后版本的支持:

[root@localhost vuecli4]# npm view @vue/cli versions
 
[
  '3.0.0-alpha.1',  '3.0.0-alpha.2',  '3.0.0-alpha.3',  '3.0.0-alpha.4',
  '3.0.0-alpha.5',  '3.0.0-alpha.6',  '3.0.0-alpha.7',  '3.0.0-alpha.8',
  '3.0.0-alpha.9',  '3.0.0-alpha.10', '3.0.0-alpha.11', '3.0.0-alpha.12',
  '3.0.0-alpha.13', '3.0.0-beta.1',   '3.0.0-beta.2',   '3.0.0-beta.3',
  '3.0.0-beta.4',   '3.0.0-beta.5',   '3.0.0-beta.6',   '3.0.0-beta.7',
  '3.0.0-beta.8',   '3.0.0-beta.9',   '3.0.0-beta.10',  '3.0.0-beta.11',
  '3.0.0-beta.12',  '3.0.0-beta.13',  '3.0.0-beta.14',  '3.0.0-beta.15',
  '3.0.0-beta.16',  '3.0.0-rc.1',     '3.0.0-rc.2',     '3.0.0-rc.3',
  '3.0.0-rc.4',     '3.0.0-rc.5',     '3.0.0-rc.6',     '3.0.0-rc.7',
  '3.0.0-rc.8',     '3.0.0-rc.9',     '3.0.0-rc.10',    '3.0.0-rc.11',
  '3.0.0-rc.12',    '3.0.0',          '3.0.1',          '3.0.2',
  '3.0.3',          '3.0.4',          '3.0.5',          '3.1.0',
  '3.1.1',          '3.1.2',          '3.1.3',          '3.2.0',
  '3.2.1',          '3.2.2',          '3.2.3',          '3.3.0',
  '3.4.0',          '3.4.1',          '3.5.0',          '3.5.1',
  '3.5.2',          '3.5.3',          '3.5.4',          '3.5.5',
  '3.6.0',          '3.6.1',          '3.6.2',          '3.6.3',
  '3.7.0',          '3.8.0',          '3.8.2',          '3.8.3',
  '3.8.4',          '3.9.0',          '3.9.1',          '3.9.2',
  '3.9.3',          '3.10.0',         '3.11.0',         '3.12.0',
  '3.12.1',         '4.0.0-alpha.0',  '4.0.0-alpha.1',  '4.0.0-alpha.2',
  '4.0.0-alpha.3',  '4.0.0-alpha.4',  '4.0.0-alpha.5',  '4.0.0-beta.0',
  '4.0.0-beta.1',   '4.0.0-beta.2',   '4.0.0-beta.3',   '4.0.0-rc.0',
  '4.0.0-rc.1',     '4.0.0-rc.2',     '4.0.0-rc.3',     '4.0.0-rc.4',
  '4.0.0-rc.5',     '4.0.0-rc.6',     '4.0.0-rc.7',     '4.0.0-rc.8',
  '4.0.0',          '4.0.1',          '4.0.2',          '4.0.3',
  '4.0.4',          '4.0.5',          '4.1.0-beta.0',   '4.1.0',
  '4.1.1',          '4.1.2',          '4.2.0',          '4.2.1',
  '4.2.2',          '4.2.3',          '4.3.0',          '4.3.1',
  '4.4.0',          '4.4.1',          '4.4.2',          '4.4.3',
  '4.4.4',          '4.4.5',          '4.4.6',          '4.5.0',
  '4.5.1',          '4.5.2',          '4.5.3',          '4.5.4',
  '4.5.5',          '4.5.6',          '4.5.7',          '4.5.8',
  '4.5.9'
]

说明：刘宏缔的架构森林—专注it技术的博客，
网址：https://imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/05/26/cong-vuecli2-x-sheng-ji-dao-vue-cli-4-x-node-v14-15-vue-js-3/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com

三，升级@vue/cli到4.x

1， 先全局卸载vue-cli

[root@localhost test2]# npm uninstall vue-cli -g;
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
removed 1232 packages in 39.32s

测试vue命令是否可执行:

[root@localhost test2]# vue -V
bash: /usr/local/bin/vue: 没有那个文件或目录

2,用npm安装@vue/cli

[root@localhost test2]# npm install -g @vue/cli

查看新安装的@vue/cli的版本:

[root@localhost test2]# vue -V
@vue/cli 4.5.9

四，测试用新安装的@vue/cli创建一个vue.js3.0项目

1,手动创建一个名为vuecli4的项目:

[root@localhost vue]# vue create vuecli4

系统提示：

此处我们手动选择vue3 Preview

创建过程中输出的信息:如图:

2，创建完成后，按照提示执行:

[root@localhost vue]# cd vuecli4
[root@localhost vuecli4]# npm run serve

运行后的提示:

3,从浏览器中查看缺省页面:

4,查看项目中使用的vue.js版本:

[root@localhost vuecli4]# npm list vue
vuecli4@0.1.0 /data/vue/vuecli4
└── vue@3.0.2 

五,查看node的版本/npm的版本:

[root@localhost vuecli4]# node -v
v14.15.0
[root@localhost vuecli4]# npm -v
6.14.8