@frameui/vite-plugin-unplugin

一个基于 Vite 的 unplugin 集成插件，提供自动导入和 Vue 组件自动注册功能。

特性

• 🚀 基于 Vite 5.x/6.x
• 📝 完整的 TypeScript 支持
• 🔧 自动导入 Vue 相关 API
• 🎯 自动注册 Vue 组件
• 📦 模块化架构设计
• 🎨 灵活的配置选项

安装

npm install @frameui/vite-plugin-unplugin
# 或
yarn add @frameui/vite-plugin-unplugin
# 或
pnpm add @frameui/vite-plugin-unplugin

使用方法

基础配置

import { defineConfig } from 'vite'
import { unplugin } from '@frameui/vite-plugin-unplugin'

export default defineConfig({
  plugins: [
    unplugin({
      imports: [
        // 自定义导入配置
        'lodash-es',
        {
          'element-plus': [
            'ElButton',
            'ElInput',
          ],
        },
      ],
      resolvers: [
        // 自定义解析器
      ],
      dirs: [
        // 自定义目录
        'src/utils',
      ],
    }),
  ],
})

高级配置

import { defineConfig } from 'vite'
import { unplugin, createAutoImportPlugin, createComponentsPlugin } from '@frameui/vite-plugin-unplugin'

export default defineConfig({
  plugins: [
    // 使用主函数
    unplugin({
      imports: ['@vueuse/core'],
      dirs: ['src/composables'],
    }),

    // 或者分别创建插件
    createAutoImportPlugin({
      imports: ['vue-router'],
      dirs: ['src/hooks'],
    }),

    createComponentsPlugin({
      dirs: ['src/components'],
    }),
  ],
})

API

主函数

unplugin(options: UnpluginOptions): Plugin[]

创建包含 Auto Import 和 Vue Components 的插件数组。

插件创建函数

createAutoImportPlugin(options: UnpluginOptions): Plugin

创建自动导入插件。

createComponentsPlugin(options: UnpluginOptions): Plugin

创建 Vue 组件插件。

配置选项

UnpluginOptions

| 参数 | 说明 | 类型 | 默认值 | |------|------|------|--------| | imports | 自定义导入配置 | ImportConfig[] | [] | | resolvers | 自定义解析器配置 | ResolverConfig[] | [] | | dirs | 自定义目录配置 | string[] | [] |

默认配置

默认导入

• vue - Vue 3 API
• pinia - 状态管理
• vue-i18n - 国际化
• vue-router - 路由
• @vueuse/core - 组合式函数
• axios - HTTP 客户端

默认目录

• src/hooks - 组合式函数
• framework/components - 组件库
• src/plugins - 插件
• src/**/autoComponents - 自动组件

类型声明文件

• framework/build/unplugin/auto-imports.d.ts - 自动导入类型
• framework/build/unplugin/components.d.ts - 组件类型

开发

安装依赖

npm install

开发模式

npm run dev

构建

npm run build

类型检查

npm run type-check

许可证

MIT