全局vue2下安装vue3遇到的问题

近期有项目需要使用vue3, 又鉴于之前的vue2项目仍在维护,所以打算同时使用vue2和vue3, 以下是安装vue3并使用的过程中遇到的问题

提示: 先通看全文

安装vue3

1. 任意磁盘中创建vue3文件夹, 在vue3目录下打开命令行, 执行如下命令, 不加-g(全局安装)

npm install @vue/cli

由于我电脑的node版本是10+, 所以在安装过程中提示应使用12或14+以上的版本才能安装vue3, 然后我就安装了最新node, 然后再安装vue3成功 (node版本后续又产生了一系列问题, 继续看下去)

2. 打开vue3/node_modules/.bin, 修改文件夹下vue和vue.cmd的名称, 一定要改, 不然使用vue命令就是默认用的vue3; 我这是改成vue3和vue3.cmd了, 到时用vue3创建项目就是

vue3 init ...

3. 配置vue3的全局环境变量
   win10下找到环境变量配置的地方, 新建如下变量;
   
   找到path变量,编辑–>新建VUE_CLI3
   
   重启电脑后在命令行运行检测

vue3 -V

node版本问题

项目vue2中使用的node-sass与node最新版不兼容, 网上查支持版本, 鉴于项目中使用的node-sass是4.14版本, vue3又要求12以上, 我就下载了node@14+的版本

node历史下载地址:https://nodejs.org/zh-cn/download/releases/

安装此版node后仍然提示node-sass有问题, 继续降版,又降到了@12+; 好了这些终于vue2项目可以正常运行了;
但是, vue3的示例项目又出问题了, 无法运行, 检查问题所在, 项目要求node版本在14.18.0以上;

如果升到14, vue3可以用, vue2不支持;
降到12, vue3不支持, vue2可用;
所以又下载了nvm, 支持切换多版本node;

nvm的安装

1. 下载nvm
   nvm下载地址
   https://github.com/coreybutler/nvm-windows/releases
   最好下载此版本, 环境变量都自动配置了,不用单独配了;
   

2. 安装
   提示:如果安装了node就先卸载了, 不然安装过程中也会提示让你卸载node的;
   按照指示一步一步向下即可, 最好不安装在c盘
   
   安装过程中会有两个路径需要选择,这两个路径分别是nvm和node的安装路径;

鉴于我已经跳过坑了, 这里提示你们一下, 千万不要选择路径中有中文或者空格或者特殊符号的; 不然等之后还有其他错误会发生;(切换node版本会失败)

3. 配置nvm下的setting.txt
   
   刚安装的setting.txt只有上边的两行代码, 下边两行是需要自己加一下的, 切记一定要加, 不然node没法下载!!

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

4. 检查安装是否成功, 运行命令nvm即可

nvm

会看到以下图中内容, 没有就重新安装吧

nvm list : 查看安装的node列表, 或者直接nvm ls
nvm use 12.12.0: 使用某版本的node
nvm install 14.18.0: 安装某版本node;

5. 如果nvm install version时失败, 可能是setting没有配置成功;重新配置或者直接node官网下载node的zip包解压放到nvm文件下, 我就是没有配置成功, 自己下载的, 文件夹要按照下图重命名;
   

要保证下载的node中是完整的, 各版本里的内容不太一样, 但是node.exe必须是绿色文件, node, npm文件都要有

我下载了一个不完整的14.18.0, 运行npm, 提示无此命令, 发现就是包里缺少了npm和npm.cmd;

6. nvm use 14.18.0 切换版本发现乱码
   

这种情况就是按装nvm路径时出现空格或中文了
不想重新安装可以用管理员身份打开命令行, 然后再执行切换命名是可以成功的;

执行nvm list 可看到12是当前使用的node版本, 也可执行node -V查看当前node版本

这样就可以随意切换node版本了, 但是也只能同时打开vue2或vue3一个类型的项目;