2. 开发环境搭建：从零开始，把工具备齐

说实话，很多新手在「环境搭建」这一步就卡住了。我见过不少同学，装个 Node.js 就折腾半天，最后项目跑不起来，心态直接崩了。

这一章，我带你一步步把环境搭好。咱们的目标是：一次配好，后面省心。

2.1 安装 Node.js：一切的基础

Node.js 是前端开发的基石。没有它，Vue CLI、npm、甚至咱们后面要用的各种构建工具都跑不起来。

安装步骤：

1. 打开 Node.js 官网，下载 LTS 版本（长期支持版）。我个人习惯用 LTS，稳定，坑少。
2. 双击安装包，一路「Next」就行。记得勾选「Add to PATH」。
3. 安装完成后，打开终端（CMD 或 PowerShell），验证一下：

node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就说明装好了。

2.2 安装 Vue CLI：脚手架工具

Vue CLI 是官方提供的脚手架工具。说白了，就是帮你快速生成一个标准化的 Vue 项目，不用自己从零开始配置 webpack、babel 这些。

安装命令很简单：

npm install -g @vue/cli

安装完成后，验证一下：

vue --version

如果看到 @vue/cli 5.x.x，就说明装好了。

2.3 创建 Vue 3 项目：第一个里程碑

环境准备好了，咱们来创建项目。我习惯把项目放在一个专门的目录下，比如 D:\projects 或 ~/workspace。

打开终端，进入你想放项目的目录，然后运行：

vue create realtime-dashboard

这里 realtime-dashboard 是项目名，你可以自己取。回车后，会出现一个交互式菜单：

• 选择预设：选 Manually select features（手动选择特性）。
• 勾选特性：用空格键勾选 Choose Vue version、Babel、Router、Vuex、Linter / Formatter。
• 选择 Vue 版本：选 3.x。
• 路由模式：选 Yes（使用 history 模式）。
• 代码规范：选 ESLint + Prettier。
• 其他选项：选 Lint on save，配置文件选 In dedicated config files。

等几秒钟，项目就创建好了。你会看到类似这样的输出：

🎉  Successfully created project realtime-dashboard.
👉  Get started with the following commands:

 $ cd realtime-dashboard
 $ npm run serve

试试看：

cd realtime-dashboard
npm run serve

浏览器打开 http://localhost:8080，如果看到 Vue 的欢迎页面，恭喜你，项目跑起来了！

2.4 配置 ESLint 和 Prettier：让代码风格统一

团队协作时，代码风格不统一是最让人头疼的。有人用 2 空格缩进，有人用 4 空格；有人喜欢单引号，有人喜欢双引号。ESLint 和 Prettier 就是来解决这个问题的。

项目创建时我们已经选了 ESLint + Prettier，但默认配置可能不够细致。我一般会做以下调整：

1. 修改 .eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,      // 单引号
        semi: false,            // 不要分号
        tabWidth: 2,            // 2 空格缩进
        trailingComma: 'none'   // 不要尾逗号
      }
    ]
  }
}

2. 修改 .prettierrc：

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "trailingComma": "none"
}

2.5 初始化 Git 仓库：版本控制的第一步

代码写完了，总得有个地方存着吧？Git 就是干这个的。项目创建时，Vue CLI 已经自动帮你初始化了 Git 仓库，但咱们还是得手动配置一下。

1. 查看当前状态：

git status

你会看到一堆文件，都是 Vue CLI 自动生成的。

2. 添加 .gitignore：

Vue CLI 已经生成了 .gitignore 文件，默认会忽略 node_modules、dist 等目录。你可以检查一下，确保包含以下内容：

node_modules/
dist/
*.local
.DS_Store

3. 提交代码：

git add .
git commit -m "初始化项目：Vue 3 + ESLint + Prettier"

4. 关联远程仓库（可选）：

如果你有 GitHub 或 GitLab 仓库，可以这样关联：

git remote add origin https://github.com/你的用户名/realtime-dashboard.git
git push -u origin main

git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

2.6 本章知识体系总览

为了让你更直观地理解本章的内容，我画了一张流程图，展示了从安装 Node.js 到初始化 Git 仓库的完整链路：

2.7 常见问题与解决方案