Vue.js: 环境搭建与 Hello World

# 1. 安装 Node.js 20.x LTS（推荐用 nvm 多版本管理）
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows: 下载 nvm-windows，https://github.com/coreybutler/nvm-windows

# 2. 安装 pnpm（比 npm 快 2x，节省磁盘 50%）
npm install -g pnpm

# 3. 用 create-vue 创建项目（Vue 3 官方脚手架）
pnpm create vue my-app
# 交互选项：TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No

# 4. 启动开发服务器
cd my-app
pnpm install
pnpm dev
# → 浏览器打开 http://localhost:5173 看到 Vue 欢迎页

# 安装 nvm
# Mac/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Windows:
# 下载 nvm-windows: https://github.com/coreybutler/nvm-windows

# 用 nvm 安装 Node 20
nvm install 20
nvm use 20

# 验证
node --version  # v20.x.x
npm --version   # 10.x.x

# 安装 pnpm
npm install -g pnpm

# 验证
pnpm --version  # 9.x.x

# 装项目依赖
pnpm install    # 比 npm install 快 2-3x

# 用 pnpm（推荐）
pnpm create vue my-vue-app

# 用 npm
npm create vue@latest my-vue-app

# 用 yarn
yarn create vue my-vue-app

my-vue-app/
├── public/                  # 静态资源
│   └── favicon.ico
├── src/                     # 源代码
│   ├── assets/              # 图片、字体
│   ├── components/          # 公共组件
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   └── icons/
│   ├── router/              # Vue Router 配置
│   │   └── index.ts
│   ├── stores/              # Pinia stores
│   │   └── counter.ts
│   ├── views/               # 页面组件
│   │   ├── HomeView.vue
│   │   └── AboutView.vue
│   ├── App.vue              # 根组件
│   └── main.ts              # 入口文件
├── index.html               # HTML 入口
├── package.json             # 项目元数据
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 配置
└── README.md

# 启动开发服务器（热更新）
pnpm dev

# 生产构建（输出到 dist/ 目录）
pnpm build

# 本地预览生产构建
pnpm preview

# 类型检查（Vue 3 + TS）
pnpm type-check

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "typescript.tsdk": "node_modules/typescript/lib"
}

# Mac/Linux 用 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

# Windows 用 nvm-windows，下载：https://github.com/coreybutler/nvm-windows
# 安装后打开 PowerShell:
nvm install 20
nvm use 20

# 验证
node --version  # v20.x.x
npm --version   # 10.x.x

npm install -g pnpm

# 验证
pnpm --version  # 9.x.x 或更高

# 进入你想创建项目的目录
cd ~/projects

# 创建项目（交互模式）
pnpm create vue my-first-vue-app

# 按提示选择：
# ✅ TypeScript? Yes
# ✅ JSX? No
# ✅ Vue Router? Yes
# ✅ Pinia? Yes
# ✅ Vitest? No
# ✅ E2E? No
# ✅ ESLint? Yes
# ✅ Prettier? Yes

# 进入项目目录
cd my-first-vue-app

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 终端输出：
#   VITE v5.4.0  ready in 500 ms
#   ➜  Local:   http://localhost:5173/
#   ➜  press h + enter to show help

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <h1>{{ msg }}</h1>
  <p>这是你第一次修改 Vue 代码</p>
</div>

<script>
const { createApp, ref } = Vue
createApp({
  setup() {
    // 改成你的名字
    const msg = ref('Hello Alice! Welcome to Vue 3!')
    return { msg }
  }
}).mount('#app')
</script>

# 一键检查开发环境是否就绪
node --version      # 应输出 v18+ 或 v20+
npm --version       # 应输出 9+ 或 10+
pnpm --version      # 应输出 8+ 或 9+（如未装：npm i -g pnpm）
git --version       # 应输出 2.30+
code --version      # 应输出 1.80+（如未装：https://code.visualstudio.com）

# 查看全局包
npm list -g --depth=0