在 Vue 中自动引入组件、路由、工具函数等

未使用前感觉没什么卵用，使用后真香感觉已经离不开了

一共包含三个工具库
unplugin-auto-import：自动引入工具库和 store，需自己配置引入路径，注意自动引入的变量不能直接在 Vue template 中使用，需要重新声明一次
unplugin-vue-router：自动引入路由，根据本地文件路径映射访问地址，默认的文件夹路径是 src/pages/** 可自己修改，definePage 可定义 meta 相关信息
unplugin-vue-components：自动引入第三方或自己封装组件，默认路径 src/components

代码实现

import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import VueDevTools from 'vite-plugin-vue-devtools';

import Unocss from 'unocss/vite';
import AutoImport from 'unplugin-auto-import/vite';
import VueRouter from 'unplugin-vue-router/vite';
import { VueRouterAutoImports } from 'unplugin-vue-router';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VueRouter({
      dts: 'src/types-auto/typed-router.d.ts'
    }),
    AutoImport({
      // 配置第三方库的自动引入
      imports: ['vue', VueRouterAutoImports],
      resolvers: [ElementPlusResolver()],
      // 可添加需要自动引入的文件路径
      dirs: ['src/stores', 'src/utils'],
      dts: 'src/types-auto/auto-imports.d.ts'
    }),
    Components({
      resolvers: [ElementPlusResolver()],
      dts: 'src/types-auto/components.d.ts'
      // 有些组件库官方未提供支持，可自己配置
      // resolvers: [
      //   name => {
      //     if (name === 'Icon') return { name: 'Icon', from: '@iconify/vue' };
      //   }
      // ]
    }),
    Unocss(),
    VueDevTools(),
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

json

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    // 增加一行配置
    "types": ["unplugin-vue-router/client"]
  }
}

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import '@unocss/reset/tailwind.css';
import 'uno.css';

import App from './App.vue';

import 'element-plus/theme-chalk/src/message.scss';

// 修改路由引入方式如下
import { createRouter, createWebHashHistory } from 'vue-router/auto';
const router = createRouter({
  history: createWebHashHistory()
});

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');

export const aaa = '11111111';

vue

<template>
  <div class="login">
    <HelloWord />
    <p>{{ aaa2 }}</p>
    coding
  </div>
</template>

<style lang="scss" scoped>
.login {
}
</style>

<script lang="ts" setup>
import type { ElTooltip } from 'element-plus';

definePage({
  alias: ['/register', '/forgot-password'],
  meta: { layout: 'empty' }
});

// 需要 element 组件的 ref 可以这么写
const tooltip = ref<InstanceType<typeof ElTooltip>>(null!);

// 自动引入的变量如果需要在 template 中使用，需要重新声明一次
const aaa2 = aaa;
const store = useStore();
const route = useRoute();
const router = useRouter();
</script>

TIP

在目前的版本下还是有一些小问题，比如文件重命名或删除后旧的定义未移除，建议定期删除生成的d.ts文件。

自动路由在修改文件名后会持续报错，此时需要重启服务才可恢复。

"unplugin-auto-import": "^0.17.5",

"unplugin-vue-components": "^0.26.0",

"unplugin-vue-router": "^0.8.4",

在 Vue 中自动引入组件、路由、工具函数等 ​

代码实现 ​

在 Vue 中自动引入组件、路由、工具函数等

代码实现