开发提效

自动导入

unplugin-auto-import

unplugin-auto-import 会按需自动导入 Vite、Webpack、Rspack、Rollup 和 esbuild 的 API。支持 TypeScript。

例如：vite 项目中自动导入 vue 函数：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      dts: true,
      imports: ['vue'],
    }),
  ],
})

更好的 TypeScript 开发体验

若使用 TypeScript，还需要在 tsconfig.json 的 include 配置中添加 auto-imports.d.ts。

{
  // ...
  "include": [
    // ...
    "auto-imports.d.ts"
  ],
  // ...
}

vue

vite-plugin-vue-devtools

vite-plugin-vue-devtools 可提升 vue 开发体验。

unplugin-vue-components

unplugin-vue-components 会按需自动导入 Vue 组件。

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  Components({
    dts: true,
    dirs: ['src/components'],
    extensions: ['vue'],
    deep: true,
    types: [
      {
        from: 'vue-router',
        names: ['RouterLink', 'RouterView'],
      },
    ],
  }),
})

更好的 TypeScript 开发体验

若使用 TypeScript，还需要在 tsconfig.json 的 include 配置中添加 components.d.ts。

{
  // ...
  "include": [
    // ...
    "components.d.ts"
  ],
  // ...
}

unplugin-vue-router

1. 安装

   npm install unplugin-vue-router -D

2. 配置 vite.config.ts

   import { defineConfig } from 'vite'
   import Vue from '@vitejs/plugin-vue'
   import VueRouter from 'unplugin-vue-router/vite'
   
   export default defineConfig({
     plugins: [
       VueRouter({
         routesFolder: 'src/pages', // 路由文件夹
         dts: 'typed-router.d.ts', // 生成类型定义
       }),
       // vue() 必须在 Vuerouter() 之后放置
       Vue(),
     ],
   })

3. TypeScript 配置：

   tsconfig.json

   {
     // ..
     "include": [
       // ...
       "typed-router.d.ts"
     ]
   }

   env.d.ts

   // ...
   /// <reference types="unplugin-vue-router/client" />

4. 修改路由配置

   import { createRouter, createWebHistory } from 'vue-router'
   import { routes } from 'vue-router/auto-routes'
   
   const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes, // 自动生成路由
   })
   
   export default router

5. 后续将路由组件定义在 pages 目录而不是 views 中。