vue3中unplugin-auto-import自动引入示例代码

npm i -D unplugin-auto-import

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
        plugins: [
            ......
            AutoImport({  
              imports: ['vue'],
              dts: 'src/auto-import.d.ts',
            })
        ]
}）

<script setup lang="ts">
  // 这里我们不用引入ref直接使用
  const msg = ref<string>('Hello Vue3')
</script>
 
<template>
  {{ msg }}
</template>
 
<style scoped lang="scss"></style>

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
			imports: ['vue', 'vue-router', 'pinia'],
			eslintrc: {
				enabled: false,
				filepath: './.eslintrc-auto-import.json',
				globalsPropValue: true,
			},
		})
	]
})

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts" // 此处引入该声明文件
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}