nvm工具管理NodeJS实现过程，安装vue和vue-cli

最新推荐文章于 2024-06-09 12:01:11 发布

꧁༺帅吗༻꧂

最新推荐文章于 2024-06-09 12:01:11 发布

阅读量2.2k

点赞数 7

文章标签： vue.js npm node.js

本文链接：https://blog.csdn.net/lubricate_Tiam/article/details/125691430

版权

导读

1、已经安装过Node.js的需要先卸载干净

3.4.1、 'vue' 不是内部或外部命令？

1、已经安装过Node.js的需要先卸载干净

2、nvm工具的下载及安装

解压下载的文件，得到该文件，右击以管理员身份运行

2.1、检验nvm是否安装成功

步骤：win+R ——>cmd（调出命令行窗口） ——> nvm v

2.2、安装node.js

1）、查看可安装的node版本，部分

nvm ls available

2）、下载需要的node.js版本，会安装对应版本以及自动安装对应的npm版本，命令如下

nvm install 12.7.0

3）、安装成功之后，选择你本地需要使用的node.js版本，并且会自动配置环境变量，不用自己去配置，命令如下

nvm use 12.7.0

4）、检查node.js和npm是否安装成功，出现版本号，则说明安装成功，命令如下

node -v     #检查node.js版本
npm -v     #检查npm的版本

5、以下命令可以查看你安装的所有node.js版本，可以安装多个版本，只需要选择你想要使用的版本即可

nvm ls

3、安装vue及vue-cli

3.1、配置路径，减小C盘压力

原因

因为在执行例如 npm install -g @vue/cli 等命令进行全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，造成C盘空间减小。

解决

配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，然后在cmd命令下执行如下两个命令

npm config set prefix "D:\tools\NVM\NodeJS\node_global"

npm config set cache "D:\tools\NVM\NodeJS\node_cache"

3.2、配置淘宝镜像

在cmd（命令行窗口中）

npm config set registry https://registry.npm.taobao.org

3.3、安装vue-cli和vue

vue-cli或者vue后面有@符号，表示安装的版本号，没有则默认安装最新版本

npm install -g @vue/cli@4.5.12    #安装vue-cli
npm install -g vue    #安装vue

3.4、检查是否安装成功

vue -V    检查 vue-cli 是否安装成功
npm list vue    检查 vue 是否安装成功

查看vue版本显示为空，是因为使用nvm管理node时查不出来，但本地已存在，忽略即可

3.4.1、 'vue' 不是内部或外部命令？

原因：vue.cmd 没有配置环境变量

解决：

1）、找到安装node.js的node_global文件夹（因为vue.cmd存在该文件夹），复制路径

D:\tools\NVM\nvm\v12.7.0\node_global

2）、配置环境变量，win10找到环境变量面板：此电脑右击属性，之后参考下面方法：

3）、新建系统变量：VUE = D:\tools\NVM\nvm\v12.7.0\node_global

4）、在系统环境变量 Path 后添加 %VUE%

5）、搞定，重试vue -V即可

4、测试vue是否安装成功

4.1、创建test-vue项目

vue init webpack 项目名

注意：安装组件和安装依赖是在你新建的项目路径中进行，即初始化项目后，需要cd进入项目名（这里是cd test-vue）进入项目路径，这里测试不需要安装组件和依赖。当然，运行也是需要进入到项目中的。

附：

关注

7
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
nvm工具管理NodeJS实现过程，安装vue和vue-cli

管理node.js的工具nvm，安装vue及vue-cli、测试vue安装是否成功
复制链接

扫一扫