uniapp安装自动导入插件

 在日常编写中发现不断的使用import太麻烦,每次使用组件都需要导入,应该如何解决呢

uniapp安装自动导入插件_第1张图片

可以通过unplugin-auto-import插件来完成

主要功能

  1. 自动导入 Vue 组件: 例如 refreactivecomputed 等。
  2. 支持其他库: 可以配置来支持如 lodash, dayjs 等常用库的自动导入。
  3. 按需加载: 只导入实际使用的部分,减少打包体积。

如何使用??


以管理员运行HbuilderX

uniapp安装自动导入插件_第2张图片


打开终端运行以下命令(需要确保已经安装了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,能够正常运行就是成功了

uniapp安装自动导入插件_第3张图片

uniapp安装自动导入插件_第4张图片

你可能感兴趣的:(vue.js,javascript,ecmascript)