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

各位靓仔靓女，晚上好！我是你们的老朋友，今晚咱们聊聊怎么用 Vite 这把梭子，织一个飞快的 Vue 项目模板出来，让开发体验嗖嗖地起飞！

开场白：告别蜗牛，拥抱闪电

话说当年，用 Webpack 搞 Vue 项目，那叫一个慢啊！改个样式，等半天才能看到效果，简直让人怀疑人生。后来，Vite 带着它的按需编译和 HMR（Hot Module Replacement，热模块替换）机制横空出世，就像一道闪电劈开了混沌，让前端开发速度提升了不止一个数量级。

Vite 的核心优势：为什么它这么快？

要理解 Vite 为什么快，得先明白它跟 Webpack 的区别。Webpack 就像一个辛勤的老农，不管你需不需要，先把所有东西都打包好，再慢悠悠地端给你。而 Vite 就像一个快餐店，你点什么，它才做什么，而且做完直接给你，热气腾腾的。

• 按需编译: Vite 在开发阶段，不会预先打包整个应用。只有在浏览器真正请求某个模块时，Vite 才会对这个模块进行编译。这意味着启动速度非常快，而且只编译你正在使用的代码。
• 原生 ES 模块支持: Vite 利用浏览器原生支持 ES 模块的特性，无需像 Webpack 那样将所有模块打包成一个或几个 bundle。浏览器直接加载 ES 模块，效率更高。
• HMR（热模块替换）: 当你修改代码时，Vite 只会替换发生改变的模块，而不是重新加载整个页面。这让你可以立即看到修改效果，大大提高开发效率。

手把手搭建极速 Vue 项目模板

接下来，咱们撸起袖子，一步步搭建一个基于 Vite 的极速 Vue 项目模板。

第一步：初始化项目

首先，确保你安装了 Node.js (>=16.0.0) 和 npm/yarn/pnpm。然后，打开你的终端，输入以下命令：

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install

这几行命令会做以下事情：

1. npm create vite@latest my-vue-app --template vue: 使用 Vite 创建一个名为 my-vue-app 的 Vue 项目，--template vue 指定使用 Vue 模板。
2. cd my-vue-app: 进入项目目录。
3. npm install: 安装项目依赖。

第二步：目录结构

创建好的项目目录结构大概是这样的：

my-vue-app/
├── .gitignore
├── index.html          # HTML 入口文件
├── package.json        # 项目配置文件
├── public/             # 静态资源目录
│   └── vite.svg
├── src/                # 源代码目录
│   ├── App.vue         # 根组件
│   ├── assets/         # 静态资源（图片、样式等）
│   │   └── vue.svg
│   ├── components/     # 组件目录
│   ├── main.js         # 入口文件
│   └── style.css       # 全局样式
├── vite.config.js      # Vite 配置文件

第三步：运行项目

在终端中输入以下命令：

npm run dev

Vite 会启动一个开发服务器，并在浏览器中打开你的应用。现在，你就可以开始修改代码，体验 Vite 的极速 HMR 了！

第四步：配置 Vite (vite.config.js)

vite.config.js 是 Vite 的核心配置文件。在这里，你可以配置各种选项，例如端口号、别名、插件等。

一个简单的 vite.config.js 可能是这样的：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置 `@` 指向 `src` 目录
      'components': path.resolve(__dirname, 'src/components'), // 设置 `components` 指向 `src/components`
    }
  },
  server: {
    port: 3000, // 设置开发服务器端口
    open: true, // 自动在浏览器中打开应用
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端 API 地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '') // 重写路径
      }
    }
  }
})

这个配置文件做了以下事情：

• 引入了 vue 插件，用于支持 Vue 单文件组件。
• 配置了 resolve.alias，设置了 @ 和 components 别名，方便在代码中引用模块。
• 配置了 server 选项，设置了开发服务器的端口号、自动打开浏览器，以及代理配置。

第五步：集成常用的库

一个好的项目模板，应该集成一些常用的库，例如：

• Vue Router: 用于管理路由。
• Pinia/Vuex: 用于状态管理。
• Axios/Fetch: 用于发起 HTTP 请求。
• Element Plus/Ant Design Vue/Naive UI: UI 组件库。

下面以集成 Vue Router 为例，演示如何将一个库添加到项目中。

1. 安装 Vue Router:

   npm install vue-router@4

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

   import { createRouter, createWebHistory } from 'vue-router'
   import HomeView from '../views/HomeView.vue'
   
   const routes = [
     {
       path: '/',
       name: 'home',
       component: HomeView
     },
     {
       path: '/about',
       name: 'about',
       // route level code-splitting
       // this generates a separate chunk (about.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () => import('../views/AboutView.vue')
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   })
   
   export default router

3. 在 src/main.js 中引入并使用 Vue Router:

   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. 在 App.vue 中使用 router-link 和 router-view:

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

第六步：优化开发体验

为了进一步提升开发体验，可以做以下优化：

• 自动导入组件: 使用 vite-plugin-components 插件可以实现自动导入组件，无需手动导入。
• 自动导入 API: 使用 unplugin-auto-import 插件可以实现自动导入 Vue 的 API，例如 ref、reactive 等。
• ESLint + Prettier: 使用 ESLint 和 Prettier 可以规范代码风格，提高代码质量。
• Husky + Commitlint: 使用 Husky 和 Commitlint 可以强制执行代码规范，确保提交的代码符合规范。

代码示例：自动导入组件

1. 安装 vite-plugin-components:

   npm install vite-plugin-components -D

2. 在 vite.config.js 中配置插件：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import Components from 'vite-plugin-components'
   
   export default defineConfig({
     plugins: [
       vue(),
       Components({
         dirs: ['src/components'], // 组件目录
         extensions: ['vue'], // 组件文件扩展名
         dts: true, // 生成 TypeScript 类型声明文件
       })
     ]
   })

3. 现在，你就可以在组件中直接使用 src/components 目录下的组件，无需手动导入了。

代码示例：自动导入 API

1. 安装 unplugin-auto-import:

   npm install unplugin-auto-import -D

2. 在 vite.config.js 中配置插件：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import AutoImport from 'unplugin-auto-import/vite'
   
   export default defineConfig({
     plugins: [
       vue(),
       AutoImport({
         imports: ['vue'], // 自动导入 Vue 的 API
         dts: true, // 生成 TypeScript 类型声明文件
       })
     ]
   })

3. 现在，你就可以在组件中直接使用 ref、reactive 等 Vue 的 API，无需手动导入了。

项目模板示例 (package.json)

{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "vite": "^4.1.4",
    "vite-plugin-components": "^0.13.3",
    "unplugin-auto-import": "^0.5.11"
  }
}

表格总结：Vite 优势与注意事项

特性	优势	注意事项
启动速度	极快，秒级启动	首次冷启动比 Webpack 快得多，但大型项目的热更新速度会受到组件复杂度的影响。
HMR	极速热模块替换，修改代码后立即生效	对于大型项目，HMR 可能会稍微慢一些。
按需编译	只编译当前需要的模块，无需打包整个应用	对于一些特殊的模块，可能需要手动配置才能正确编译。
配置简单	相对 Webpack 来说，配置更加简洁易懂	虽然配置简单，但要深入了解 Vite 的原理，才能更好地进行优化。
插件生态	插件生态丰富，可以满足各种需求	选择合适的插件非常重要，不合适的插件可能会影响性能。
原生 ESM 支持	利用浏览器原生支持 ES 模块的特性，效率更高	需要注意浏览器兼容性问题，对于一些旧版本的浏览器，可能需要进行 Polyfill。

结束语：让开发成为一种享受

好了，今天的讲座就到这里。希望通过今天的讲解，你能掌握使用 Vite 搭建极速 Vue 项目模板的技巧，让开发成为一种享受，而不是一种煎熬。记住，工具只是工具，关键在于理解其原理，并灵活运用。祝大家编码愉快，早日成为前端大神！