如何利用 `Vite` 的按需编译和 HMR 机制，实现一个极速开发的 Vue 项目模板？

各位靓仔靓女，晚上好！我是今晚的讲师，代号“代码搬运工”。今天咱们不谈情怀，不聊人生，就来实实在在地聊聊如何用 Vite 整出一个飞一般的 Vue 项目模板，让你开发效率嗖嗖的！

咱们的目标很明确：极速开发！ 也就是：

• 启动快: 告别漫长的等待，启动就跟闪电一样。
• 编译快: 修改代码，页面瞬间更新，告别卡顿。
• 开发爽: 结构清晰，配置简单，告别繁琐。

Vite 正是为此而生的！它利用浏览器的原生 ES Modules 和 HMR（热模块替换）机制，实现了按需编译和快速更新，简直是前端开发者的福音。

1. 准备工作：让 Node.js 和 npm/yarn/pnpm 成为你的左膀右臂

首先，你需要确保你的电脑上已经安装了 Node.js。没有它，就像英雄没有宝剑，巧妇难为无米之炊。建议安装最新稳定版（LTS）。

然后，你需要一个包管理器。npm、yarn、pnpm，随便你喜欢哪个，它们都是用来管理项目依赖的。pnpm 以其高效的磁盘空间利用率和速度，越来越受到大家的喜爱。

2. 初始化项目：用 Vite 搭建地基

有了工具，咱们就可以开始搭建项目了。Vite 提供了非常便捷的脚手架工具，让我们用它来创建一个 Vue 项目：

# 使用 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

这行命令会创建一个名为 my-vue-app 的文件夹，里面包含了一个基本的 Vue 项目结构。 --template vue 告诉 Vite 我们要创建一个 Vue 项目。 如果你想用 TypeScript，可以把 vue 换成 vue-ts。

进入项目目录，安装依赖：

cd my-vue-app

# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install

最后，启动项目：

# 使用 npm
npm run dev

# 使用 yarn
yarn dev

# 使用 pnpm
pnpm dev

打开浏览器，访问 http://localhost:3000（或者 Vite 提示的地址），你应该能看到一个欢迎页面。恭喜你，第一个 Vue 项目已经跑起来了！

3. 目录结构：清晰的骨架是成功的开始

一个好的项目结构，能让你的代码井井有条，方便维护和扩展。这是我的推荐结构（你可以根据自己的喜好调整）：

my-vue-app/
├── public/             # 静态资源，比如图片、字体等
├── src/                # 源代码目录
│   ├── assets/         # 静态资源，比如样式、图片等
│   ├── components/     # Vue 组件
│   ├── composables/    # 可复用的逻辑函数 (Vue 3 Composition API)
│   ├── layouts/        # 布局组件
│   ├── router/           # 路由配置
│   │   └── index.js    # 路由入口
│   ├── stores/         # 状态管理 (Pinia/Vuex)
│   │   └── index.js    # Store 入口
│   ├── styles/         # 全局样式
│   │   └── index.css   # 全局样式入口
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
│   └── vite-env.d.ts    # TypeScript 类型声明
├── .gitignore          # Git 忽略文件
├── index.html          # HTML 入口文件
├── package.json        # 项目配置文件
├── README.md           # 项目说明
└── vite.config.js      # Vite 配置文件

一些关键目录的解释：

• src/components: 存放你的 Vue 组件。这是你编写业务逻辑的主要地方。
• src/router: 负责管理你的应用路由。有了它，你才能在不同的页面之间跳转。
• src/stores: 如果你的应用比较复杂，需要管理全局状态，那么就需要状态管理工具，比如 Pinia 或者 Vuex。
• src/styles: 存放你的全局样式。你可以使用 CSS、SCSS、Less 等。
• vite.config.js: 这是 Vite 的配置文件。你可以在这里配置端口号、插件、别名等等。

4. 核心配置：让 Vite 飞起来

vite.config.js 是 Vite 的心脏，你可以在这里配置各种选项，让 Vite 更好地服务你的项目。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 8080, // 修改端口号
    proxy: {
      '/api': {  //代理配置
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

一些常用的配置项：

• plugins: Vite 的插件系统非常强大，你可以使用各种插件来扩展 Vite 的功能。比如 @vitejs/plugin-vue 是 Vue 的官方插件，用于支持 Vue 的单文件组件。
• resolve.alias: 配置别名，可以让你在代码中更方便地引用模块。比如上面的配置，你可以使用 @ 来代替 src 目录。
• server.port: 修改开发服务器的端口号。
• server.proxy: 配置代理服务器。如果你需要访问后端 API，可以使用这个配置来解决跨域问题。

重点来了：

• resolve.alias 是提高开发效率的关键。它允许你使用更短、更易读的路径来引用模块。比如，如果你想在组件中引用 src/components/MyComponent.vue，你可以直接写成 @/components/MyComponent.vue，而不是 ../../components/MyComponent.vue。

• server.proxy 可以让你在开发环境下轻松地访问后端 API，而不用担心跨域问题。这对于前后端分离的项目非常有用。

5. 集成常用库：打造你的专属工具箱

一个好的项目模板，应该集成了常用的库，让你开箱即用。以下是我推荐的一些库：

库	作用	安装命令
vue-router	路由管理	npm install vue-router@4 / yarn add vue-router@4 / pnpm add vue-router@4
pinia	状态管理	npm install pinia / yarn add pinia / pnpm add pinia
axios	HTTP 请求	npm install axios / yarn add axios / pnpm add axios
element-plus	UI 组件库 (或 Ant Design Vue, Vuetify)	npm install element-plus / yarn add element-plus / pnpm add element-plus
sass	CSS 预处理器	npm install sass / yarn add sass / pnpm add sass

集成示例：vue-router

1. 安装：

   npm install vue-router@4

2. 创建 src/router/index.js：

   import { createRouter, createWebHistory } from 'vue-router'
   import HomeView from '../components/HelloWorld.vue' // 假设的 Home 组件
   
   const routes = [
     {
       path: '/',
       name: 'home',
       component: HomeView
     },
     {
       path: '/about',
       name: 'about',
       // 懒加载路由
       component: () => import('../components/TheWelcome.vue')  // 假设的 About 组件
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   })
   
   export default router

3. 在 src/main.js 中引入：

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router' // 引入 router
   
   const app = createApp(App)
   
   app.use(router) // 使用 router
   
   app.mount('#app')

4. 在组件中使用：

   <template>
     <router-link to="/">Home</router-link>
     <router-link to="/about">About</router-link>
     <router-view></router-view>
   </template>

其他库的集成方式类似，都是先安装，然后引入，最后在你的代码中使用。

6. TypeScript 支持：让代码更健壮

如果你想让你的代码更健壮，更易于维护，那么 TypeScript 是一个不错的选择。Vite 对 TypeScript 提供了良好的支持。

1. 安装 TypeScript：

   npm install -D typescript @vue/tsconfig

2. 初始化 TypeScript：

   npx tsc --init

   这会生成一个 tsconfig.json 文件，你可以在这里配置 TypeScript 的选项。

3. 修改 vite.config.js：

   如果你是使用 vue-ts 模板创建的项目，这一步可以跳过。

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue()]
   })

4. 编写 TypeScript 代码：

   现在你可以使用 TypeScript 来编写你的 Vue 组件了。只需要把 .vue 文件的 <script> 标签加上 lang="ts" 属性即可。

   <template>
     <div>
       {{ message }}
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref } from 'vue'
   
   const message = ref<string>('Hello, TypeScript!')
   </script>

7. 高级技巧：让你的开发体验更上一层楼

• ESLint 和 Prettier： 代码规范是团队协作的基础。使用 ESLint 可以检查你的代码是否符合规范，使用 Prettier 可以自动格式化你的代码。

  npm install -D eslint prettier eslint-plugin-vue eslint-config-prettier

  配置 ESLint 和 Prettier 可以参考网上的教程，有很多现成的配置可以使用。

• 自动导入组件： 使用 unplugin-vue-components 插件可以自动导入组件，省去手动导入的麻烦。

  npm install -D unplugin-vue-components unplugin-auto-import

  在 vite.config.js 中配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import Components from 'unplugin-vue-components/vite'
  import AutoImport from 'unplugin-auto-import/vite'
  
  export default defineConfig({
    plugins: [
      vue(),
      Components({ /* options */ }),
      AutoImport({
        imports: [
          'vue',
          'vue-router'
        ],
        dts: 'src/auto-imports.d.ts'
      })
    ]
  })

• 环境变量： 在不同的环境下，你可能需要使用不同的配置。使用 Vite 的环境变量功能，可以轻松地实现这一点。

  在根目录下创建 .env 文件：

  VITE_API_URL=http://your-api-server.com

  在代码中使用：

  const apiUrl = import.meta.env.VITE_API_URL

8. 优化技巧：让项目更上一层楼

• 代码分割 (Code Splitting): Vite 默认支持代码分割，它会将你的代码分割成多个 chunk，只有在需要的时候才会加载。这可以减少初始加载时间，提高用户体验。
• 懒加载 (Lazy Loading): 对于一些非关键的组件，你可以使用懒加载，只有在用户需要的时候才会加载。这可以进一步减少初始加载时间。
• 图片优化: 使用 vite-plugin-imagemin 插件可以自动压缩图片，减少图片体积，提高加载速度。

9. 总结：打造你的专属 Vue 项目模板

好了，今天的讲座就到这里。我们学习了如何使用 Vite 搭建一个极速开发的 Vue 项目模板。从初始化项目、配置 Vite、集成常用库，到使用 TypeScript、ESLint、Prettier，我们一步步地打造了一个功能完善、开发效率高的 Vue 项目模板。

记住，这只是一个起点。你可以根据自己的需求，不断地完善和扩展你的模板，让它成为你专属的开发利器！

最后，祝大家编码愉快，bug 远离！ 下课！