Vue3自动导入常用api

unplugin-auto-import让API自动导入

比如

1. 可以让vueAPI里面的ref,reactive,watch,watchEffect等等api直接写在setup内，
2. 可以让vue-router中的createRouter，createWebHashHistory，createWebHistory，useRoute，useRouter等API直接写在setup内
3. 也可以让pinia中的createPinia,definStore直接写在setup内，都不需要再import导入了

安装

npm i unplugin-auto-import -D
or
yarn add unplugin-auto-import -D

配置vite.config.js

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(),
        // 自动引入vue的api
        AutoImport({
            // 后续vue/vue-router/pinia的API都不需要再单独import到setup里面了
            imports: ['vue', 'vue-router', 'pinia'],
            //dts: 'src/auto-imports...', // 可以自定义文件生成的位置与是否生成，默认是根目录下
            dts: false,
        }),
    ],
})

使用

<script lang="ts" setup>
// onmounted属于vue的api不需要单独引入了
// import { onMounted } from 'vue'

onMounted(() => {
  console.log('unplugin-auto-import')
})
</script>

https://blog.csdn.net/SunFlower914/article/details/126579209