如何利用 `Vite` 的按需编译和 HMR 机制，实现一个极速开发的 Vue 项目模板？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱不聊虚的，直接上干货，聊聊怎么用 Vite 这玩意儿，打造一个飞一般的 Vue 项目开发模板。保证你用了之后，写代码就像开了外挂一样，效率嗖嗖的！

开场白：Vite 是个啥？为啥要用它？

在座的各位，谁还没被 Webpack 那慢吞吞的编译速度折磨过？尤其是项目一大，改一行代码，等个半天才能看到效果，简直让人想砸电脑。 Vite 的出现，就是来拯救我们的！

简单来说，Vite 是一个基于原生 ES 模块的轻量级开发服务器。它利用浏览器原生支持 ES 模块的特性，实现了真正的按需编译。啥意思呢？就是说，它只编译你当前正在使用的代码，而不是像 Webpack 那样，一开始就把整个项目都打包一遍。这样一来，启动速度和热更新速度就快到飞起！

Vite 的两大杀手锏：按需编译 + HMR

按需编译（On-demand Compilation）： 传统打包工具（比如 Webpack）会在开发阶段就把整个项目打包一遍，这对于大型项目来说非常耗时。Vite 则不同，它只在浏览器真正请求某个模块时才进行编译。这意味着启动时，你几乎感觉不到任何延迟。
HMR (Hot Module Replacement)： 热模块替换，简单说就是你在修改代码后，浏览器不用刷新就能看到最新的效果。Vite 的 HMR 速度非常快，因为它只更新修改过的模块，而不是整个页面。

手把手教你搭建一个极速 Vue 项目模板

接下来，咱们一步一步地，从零开始搭建一个基于 Vite 的 Vue 项目模板。

第一步：初始化项目

打开你的终端，输入以下命令：

npm create vite my-vue-project --template vue
cd my-vue-project
npm install
npm run dev

这几行命令干了啥呢？

npm create vite my-vue-project --template vue: 使用 Vite 创建一个名为 my-vue-project 的项目，并选择 Vue 作为模板。
cd my-vue-project: 进入项目目录。
npm install: 安装项目依赖。
npm run dev: 启动开发服务器。

完成之后，打开你的浏览器，访问 http://localhost:5173/ (默认端口)，你应该能看到一个 Vue 的欢迎页面。

第二步：目录结构优化

一个清晰的目录结构，能让你的项目更容易维护。咱们来稍微调整一下默认的目录结构：

my-vue-project/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── style.css
├── .gitignore
├── index.html
├── package.json
├── README.md
├── vite.config.js
└── tsconfig.json (如果使用 TypeScript)

public/: 存放静态资源，比如图片、字体等。
src/: 存放源代码。
- assets/: 存放静态资源，比如图片、字体等 (通常是项目内部使用的资源)。
- components/: 存放 Vue 组件。
- App.vue: 根组件。
- main.js: 入口文件。
- style.css: 全局样式。

第三步：配置 vite.config.js

vite.config.js 是 Vite 的配置文件，你可以在这里配置各种选项，比如端口号、代理、插件等。

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 目录
    }
  },
  server: {
    port: 3000, // 修改端口号
    open: true, // 自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 代理目标地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '') // 重写路径
      }
    }
  }
})

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

引入了 vue 插件，用于支持 Vue 单文件组件。
配置了 @ 符号指向 src 目录，方便你 import 文件。
修改了端口号为 3000。
设置了自动打开浏览器。
配置了一个代理，将所有以 /api 开头的请求代理到 http://localhost:8080。

第四步：安装常用插件

为了提高开发效率，咱们可以安装一些常用的 Vue 插件。

Vue Router: 用于管理路由。
Pinia: 用于状态管理 (替代 Vuex)。
Axios: 用于发送 HTTP 请求。
Element Plus: UI 组件库。
Unocss: 原子化 CSS 引擎，更快更灵活。

npm install vue-router pinia axios element-plus @element-plus/icons-vue unocss

第五步：配置 Vue Router

创建一个 router 文件夹，并在其中创建一个 index.js 文件：

// 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

然后在 main.js 中引入并使用：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.mount('#app')

第六步：配置 Pinia

创建一个 store 文件夹，并在其中创建一个 index.js 文件：

// src/store/index.js
import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

然后在 main.js 中引入并使用：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'

const app = createApp(App)

app.use(router)
app.use(pinia)
app.mount('#app')

第七步：配置 Element Plus

在 main.js 中引入并使用：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

// 注册所有 Element Plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')

第八步：配置 Unocss

首先需要安装 vite-plugin-vue-jsx 来支持在 Vue 中使用 JSX 语法，因为 Unocss 在 Vue 中通常配合 JSX 使用。

npm install -D vite-plugin-vue-jsx

接着，修改 vite.config.js，引入 UnoCSS 插件：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 引入 vueJsx
import path from 'path'
import UnoCSS from 'unocss/vite' // 引入 Unocss

export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // 使用 vueJsx
    UnoCSS(), // 使用 Unocss
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

创建一个 uno.config.js 文件：

// uno.config.js
import { defineConfig } from 'unocss'
import presetUno from '@unocss/preset-uno'
import presetAttributify from '@unocss/preset-attributify'
import presetIcons from '@unocss/preset-icons'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(), // 启用 attributify 模式
    presetIcons({ // 启用图标预设
      scale: 1.2,
      warn: true,
    }),
  ],
  shortcuts: {
    'wh-full': 'w-full h-full',
    'flex-center': 'flex justify-center items-center',
    'flex-col-center': 'flex flex-col justify-center items-center',
    'transition-base': 'transition-all duration-200 ease-in-out',
  },
  theme: {
    colors: {
      primary: '#3498db',
      secondary: '#e74c3c',
    },
    fontSize: {
      sm: '12px',
      base: '14px',
      lg: '16px',
      xl: '18px',
    },
  },
})

然后在 main.js 中引入 Unocss：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import pinia from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import '@unocss/reset/tailwind.css' // 引入 Unocss 的 reset 样式
import 'uno.css' // 引入 Unocss

const app = createApp(App)

// 注册所有 Element Plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(router)
app.use(pinia)
app.use(ElementPlus)
app.mount('#app')

第九步：TypeScript 支持 (可选)

如果你喜欢用 TypeScript，可以按照以下步骤配置：

安装 TypeScript:
```
npm install -D typescript @vue/tsconfig
```

初始化 tsconfig.json:

npx tsc --init --target esnext --module esnext --moduleResolution node --esModuleInterop --resolveJsonModule --isolatedModules --allowJs --checkJs false --jsx preserve --baseUrl . --paths '{ "*": ["src/*"] }' --lib esnext,dom

修改 vite.config.js:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx' // 引入 vueJsx
import path from 'path'
import UnoCSS from 'unocss/vite' // 引入 Unocss

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(), // 使用 vueJsx
    UnoCSS(), // 使用 Unocss
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 配置 @ 符号指向 src 目录
    }
  },
  server: {
    port: 3000, // 修改端口号
    open: true, // 自动打开浏览器
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 代理目标地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '') // 重写路径
      }
    }
  }
})

将 .vue 文件和 .js 文件重命名为 .vue 文件和 .ts 文件。

总结：一个快速开发的 Vue 项目模板就完成了！

到这里，一个基于 Vite 的极速 Vue 项目模板就搭建完成了。总结一下我们都做了什么：

步骤	内容	目的
1	初始化项目	创建一个基本的 Vue 项目
2	目录结构优化	使项目结构更清晰，方便维护
3	配置 `vite.config.js`	配置开发服务器、代理等
4	安装常用插件 (Vue Router, Pinia, Axios, Element Plus, Unocss)	增强项目功能，提高开发效率
5	配置 Vue Router	管理路由
6	配置 Pinia	管理状态
7	配置 Element Plus	使用 UI 组件
8	配置 Unocss	原子化 CSS 引擎，更快更灵活
9	TypeScript 支持 (可选)	使用 TypeScript 进行开发

Vite 的优势总结

启动速度快： 利用原生 ES 模块的按需编译，启动速度几乎是秒开。
HMR 速度快： 只更新修改过的模块，而不是整个页面，HMR 速度非常快。
配置简单： 相比 Webpack，Vite 的配置更加简单易懂。
支持 TypeScript： 完美支持 TypeScript，让你写代码更加安全可靠。
丰富的插件生态： 拥有丰富的插件生态，满足各种需求。

结语

希望通过今天的分享，你能掌握 Vite 的基本使用方法，并用它来打造一个属于自己的极速 Vue 项目模板。相信我，用了 Vite 之后，你会爱上写代码的！祝大家早日摆脱打包慢的困扰，成为一名快乐的程序员！

发表回复 取消回复

发表回复取消回复