vue3使用unplugin-auto-import自动引入ref/reactive等

npm i unplugin-auto-import -D

配置文件vite.config.ts

import vue from '@vitejs/plugin-vue';
// 引入插件
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
    plugins: [
		vue(),
		AutoImport({
		  	imports:['vue','vue-router'],
		  	dts: 'src/auto-import.d.ts'    // 路径下自动生成文件夹存放全局指令,解决ts 报错
		})
	]
});

1. useRouter useRoute watch computed onMounted…都不用手动引入啦!!!

2. 可以在用 provide inject 用做全局变量, app.vue provide 一下.

vue-cli

改三个文件

装了这个包后面启动或者打包会自动生成下面这两个文件,这两个文件本来我是想git忽略的

vue.config.js

require('unplugin-auto-import/webpack')({
 imports: ['vue', 'vue-router'],
  eslintrc: {
    enabled: true, // 后面可以设置成false, false就不生成下面这个文件了
    filepath: './.eslintrc-auto-import.json', // 可不写
    globalsPropValue: true
  },
})

后来在公司遇到的坑, (服务器上打包总是失败), 本地测试也一样, 但是本地的话再次打包会成功, 不知道哪里出了问题, 后面把enabled设置成false,好了, 自己的demo没有复现这个问题…

参考

vue3自动引入插件…
vue-cli项目的vue3自动导入插件unplugin-auto-import

初始化 vite 项目, 比vue-cli简单多了…

defineProps<{ a: string }>()
defineEmites(['a', 'b'])
defineExpose({ a: a})
上面三个本来就不需要引入(但是eslint报错,就需要配置 如果还是报错可能是eslint-plugin-vue版本过低)