Vue3自动引入插件-unplugin-auto-import
,不必再手动 import
。
自动导入 api 按需为 Vite, Webpack, Rspack, Rollup 和 esbuild 。支持TypeScript。由unplugin驱动。
插件安装:unplugin-auto-import
配置vite.config.ts
(配置完后需要重启项目才能生效):
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), AutoImport({imports: ['vue'],dts: 'src/auto-import.d.ts',})],// 通过配置变为全局通用样式css: {preprocessorOptions: {scss: {additionalData: '@import "./src/bem.scss";',},},}
})
重启项目后发现在src
下出现一个suto-import.s.ts
文件。
最后,举例验证插件作用
App.vue
<template><div><button @click="flag = !flag">change flag</button><div>{{ flag }}</div></div>
</template><script setup lang="ts">
let flag = ref<boolean>(false)
</script><style scoped></style>