Install：npm i unplugin-auto-import
可以自动引入 不需要单独import
集成后需要配置vite.config.ts文件(其他配置请参照githup，下面例子只配置vue) TS需要配置dts路径，配置后会自动生成对应文件，目前插件预制自动导入的内容有
在一般vue项目中使用
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'],
dts:'src/auto-import.d.ts'
})
]
})
在uni项目中使用
非cli项目需手动在根目录下创建vite.config.js文件
dirs为自定义自动导入文件目录，如果你有一些想要实现自动导入的文件，在这里配置路径即可，但是需要注意的是：不要任何文件都自动导入 因为这样会丢失依赖链路，导致代码可读性降低，对于一些新加入项目或者不熟悉项目的人来说。非常不友好
import {
defineConfig
} from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
uni(),
AutoImport({
imports: ['vue', 'uni-app'],
dirs:[
'./common/api',
'./store'
]
})
],
})
使用效果：
<script setup lang="ts">
const val = ref('神奇吧！啥都不用引入')
</script>
<template>
<div class="flex-column">
测试自动引入import
<button @click="val = '神奇的改变了'">测试一下</button>
<div>{{val}}</div>
</div>
</template>
