Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

winjs-dev/winjs-plugin-antdv

Open more actions menu

Repository files navigation

winjs-plugin-antdv

适配 WinJS 的 Ant Design Vue 插件,提供 Ant Design Vue 组件库的自动导入和样式配置。

npm version license downloads

功能特性

  • 🚀 自动导入组件 - 无需手动导入,直接使用 Ant Design Vue 组件
  • 🎨 自动导入样式 - 自动处理样式文件的导入
  • 📦 版本兼容 - 支持 Ant Design Vue >= 2.2.0-beta.6 版本
  • 🔧 智能检测 - 自动检测项目中的依赖版本
  • 按需加载 - 只导入使用的组件,减小打包体积

安装

npm install @winner-fed/plugin-antdv

配置

在 WinJS 项目中启用插件:

// win.config.ts
import { defineConfig } from '@winner-fed/winjs';

export default defineConfig({
  plugins: [
    '@winner-fed/plugin-antdv'
  ],
  // 可选:插件配置
  antdv: {
    // 插件配置选项
  }
});

使用示例

基本使用

安装并配置插件后,可以在 Vue 组件中直接使用 Ant Design Vue 组件:

<template>
  <div>
    <a-button type="primary">主要按钮</a-button>
    <a-button>默认按钮</a-button>
    <a-divider />
    <a-input placeholder="请输入内容" />
    <a-space>
      <a-tag color="blue">标签</a-tag>
      <a-tag color="green">标签</a-tag>
    </a-space>
  </div>
</template>

<script setup lang="ts">
// 无需手动导入组件,插件会自动处理
// import { Button, Input, Tag } from 'ant-design-vue';
</script>

支持的组件

插件支持所有 Ant Design Vue 组件,包括但不限于:

  • 通用组件:Button、Icon、Typography
  • 布局组件:Divider、Grid、Layout、Space
  • 导航组件:Affix、Breadcrumb、Dropdown、Menu、Pagination、Steps
  • 数据录入:AutoComplete、Cascader、Checkbox、DatePicker、Form、Input、InputNumber、Mentions、Radio、Rate、Select、Slider、Switch、TimePicker、Transfer、TreeSelect、Upload
  • 数据展示:Avatar、Badge、Calendar、Card、Carousel、Collapse、Comment、Descriptions、Empty、Image、List、Popover、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tree
  • 反馈组件:Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin
  • 其他组件:Anchor、BackTop、ConfigProvider、LocaleProvider

依赖要求

  • ant-design-vue: ^2.2.0-beta.6
  • vue: ^3.0.0

版本兼容性

插件版本 Ant Design Vue 版本 Vue 版本
^1.0.0 ^2.2.0-beta.6 ^3.0.0

工作原理

  1. 依赖检测:插件会自动检测项目中的 ant-design-vue 依赖
  2. 版本判断:根据检测到的版本自动配置不同的导入策略
  3. 解析器配置:集成 unplugin-vue-componentsAntDesignVueResolver
  4. 自动导入:在构建时自动添加组件导入语句和样式导入

注意事项

  • 确保项目中已安装 ant-design-vue 依赖
  • 插件会自动处理样式导入,无需手动导入样式文件
  • 支持 TypeScript,提供完整的类型支持

许可证

MIT.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.