vue环境搭建

一、node.js

1.下载并安装node.js

官网：https://nodejs.org/en/download/

2.修改npm全局安装路径和缓存目录

终端：CMD
mkdir "D:\Program Files\nodejs\node_global"
mkdir "D:\Program Files\nodejs\node_cache"
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

3.配置第三方依赖包安装目录

终端：CMD
chcp 65001
for /f "delims=" %i in ('npm config get prefix') do set NODE_PATH="%i"
set NODE_PATH=%NODE_PATH:"=%
setx NODE_PATH "%NODE_PATH%" /m

终端：PowerShell
$currentPath = [Environment]::GetEnvironmentVariable("PATH", "Machine")
$nodePath = [Environment]::GetEnvironmentVariable("NODE_PATH", "Machine")
[Environment]::SetEnvironmentVariable("PATH", "$currentPath;$nodePath", "Machine")

4.更换npm的镜像源

终端：CMD
npm config set registry https://registry.npmmirror.com

二、nrm

终端：CMD

1.下载与安装

npm install -g nrm

2.查看可用镜像源

nrm ls

3.切换镜像源

nrm use taobao

4.测试镜像源速度

nrm test

三、nvm

终端：CMD

1.下载并安装nvm

官网：https://nvm.uihtm.com/doc/download-nvm.html

2.强制设置nvm root路径

nvm root "D:\Users\神舟\AppData\Local\nvm"

3.更换nvm镜像源

nvm node_mirror https://npmmirror.com/mirrors/node/ 
nvm npm_mirror https://npmmirror.com/mirrors/npm/

4.将安装的node.js纳入nvm管理

mkdir "D:\Users\神舟\AppData\Local\nvm\v22.18.0"
xcopy "D:\Program Files\nodejs" "D:\Users\神舟\AppData\Local\nvm\v22.18.0" /E /H /C /I

5.列出可用node.js版本

nvm list available

6.下载node.js

nvm install 22.21.1

7.切换node.js

nvm use 22.21.1

8.统一npm全局安装路径和缓存目录

终端：CMD
mkdir "D:\Users\神舟\AppData\Local\nvm\node_global"
mkdir "D:\Users\神舟\AppData\Local\nvm\node_cache"
npm config set prefix "D:\Users\神舟\AppData\Local\nvm\node_global"
npm config set cache "D:\Users\神舟\AppData\Local\nvm\node_cache"
xcopy "D:\Users\神舟\AppData\Local\nvm\v22.18.0\node_global" "D:\Users\神舟\AppData\Local\nvm\node_global" /E /H /C /I
xcopy "D:\Users\神舟\AppData\Local\nvm\v22.18.0\node_cache" "D:\Users\神舟\AppData\Local\nvm\node_cache" /E /H /C /I

9.配置第三方依赖包安装目录

终端：CMD
chcp 65001
for /f "delims=" %i in ('npm config get prefix') do set NODE_PATH="%i"
set NODE_PATH=%NODE_PATH:"=%
setx NODE_PATH "%NODE_PATH%" /m

终端：PowerShell
$currentPath = [Environment]::GetEnvironmentVariable("PATH", "Machine")
$nodePath = [Environment]::GetEnvironmentVariable("NODE_PATH", "Machine")
[Environment]::SetEnvironmentVariable("PATH", "$currentPath;$nodePath", "Machine")

四、vue

1.全局安装vue.js

终端：CMD
npm install vue -g

2.全局安装webpack模板

终端：CMD
npm install webpack -g
npm install webpack-cli -g

3.全局安装 vue-cli 3.x

终端：CMD
npm install @vue/cli -g
npm install vue-router -g

4.创建项目

终端：CMD
cd "D:\Users\神舟\Desktop\vue_test"
vue create vue_test

配置项目
方向键选择，回车确认

方向键选择，空格选中，回车确认




保存为模板

为模板命名

创建成功

4.运行项目

终端：CMD
cd "D:\Users\神舟\Desktop\vue_test"
cd vue_test
npm run serve

下载链接：
node.js（密码:5mts）
nvm（密码:gqy6）

ps:
1.npm镜像源

npm config set registry https://registry.npmmirror.com/ # 淘宝 NPM 镜像
npm config set registry https://npm.aliyun.com/ # 阿里云 NPM 镜像
npm config set registry https://mirrors.cloud.tencent.com/npm/ # 腾讯云 NPM 镜像
npm config set registry https://mirrors.huaweicloud.com/repository/npm/ # 华为云 NPM 镜像
npm config set registry https://mirrors.163.com/npm/ # 网易 NPM 镜像
npm config set registry https://mirrors.ustc.edu.cn/npm/ # 中国科学技术大学镜像站
npm config set registry https://mirrors.tuna.tsinghua.edu.cn/npm/ # 清华大学镜像站
npm config set registry https://r.cnpmjs.org/ # CNPM 镜像

2.nvm镜像源

# 淘宝NVM镜像
nvm node_mirror https://npmmirror.com/mirrors/node/ 
nvm npm_mirror https://npmmirror.com/mirrors/npm/
# 清华NVM镜像
nvm node_mirror https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/
nvm npm_mirror https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/npm/

1.查看node和npm版本
终端：CMD

npm -v
node -v

2.查看npm全局安装路径：npm config get prefix
3.查看npm镜像源：npm config get registry
2.查看vue版本：npm info vue、webpack -v、vue --version
3.安装Vue-Cli 2.x 安装与卸载
终端：CMD

# 安装
npm install vue-cli -g
# 卸载
npm uninstall vue-cli -g