前端工程化：用 Vite + Vue3 搭建高效开发环境

1. 技术选型优势

• Vite：基于原生 ES 模块的构建工具，冷启动速度极快（通常 $<1$ 秒），支持按需编译。
• Vue3：组合式 API 提升代码复用性，响应式系统优化（Proxy 替代 defineProperty），体积减少约 $50%$。

2. 环境准备

确保满足以下基础环境：

# 验证 Node.js 版本（需 $ \geq 14.18.0 $）
node -v

# 验证包管理器（npm/yarn/pnpm）
npm -v

3. 项目初始化

# 使用 Vite 官方脚手架
npm create vite@latest my-project -- --template vue

# 安装依赖
cd my-project
npm install

4. 项目结构解析

├── public/                # 静态资源
├── src/
│   ├── assets/            # 模块化资源（图片/字体）
│   ├── components/        # 可复用组件
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件（Vue 初始化）
├── vite.config.js         # Vite 专属配置
└── package.json           # 依赖与脚本管理

5. 核心配置文件（vite.config.js）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8080,           // 自定义端口
    open: true             // 自动打开浏览器
  },
  build: {
    outDir: 'dist',        // 构建输出目录
    assetsInlineLimit: 4096 // 资源内联阈值（字节）
  }
})

6. 开发与构建命令

// package.json 脚本配置
"scripts": {
  "dev": "vite",          // 启动开发服务器（热更新）
  "build": "vite build",  // 生产环境构建（Tree-shaking 优化）
  "preview": "vite preview" // 本地预览构建结果
}

7. 工程化实践建议

• 组件自动导入：使用 unplugin-vue-components 消除手动 import
• 路由管理：集成 Vue Router 4，实现动态路由加载
• 状态管理：搭配 Pinia（轻量替代 Vuex）
• 代码规范：配置 ESLint + Prettier，强制统一编码风格

8. 性能优化示例

// vite.config.js 添加优化配置
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor' // 第三方依赖分包
          }
        }
      }
    }
  }
})

效率对比：与传统 Webpack 相比，Vite 在 HMR 更新时速度提升约 $10\times$，大型项目构建时间减少 $40% \sim 60%$。

通过以上步骤，可快速搭建具备现代前端工程化能力的开发环境，显著提升开发体验与交付效率。