1. 安装 Node.js 和 npm#

• 下载地址：Node.js 官网
  • 选择 LTS 版本（推荐 18.x+）
  • 安装时勾选 Add to PATH（自动配置环境变量）

2. 配置 npm 镜像加速（国内用户）#

1
# 设置淘宝镜像
2
npm config set registry https://registry.npmmirror.com
3

4
# 验证配置
5
npm config get registry

方法 1：命令行创建（推荐）#

1
# 初始化项目（项目名不能含大写字母）
2
vue create my-vue3-app

操作流程：

1. 选择 Manually select features
2. 勾选以下特性（按空格选择）：
   • Babel
   • TypeScript（可选）
   • Router
   • Vuex
   • CSS Pre-processors
3. 选择 Vue 3 版本
4. 其他配置按需选择（如 Sass 预处理器）

方法 2：Vite 快速创建（轻量级）#

1
npm create vue@latest
2
# 按提示选择配置

1. 启动开发服务器#

1
cd my-vue3-app
2
npm run dev  # Vite 项目
3
# 或
4
npm run serve  # Vue CLI 项目

• 访问 http://localhost:3000（Vite）或 http://localhost:8080（Vue CLI）

2. 解决 Windows 特有问题#

1
# 查找占用端口的进程
2
netstat -ano | findstr :3000
3

4
# 终止进程（替换 PID）
5
taskkill /PID 1234 /F

1. 使用 WSL2 开发（推荐）#

1
# 在 WSL2（Ubuntu）中安装环境
2
sudo apt update && sudo apt install nodejs npm
3
npm install -g @vue/cli

• 项目文件存放在 WSL 文件系统（\\wsl$ 访问）
• 开发命令与 Linux 一致，避免路径问题

2. 配置 VSCode 插件#

• 必装插件：
  • Volar（Vue 3 官方支持）
  • ESLint
  • Prettier
  • WSL（若使用 WSL2）

3. 环境变量管理#

1
# 创建 .env 文件
2
VITE_API_BASE_URL=http://localhost:8000

1
// 代码中调用
2
import.meta.env.VITE_API_BASE_URL

1. 构建项目#

1
npm run build

• 生成 dist 目录（部署到 Nginx/Apache）

2. Nginx 配置示例#

1
server {
2
    listen 80;
3
    server_name your-domain.com;
4

5
    location / {
6
        root   /path/to/dist;
7
        index  index.html;
8
        try_files $uri $uri/ /index.html;
9
    }
10
}

1. 使用 Yarn 替代 npm#

1
# 安装 Yarn
2
npm install -g yarn
3

4
# 常用命令
5
yarn install
6
yarn dev
7
yarn build

2. 添加 Windows 右键菜单快速启动#

1. 新建 vue-dev.reg 文件，写入：

1
Windows Registry Editor Version 5.00
2

3
[HKEY_CLASSES_ROOT\Directory\Background\shell\Vue Dev]
4
@="启动 Vue 开发服务器"
5
"Icon"="C:\\Path\\To\\Node.js\\node.exe"
6

7
[HKEY_CLASSES_ROOT\Directory\Background\shell\Vue Dev\command]
8
@="powershell -NoExit -Command \"cd '%V' && npm run dev\""

2. 双击运行注册表文件添加菜单

文档版本：v1.2
适用系统：Windows 11 21H2+
参考链接：Vue 3 官方文档 | Vite 文档