001、Vue3 + Vite + TypeScript + Element-Plus，第一个后台管理项目走向第一步：开建

原创

已于 2024-03-31 10:27:55 修改 · 1.6k 阅读

标签

#vue.js #学习 #json

收录于

于 2024-03-31 10:25:45 首次发布

本文介绍了如何在Windows上使用NVM安装Node.js和PNPM，以及如何配置Vite项目进行多环境管理，包括package.json的插件管理和Vite的环境变量加载规则，重点讲解了.env文件、不同模式下的环境变量处理和命名规范。

一、基本环境创建

1、安装nvm

在 https://github.com/coreybutler/nvm-windows/releases 下載nvm-setup.exe

Windows 下直接安装

nvm list available 查看nodejs版本
| CURRENT | LTS | OLD STABLE | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
| 21.7.1 | 20.12.0 | 0.12.18 | 0.11.16 |
| 21.7.0 | 20.11.1 | 0.12.17 | 0.11.15 |
| 21.6.2 | 20.11.0 | 0.12.16 | 0.11.14 |
| 21.6.1 | 20.10.0 | 0.12.15 | 0.11.13 |
| 21.6.0 | 20.9.0 | 0.12.14 | 0.11.12 |
| 21.5.0 | 18.20.0 | 0.12.13 | 0.11.11 |
| 21.4.0 | 18.19.1 | 0.12.12 | 0.11.10 |

2、安装nodejs

nvm install 20.12.0

安装完后use node 20.12.0 要选择使用哪一个
nvm uninstall 20.12.0 可以卸载
D:\work_hzyh>node -v
v20.12.0

安装完成

3、安装pnpm

pm i -g pnpm
pnpm get registry
pnpm set registry https://registry.npmmirror.com

# 允许设置全局安装包的 bin 文件的目标目录。
pnpm config set global-bin-dir "D:\pnpm-store"
# 包元数据缓存的位置。
pnpm config set cache-dir "D:\pnpm-store\pnpm-cache"
# pnpm 创建的当前仅由更新检查器使用的 pnpm-state.json 文件的目录。
pnpm config set state-dir "D:\pnpm-store\pnpm-state"
# 指定储存全局依赖的目录。
pnpm config set global-dir "D:\pnpm-store\global"
# 所有包被保存在磁盘上的位置。
#（可选，以下这条命令可以选择不执行也是OK的）
pnpm config set store-dir "D:\pnpm-store\pnpm-store"