nvm、node、vue安装、vue项目创建打包

发布时间 2023-09-13 11:47:34作者: C_C_菜园

nvm、node、vue安装、创建vue项目

  • nvm作用:可以管理多个版本的node切换node版本下载node

前情提要

一、常用命令

1、nvm查看安装了的node

nvm ls
nvm list  //查看安装的node版本,如果所有的版本前面都没有*,说明node指定版本没成功,运行node -v 会提示 ‘node’不是内部或外部命令

2、nvm下载node

//x.x.x  版本号
nvm install x.x.x
nvm install 16.15.0
nvm install 16.18.0
nvm install 18.12.0

3、nvm切换node版本

//x.x.x  版本号
nvm use x.x.x

4、查看版本

//看nvm版本
nvm -v
//看node版本
node -v

二、安装步奏

1、 node全部卸载掉

2、安装nvm

  • 前面下载安装

3、安装node

  • 一、2

4、使用nvm use 命令切换到指定版本

  • 一、3

5、配置npm安装的:全局模块路径缓存的路径

npm config set prefix "D:\Develop\App\NodeNvmAll\Node_Global"

npm config set cache "D:\Develop\App\NodeNvmAll\Node_Cache"

6、配置全局环境变量

//查看全局配置:上面的:D:\Develop\App\NodeNvmAll\Node_Global\node_modules
npm root -g
  • 把路径配置到PATH中
  • 经过测试,应该把环境变量配置到全局模块即可:D:\Develop\App\NodeNvmAll\Node_Global

7、安装一个模块进行测试

  • 看是否安装在了设置的D盘路径下

  • (可以跳过这步,直接第8步)

//安装
npm install pnpm -g
//验证
pnpm -v

image

8、安装、配置淘宝镜像

//安装
npm install -g cnpm --registry=https://registry.npm.taobao.org
//验证
cnpm -v

image

  • 配置淘宝镜像
npm config set registry https://registry.npm.taobao.org
  • 查看配置:
//查看所有配置
npm config ls
或
//查看npm当前镜像源(推荐)
npm config get registry

三、安装vue

1、安装vue,只需执行1

//1、全局安装
npm i -g @vue/cli
//2、卸载全局
npm uninstall vue-cli -g
//3、升级
npm update -g @vue/cli

2、验证vue

vue -V

3、新建项目-自定义配置(推荐)

1、首先切换到项目目录
2、执行:vue create 项目名
3、其他自己百度
4、运行项目:npm run serve

image

成功:

image

4、vue打包

npm run build

四、总结

  • 如果pnpm、cnpm、vue都无法查看版本,说明全局环境变量配置错误,需要配置到全局模块路径即可,不需要配置到:全局模块路径\node_modules