在日常编写中发现不断的使用import太麻烦,每次使用组件都需要导入,应该如何解决呢
可以通过unplugin-auto-import插件来完成
主要功能
- 自动导入 Vue 组件: 例如
ref
,reactive
,computed
等。- 支持其他库: 可以配置来支持如 lodash, dayjs 等常用库的自动导入。
- 按需加载: 只导入实际使用的部分,减少打包体积。
如何使用??
以管理员运行HbuilderX
打开终端运行以下命令(需要确保已经安装了nodejs)
npm install unplugin-auto-import
在根目录创建文件夹并将以下代码复制进去 文件夹名称:vite.config.js
// 导入 Vite 的配置函数 import { defineConfig } from 'vite'; // 导入 UniApp 的 Vite 插件 import uni from '@dcloudio/vite-plugin-uni'; // 导入自动导入插件 import AutoImport from 'unplugin-auto-import/vite'; // 定义 Vite 配置 export default defineConfig({ plugins: [ // 使用 UniApp 插件 uni(), // 自动导入配置 AutoImport({ imports: [ // 预设导入库 'vue', // 自动导入 Vue 相关函数 'uni-app' // 自动导入 UniApp 相关函数 ] }) ] });
测试:不通过import导入ref,能够正常运行就是成功了