1. Vue3 初识：为什么选择它？
Vue3 作为当前最热门的前端框架之一，在 2020 年 9 月正式发布后迅速获得了开发者的青睐。相比 Vue2，它在性能、开发体验和可维护性方面都有显著提升。我使用 Vue3 开发过多个中大型项目后，发现其 Composition API 的设计让代码组织变得更加灵活，特别是对于复杂业务逻辑的处理。
提示：Vue3 完全兼容 Vue2 的 Options API，老项目可以逐步迁移，不必担心兼容性问题。
从技术指标来看，Vue3 的打包体积减少了 41%，初始渲染速度快了 55%，更新性能提升了 133%。这些提升主要来自：
- 全新的响应式系统（基于 Proxy）
- 编译器优化（静态树提升、补丁标记等）
- 更好的 Tree-shaking 支持
2. 环境搭建全攻略
2.1 Node.js 环境准备
Vue3 开发需要 Node.js 作为基础运行环境。推荐安装最新的 LTS 版本（目前是 18.x）：
# 检查Node版本 node -v # 检查npm版本 npm -v如果版本过旧，建议使用 nvm（Mac/Linux）或 nvm-windows 进行版本管理：
# 安装指定版本 nvm install 18.16.0 # 使用特定版本 nvm use 18.16.02.2 包管理工具选择
除了传统的 npm，现代前端项目更推荐使用：
- yarn：Facebook 推出的替代方案，安装速度快且依赖管理更稳定
- pnpm：采用硬链接机制，显著节省磁盘空间
安装 yarn：
npm install -g yarn安装 pnpm：
npm install -g pnpm2.3 创建Vue3项目
官方推荐使用 Vite 作为构建工具，相比传统 webpack 速度提升显著：
# 使用npm npm create vite@latest my-vue-app --template vue # 使用yarn yarn create vite my-vue-app --template vue # 使用pnpm pnpm create vite my-vue-app --template vue创建完成后，进入项目目录安装依赖：
cd my-vue-app npm install # 或 yarn / pnpm install项目结构说明：
my-vue-app/ ├── public/ # 静态资源 ├── src/ │ ├── assets/ # 图片等资源 │ ├── components/ # 组件 │ ├── App.vue # 根组件 │ └── main.js # 应用入口 ├── index.html # 页面模板 └── vite.config.js # Vite配置3. 开发工具配置
3.1 IDE 推荐与插件
VS Code+ 必备插件：
- Volar（官方推荐的Vue语言支持）
- Vue VSCode Snippets
- ESLint
- Prettier - Code formatter
浏览器插件：
- Vue.js devtools 6.0+（支持Vue3）
3.2 代码规范配置
推荐在项目中添加这些配置：
.eslintrc.js：
module.exports = { root: true, env: { node: true, }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint', ], parserOptions: { ecmaVersion: 2020, }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/multi-word-component-names': 'off', }, }prettier.config.js：
module.exports = { semi: false, singleQuote: true, printWidth: 100, trailingComma: 'all', arrowParens: 'always', }4. 项目启动与调试
4.1 开发服务器
使用 Vite 的开发服务器启动项目：
npm run dev默认会启动在http://localhost:5173。相比 webpack-dev-server，Vite 的冷启动速度通常在 500ms 以内。
4.2 常用脚本说明
package.json中的核心脚本：
{ "scripts": { "dev": "vite", // 开发模式 "build": "vite build", // 生产构建 "preview": "vite preview" // 预览生产构建 } }4.3 环境变量配置
Vite 使用.env文件管理环境变量：
.env：所有环境共用.env.development：开发环境.env.production：生产环境
示例内容：
VITE_API_BASE=http://localhost:3000/api VITE_APP_TITLE=My Vue App在代码中通过import.meta.env.VITE_API_BASE访问。
5. 常见问题解决
5.1 依赖安装问题
问题：安装某些依赖时报错（如 sass）
解决方案：
# 对于sass问题 npm install -D sass # 清除缓存后重试 npm cache clean --force5.2 端口冲突
问题：端口 5173 被占用
解决方案：
- 修改
vite.config.js：
export default defineConfig({ server: { port: 3000 // 改为其他端口 } })- 或者终止占用端口的进程：
# Mac/Linux lsof -i :5173 kill -9 <PID> # Windows netstat -ano | findstr :5173 taskkill /PID <PID> /F5.3 浏览器兼容性
Vue3 默认支持现代浏览器。如果需要兼容 IE11：
- 安装
@vitejs/plugin-legacy - 配置
vite.config.js：
import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ legacy({ targets: ['defaults', 'not IE 11'], }), ], })6. 进阶配置建议
6.1 路径别名配置
在vite.config.js中添加：
import path from 'path' export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), '~assets': path.resolve(__dirname, './src/assets'), }, }, })配合jsconfig.json或tsconfig.json实现编辑器智能提示：
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "~assets/*": ["src/assets/*"] } } }6.2 代理配置
解决开发环境跨域问题：
export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ''), }, }, }, })6.3 全局样式处理
- 创建
src/styles/main.scss - 在
vite.config.js中配置：
export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: `@import "src/styles/main.scss";`, }, }, }, })7. 项目结构优化建议
对于中大型项目，推荐采用功能模块化的结构：
src/ ├── api/ # API请求 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── composables/ # 组合式函数 ├── router/ # 路由配置 ├── stores/ # 状态管理 ├── styles/ # 全局样式 ├── utils/ # 工具函数 ├── views/ # 页面组件 ├── App.vue └── main.js这种结构的特点：
- 按功能而非文件类型组织
- 易于扩展和维护
- 适合团队协作开发
8. 下一步学习建议
掌握基础环境搭建后，可以继续深入学习：
- 单文件组件(SFC)的编写规范
- Composition API 的核心用法
- Vue Router 4 的路由配置
- Pinia 状态管理
- 组件通信的多种方式
- 自定义指令和插件开发
我在实际项目中发现，良好的项目结构和规范的配置能节省至少 30% 的后期维护成本。特别是在团队协作中，统一的编码风格和项目约定非常重要。建议在项目初期就建立好这些基础配置，而不是等到问题出现后再补救。
