前言在上一篇文章《Vue3 时代来临》中我们明确了Vue3 不是“要不要学”的问题而是“必须掌握”的技能。但在真正开始写 Vue3 代码之前第一步就是搭好环境、选对工具链。这一篇我会从Node 版本 → 脚手架选择 → Vite 项目创建 → 推荐插件 → 项目结构解析一步一步带你走一遍「企业级 Vue3 开发环境」。一、Node.js 与包管理器准备1️⃣ Node.js 版本要求Vue3 Vite 对 Node 版本有明确要求工具推荐 Node 版本Vue 3≥16.0​Vite≥18.0推荐​✅ 查看当前版本node -v npm -v✅ 推荐安装方式nvmNode Version ManagerWindows 用户可用nvm-windows2️⃣ 包管理器选择包管理器特点npm稳定、通用yarn速度快、锁文件严格pnpm推荐​磁盘占用小、依赖结构清晰✅ 安装 pnpmnpm install -g pnpm二、为什么不用 Vue CLI而用 Vite对比项Vue CLIVite底层打包WebpackESBuild Rollup​启动速度慢打包全部依赖✅ 秒级启动HMR 速度一般✅ 极快Vue3 官方推荐❌✅一句话总结Vue CLI 是为 Vue2 时代设计的Vite 才是 Vue3 时代的标配。三、创建第一个 Vue3 Vite 项目1️⃣ 使用官方脚手架pnpm create vite my-vue3-app cd my-vue3-app pnpm install pnpm dev2️⃣ 选择配置项说明✔ Project name: … my-vue3-app ✔ Select a framework: › Vue ✔ Select a variant: › TypeScript✅ 推荐选择FrameworkVueVariantTypeScript是否加入 JSX❌前期不推荐四、项目结构解析重点my-vue3-app ├── index.html # 入口 HTML ├── package.json ├── tsconfig.json ├── vite.config.ts # Vite 配置文件 └── src ├── main.ts # 应用入口 ├── App.vue ├── components └── assets1️⃣ index.html 的变化Vue3 Vite 中HTML 是入口body div idapp/div script typemodule src/src/main.ts/script /body 与 Vue2 的区别不再由 webpack 自动注入更贴近原生浏览器模块机制2️⃣ main.ts 的变化非常重要import { createApp } from vue import App from ./App.vue createApp(App).mount(#app)✅ 对比 Vue2// Vue2 new Vue({ render: h h(App) }).$mount(#app)核心变化不再使用new Vue使用createApp创建独立应用实例避免全局配置污染3️⃣ App.vue 默认结构template h1{{ msg }}/h1 /template script setup langts import { ref } from vue const msg ref(Hello Vue3 Vite) /script✅ 这里已经使用了script setupTypeScriptComposition API五、VS Code 必备插件推荐插件名称作用Volar​Vue3 官方推荐替代 VeturTypeScript Vue PluginTS 类型支持ESLint代码检查Prettier代码格式化Vue VSCode Snippets快速生成代码⚠️注意使用 Vue3 时请禁用 Vetur否则会出现类型报错。六、Vite 常用配置速览vite.config.ts示例import { fileURLToPath, URL } from node:url; import { defineConfig, loadEnv } from vite; import AutoImport from unplugin-auto-import/vite; import Components from unplugin-vue-components/vite; import { ElementPlusResolver } from unplugin-vue-components/resolvers; import Icons from unplugin-icons/vite; import IconsResolver from unplugin-icons/resolver; import { readFileSync } from fs; import vue from vitejs/plugin-vue; import { createSvgIconsPlugin } from vite-plugin-svg-icons; export default defineConfig({ resolve: { alias: { : /src } }, server: { host: 0.0.0.0, port: 3000, // 热更新 hmr: true, open: true, proxy: { /api: { target: , changeOrigin: true, rewrite: (path) path.replace(new RegExp(^/api), ), }, } }, plugins: [ vue(), createSvgIconsPlugin({ // 指定需要缓存的图标文件夹 iconDirs: [path.resolve(process.cwd(), src/assets/svgIcons)], // 指定symbolId格式 symbolId: icon-[dir]-[name], }), AutoImport({ // 自动导入 Vue 相关函数如ref, reactive, toRef 等 imports: [vue, vueuse/core], eslintrc: { enabled: false, // true用于生成eslint配置,生成后改回false避免重复生成消耗 filepath: ./.eslintrc-auto-import.json, globalsPropValue: true }, resolvers: [ // 自动导入 Element Plus 相关函数如ElMessage, ElMessageBox... (带样式) ElementPlusResolver(), // 自动导入图标组件 IconsResolver({ prefix: Icon }) ], // 是否在vue模板中自动导入 vueTemplate: true, dts: path.resolve(pathSrc, types, auto-imports.d.ts) // 配置文件生成位置 }), Components({ resolvers: [ // 自动注册图标组件 IconsResolver({ enabledCollections: [ep] //iconify-json/ep 是 Element Plus 的图标库 }), // 自动导入 Element Plus 组件 ElementPlusResolver() ], dts: path.resolve(pathSrc, types, components.d.ts) // 配置文件生成位置 }), Icons({ // 自动安装图标库 autoInstall: true }), ], base: /, // 静态资源服务的文件夹 publicDir: public, build: { // 构建后是否生成 source map 文件 sourcemap: false, }, optimizeDeps: { include: [ vue, vue-router, pinia, vueuse/core, iconify/vue, axios, echarts, ] } })✅ 常用能力路径别名端口配置自动打开浏览器代理解决跨域后续章节会讲七、常见踩坑提醒新手必看问题解决方案启动时报 Node 版本错误升级 Node ≥ 18模板报 TS 错误安装 TypeScript Vue Plugin组件不热更新重启 Vite Dev Server引入 Vue 报错确认使用 Volar 而非 Vetur 下期预告第 03 篇解剖 Vue3 项目结构 —— main.ts、App.vue 与组件化思维