3. 开发环境搭建：Node.js与npm安装、Vue3项目初始化、Three.js库引入、开发工具推荐

说实话，搭建开发环境这件事，看着简单，但坑是真不少。我带过不少新人，十有八九都在这一步卡过。今天我就把这几年的经验捋一捋，帮你把环境一次搭好，后面写代码才不闹心。

3.1 Node.js 与 npm 安装

做数字孪生，Node.js 是绕不开的。它本质上就是一个 JavaScript 的运行环境，让你能在服务器端跑 JS 代码。npm 则是它的包管理器，说白了就是「应用商店」，你要用的 Three.js、Vue 都靠它下载。

3.1.1 下载与安装

去 Node.js 官网，下载 LTS 版本。别追新，LTS 最稳。我见过有人装最新版，结果项目依赖报错，折腾半天才发现是版本不兼容。

安装时一路默认就行。装完后打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入以下命令验证：

node -v
npm -v

如果能看到版本号，比如 v18.16.0 和 9.5.1，那就成了。

3.1.2 配置 npm 镜像源

为什么要配？因为 npm 默认的源在国外，下载速度慢得让人抓狂。我曾经等一个包下载等了十分钟，最后超时报错，气得我直接换了淘宝镜像。

配置方法很简单：

npm config set registry https://registry.npmmirror.com

配完后可以检查一下：

npm config get registry

看到返回的地址是淘宝镜像，就对了。

3.2 Vue3 项目初始化

Vue3 是目前前端圈很火的框架，用来搭数字孪生的管理界面再合适不过。初始化项目，我推荐用官方脚手架 create-vue。

3.2.1 创建项目

在终端里执行：

npm create vue@latest

然后会问你一堆问题，比如项目名、要不要 TypeScript、要不要路由等等。对于数字孪生项目，我建议这样选：

选项	推荐选择	说明
Project name	digital-twin-demo	项目名，自己取一个
Add TypeScript?	Yes	类型检查，减少运行时错误
Add Vue Router?	Yes	后面做多页面跳转用
Add Pinia?	Yes	状态管理，数据共享方便
Add ESLint?	Yes	代码规范，团队协作必备

选完后，脚手架会自动生成项目结构。然后进入项目目录，安装依赖：

cd digital-twin-demo
npm install

启动开发服务器：

npm run dev

浏览器打开 http://localhost:5173，看到 Vue 的欢迎页面，就说明项目跑起来了。

3.3 Three.js 库引入

Three.js 是 Web 端做 3D 可视化的首选库。它封装了 WebGL 的底层操作，让你用几行代码就能画出一个 3D 场景。

3.3.1 安装 Three.js

在项目根目录下执行：

npm install three

装完后，在 Vue 组件里引入：

import * as THREE from 'three'

就这么简单。但要注意，Three.js 的版本迭代很快，我建议锁定一个稳定版本，比如目前常用的 r152。在 package.json 里写上 "three": "^0.152.0"，避免自动升级带来兼容问题。

3.3.2 验证 Three.js 是否可用

写一个最简单的场景来测试。在 src 下新建一个组件，比如 Scene3D.vue：

<template>
  <div ref="container" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'

const container = ref(null)

onMounted(() => {
  // 创建场景
  const scene = new THREE.Scene()
  
  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, container.value.clientWidth / container.value.clientHeight, 0.1, 1000)
  camera.position.z = 5
  
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(container.value.clientWidth, container.value.clientHeight)
  container.value.appendChild(renderer.domElement)
  
  // 添加一个立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  scene.add(cube)
  
  // 动画循环
  function animate() {
    requestAnimationFrame(animate)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
})
</script>

把这个组件放到 App.vue 里，刷新页面，看到一个旋转的绿色立方体，就说明 Three.js 引入成功了。

3.4 开发工具推荐：VS Code + 插件

工欲善其事，必先利其器。VS Code 是目前前端开发的主流选择，轻量、插件丰富、免费。

3.4.1 必装插件

我列一个清单，这些插件能极大提升你的开发效率：

插件名称	作用	为什么推荐
Vue Language Features (Volar)	Vue3 语法高亮、智能提示	写 Vue 必备，比旧版 Vetur 快很多
TypeScript Vue Plugin	TypeScript 支持	配合 Volar 使用，类型提示更准确
ESLint	代码规范检查	团队协作时，统一代码风格
Prettier	代码格式化	保存时自动格式化，省心
Three.js Snippets	Three.js 代码片段	快速生成常用代码，比如创建场景、相机
GitLens	Git 历史查看	看代码是谁写的、什么时候改的

3.4.2 配置建议

装完插件后，建议在 VS Code 设置里开启「保存时自动格式化」：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样每次保存代码，Prettier 会自动格式化，ESLint 会自动修复简单问题。嗯，写代码的体验会舒服很多。

3.5 本章知识体系

下面这张图，帮你理清本章的核心脉络：

这张图展示了本章的四个核心模块：Node.js 环境是基础，Vue3 提供界面框架，Three.js 负责 3D 渲染，VS Code 是开发工具。它们层层递进，缺一不可。

好了，环境搭好了，后面就可以正式开始写代码了。记住，环境搭建虽然枯燥，但基础打牢了，后面才能跑得快。

---