用数据说话：A-59U 语音模块降噪与回声消除性能实测
2026/6/16 4:34:50
📌 前言
在上一篇文章《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✅ 推荐安装方式：
nvm（Node Version Manager）
Windows 用户可用
nvm-windows
2️⃣ 包管理器选择
包管理器 | 特点 |
|---|---|
npm | 稳定、通用 |
yarn | 速度快、锁文件严格 |
pnpm（推荐） | 磁盘占用小、依赖结构清晰 |
✅ 安装 pnpm：
npm install -g pnpm二、为什么不用 Vue CLI，而用 Vite？
对比项 | Vue CLI | Vite |
|---|---|---|
底层打包 | Webpack | ESBuild + 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✅ 推荐选择：
Framework：Vue
Variant：TypeScript
是否加入 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 id="app"></div> <script type="module" 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 lang="ts"> import { ref } from 'vue' const msg = ref('Hello Vue3 + Vite') </script>✅ 这里已经使用了：
<script setup>TypeScript
Composition API
五、VS Code 必备插件推荐
插件名称 | 作用 |
|---|---|
Volar | Vue3 官方推荐（替代 Vetur） |
TypeScript Vue Plugin | TS 类型支持 |
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 与组件化思维