vue3+vite插件配置系列2-unplugin-auto-import

📝作用
解放双手，自动导入composition api 和 生成全局typescript说明

📝使用
🔖1.下载
npm i -D unplugin-auto-import

🔖2.vite.config.ts配置
import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
plugins: [
...
AutoImport ({
imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
dts: "src/auto-import.d.ts" // 生成 `auto-import.d.ts` 全局声明
})
]
})
🔖3.现在vue组件中可以直接使用composition api
before

<template>
<button @click="add">add</button>
<button @click="routerPush">go</button>
{{count}}
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const count = ref(0)
const router = useRouter()
function add() {
count.value++
}
function routerPush(){
router.push('a')
}
</script>

 

 

after

<template>
<button @click="add">add</button>
<button @click="routerPush">go</button>
{{count}}
</template>

<script lang="ts" setup>
const count = ref(0)
const router = useRouter()
function add() {
count.value++
}
function routerPush(){
router.push('a')
}
</script>