【vue3】使用unplugin-auto-import自动导入模块
模块化已经是现代 Web 开发必不可少的开发方式,频繁引入依赖包是一个常见的操作。但是,手动引入依赖包往往繁琐,尤其是当依赖包数量较多时,会显著降低开发效率。插件,可以帮助我们在项目中,自动导入常用的使用的第三方库的 API,就可以方便我们开发,提升开发效率。
·
序言
模块化已经是现代 Web 开发必不可少的开发方式,频繁引入依赖包是一个常见的操作。但是,手动引入依赖包往往繁琐,尤其是当依赖包数量较多时,会显著降低开发效率。
unplugin-auto-import
插件,可以帮助我们在项目中,自动导入常用的使用的第三方库的 API,就可以方便我们开发,提升开发效率。
安装
npm i -D unplugin-auto-import
配置
在vite.config.ts
中配置
plugins: [
vue(),
AutoImport({
// 可以自定义文件生成的位置,默认是根目录下,使用ts的建议放src目录下
dts: true,
imports: ['vue', 'vue-router'],
}),
],
配置完成,运行项目会在根目录生成auto-import.d.ts
文件
使用示例
// import { ref, nextTick } from 'vue'
// import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()
const menuKey = ref(1)
// 以上便可直接使用
优雅使用
如果项目中使用eslintrc
校验则需在vite.config.ts
中的AutoImport添加配置
eslintrc: {
enabled: true,
},
完整代码
AutoImport({
// 可以自定义文件生成的位置,默认是根目录下,使用ts的建议放src目录下
dts: true,
imports: ['vue', 'vue-router'],
}),
此外还需要eslintrc.js
中添加如下配置(观察根目录中有无生成eslintrc-auto-import.json):
extends: [
'./.eslintrc-auto-import.json',
],
至此便可使用unplugin-auto-import
来自动导入了。
更多推荐
已为社区贡献36条内容
所有评论(0)