1.1 开发环境与工具

本章目标： 分清运行时、包管理器和构建工具，创建一个可以反复练习的 Vue 项目。

两个项目，两个用途

当前仓库是 Docusaurus 文档站，用 React 渲染文章。你将创建的 vue-lab 才是 Vue 学习项目。不要把 .vue 文件直接放进文档站的 src/。

项目	启动位置	常用命令	默认端口
学习文档站	当前仓库根目录	npm start	3000
Vue 学习项目	vue-lab 目录	npm run dev	5173
附带实战前端	examples/task-board/web	npm run dev	5173
附带实战 API	examples/task-board/api	dotnet run	5080

端口被占用时工具可能自动选择其他端口，以终端打印的地址为准。

安装与检查

安装 VS Code、Vue - Official 扩展，以及 Node.js。新建 Vue 项目请满足当前 Vue 官方快速开始要求：Node.js 22.18+（22.x）或 24.12+；建议使用维护中的 LTS 版本。官方脚手架的最低要求可能随着 Vite 升级变化。

检查工具

node --version
npm --version

node 对应 JS 运行时，npm 负责安装包和执行项目脚本，Vite 负责开发服务器与前端构建。最终生成的网页不依赖访问者安装 Node.js。

对照 .NET

npm install 类似还原依赖；npm run build 类似构建发布；npm run dev 类似启动开发服务。但这些只是流程类比，产物和运行机制不同。

创建学习项目

在当前仓库的同级目录运行以下命令，避免混入文档站依赖：

创建 vue-lab

cd D:\Docs
npm create vue@latest

项目名填写 vue-lab。功能选项建议如下，脚手架版本不同可能显示复选列表：

选项	本阶段选择	原因
TypeScript	是	利用你的强类型编程经验
JSX	否	先学习 Vue 模板
Vue Router / Pinia	否	工程章节再安装和配置
Vitest / E2E	否	先降低起步复杂度
ESLint / Prettier	是	帮助发现错误、统一格式

安装并运行

cd vue-lab
npm install
npm run dev

终端会显示本地网址。打开后应看到 Vue 初始页面。安装失败时先检查网络、代理和 Node 版本，不要在多个目录反复执行安装命令。

认识项目文件

常用文件

vue-lab/
  src/
    App.vue          # 根组件
    main.ts          # 创建并挂载应用
    assets/          # 参与构建的样式与图片
  public/            # 原样复制的静态资源
  index.html         # 浏览器入口
  package.json       # 依赖、脚本
  package-lock.json  # 精确依赖版本
  vite.config.ts     # 开发与构建配置

main.ts 的核心流程：

入口代码片段

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

#app 是 index.html 中 <div id="app"></div> 的选择器。组件通过这个入口进入页面。

提交 package-lock.json。在已有锁文件的 CI 或干净环境中用 npm ci 保证依赖一致，首次创建项目用 npm install。

开发与生产的区别

生成和检查生产产物

npm run build
npm run preview

Vue 项目的产物通常是 dist/；Docusaurus 文档站的产物是 build/。preview 用于本地检查，正式部署通常由 IIS、Nginx 或静态托管平台提供文件。

练习

启动 vue-lab，修改初始页面中的一个标题。确认保存后浏览器自动更新，并在 package.json 中找到 dev 和 build 脚本。

检查答案

命令必须在含 package.json 的项目目录执行。保存后即时更新来自 Vite 的开发服务；直接双击 .vue 文件不能运行应用。如果没有更新，确认你修改的是当前终端启动的项目。

下一步： 第一个 Vue 组件。参考：Vue 快速上手、Node.js。