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 报错
})
]
});
-
useRouter useRoute watch computed onMounted…都不用手动引入啦!!!
-
可以在用 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版本过低)