|
1 | | -# winjs-plugin-example |
| 1 | +# winjs-plugin-antdv |
2 | 2 |
|
3 | | -Example plugin for WinJS. |
| 3 | +适配 WinJS 的 Ant Design Vue 插件,提供 Ant Design Vue 组件库的自动导入和样式配置。 |
4 | 4 |
|
5 | 5 | <p> |
6 | | - <a href="https://npmjs.com/package/winjs-plugin-example"> |
7 | | - <img src="https://img.shields.io/npm/v/winjs-plugin-example?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" /> |
| 6 | + <a href="https://npmjs.com/package/@winner-fed/plugin-antdv"> |
| 7 | + <img src="https://img.shields.io/npm/v/@winner-fed/plugin-antdv?style=flat-square&colorA=564341&colorB=EDED91" alt="npm version" /> |
8 | 8 | </a> |
9 | 9 | <img src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="license" /> |
10 | | - <a href="https://npmcharts.com/compare/winjs-plugin-example?minimal=true"><img src="https://img.shields.io/npm/dm/winjs-plugin-example.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a> |
| 10 | + <a href="https://npmcharts.com/compare/@winner-fed/plugin-antdv?minimal=true"><img src="https://img.shields.io/npm/dm/@winner-fed/plugin-antdv.svg?style=flat-square&colorA=564341&colorB=EDED91" alt="downloads" /></a> |
11 | 11 | </p> |
12 | 12 |
|
13 | | -## Usage |
| 13 | +## 功能特性 |
14 | 14 |
|
15 | | -Install: |
| 15 | +- 🚀 **自动导入组件** - 无需手动导入,直接使用 Ant Design Vue 组件 |
| 16 | +- 🎨 **自动导入样式** - 自动处理样式文件的导入 |
| 17 | +- 📦 **版本兼容** - 支持 Ant Design Vue 1.x 和 4.x 版本 |
| 18 | +- 🔧 **智能检测** - 自动检测项目中的依赖版本 |
| 19 | +- ⚡ **按需加载** - 只导入使用的组件,减小打包体积 |
| 20 | + |
| 21 | +## 安装 |
16 | 22 |
|
17 | 23 | ```bash |
18 | | -npm add winjs-plugin-example -D |
| 24 | +npm install @winner-fed/plugin-antdv |
19 | 25 | ``` |
20 | 26 |
|
21 | | -Add plugin to your `.winrc.ts`: |
| 27 | +## 配置 |
| 28 | + |
| 29 | +在 WinJS 项目中启用插件: |
22 | 30 |
|
23 | | -```ts |
24 | | -// .winrc.ts |
25 | | -export default { |
26 | | - plugins: ['winjs-plugin-example'], |
27 | | - // 开启配置 |
28 | | - example: {} |
29 | | -}; |
| 31 | +```typescript |
| 32 | +// win.config.ts |
| 33 | +import { defineConfig } from '@winner-fed/winjs'; |
| 34 | + |
| 35 | +export default defineConfig({ |
| 36 | + plugins: [ |
| 37 | + '@winner-fed/plugin-antdv' |
| 38 | + ], |
| 39 | + // 可选:插件配置 |
| 40 | + antdv: { |
| 41 | + // 插件配置选项 |
| 42 | + } |
| 43 | +}); |
30 | 44 | ``` |
31 | 45 |
|
32 | | -## Options |
| 46 | +## 使用示例 |
33 | 47 |
|
34 | | -### foo |
| 48 | +### 基本使用 |
35 | 49 |
|
36 | | -Some description. |
| 50 | +安装并配置插件后,可以在 Vue 组件中直接使用 Ant Design Vue 组件: |
37 | 51 |
|
38 | | -- Type: `string` |
39 | | -- Default: `undefined` |
40 | | -- Example: |
| 52 | +```vue |
| 53 | +<template> |
| 54 | + <div> |
| 55 | + <a-button type="primary">主要按钮</a-button> |
| 56 | + <a-button>默认按钮</a-button> |
| 57 | + <a-divider /> |
| 58 | + <a-input placeholder="请输入内容" /> |
| 59 | + <a-space> |
| 60 | + <a-tag color="blue">标签</a-tag> |
| 61 | + <a-tag color="green">标签</a-tag> |
| 62 | + </a-space> |
| 63 | + </div> |
| 64 | +</template> |
41 | 65 |
|
42 | | -```js |
43 | | -export default { |
44 | | - plugins: ['winjs-plugin-example'], |
45 | | - // 开启配置 |
46 | | - example: { |
47 | | - foo: 'bar' |
48 | | - } |
49 | | -}; |
| 66 | +<script setup lang="ts"> |
| 67 | +// 无需手动导入组件,插件会自动处理 |
| 68 | +// import { Button, Input, Tag } from 'ant-design-vue'; |
| 69 | +</script> |
50 | 70 | ``` |
51 | 71 |
|
52 | | -## License |
| 72 | +### 支持的组件 |
| 73 | + |
| 74 | +插件支持所有 Ant Design Vue 组件,包括但不限于: |
| 75 | + |
| 76 | +- **通用组件**:Button、Icon、Typography |
| 77 | +- **布局组件**:Divider、Grid、Layout、Space |
| 78 | +- **导航组件**:Affix、Breadcrumb、Dropdown、Menu、Pagination、Steps |
| 79 | +- **数据录入**:AutoComplete、Cascader、Checkbox、DatePicker、Form、Input、InputNumber、Mentions、Radio、Rate、Select、Slider、Switch、TimePicker、Transfer、TreeSelect、Upload |
| 80 | +- **数据展示**:Avatar、Badge、Calendar、Card、Carousel、Collapse、Comment、Descriptions、Empty、Image、List、Popover、Statistic、Table、Tabs、Tag、Timeline、Tooltip、Tree |
| 81 | +- **反馈组件**:Alert、Drawer、Message、Modal、Notification、Popconfirm、Progress、Result、Skeleton、Spin |
| 82 | +- **其他组件**:Anchor、BackTop、ConfigProvider、LocaleProvider |
| 83 | + |
| 84 | +## 依赖要求 |
| 85 | + |
| 86 | +- `ant-design-vue`: ^4.0.0 |
| 87 | +- `vue`: ^3.0.0 |
| 88 | + |
| 89 | +## 版本兼容性 |
| 90 | + |
| 91 | +| 插件版本 | Ant Design Vue 版本 | Vue 版本 | |
| 92 | +|---------|-------------------|----------| |
| 93 | +| ^1.0.0 | ^4.0.0 | ^3.0.0 | |
| 94 | +| ^1.0.0 | ^1.x | ^2.0.0 | |
| 95 | + |
| 96 | +## 工作原理 |
| 97 | + |
| 98 | +1. **依赖检测**:插件会自动检测项目中的 `ant-design-vue` 依赖 |
| 99 | +2. **版本判断**:根据检测到的版本自动配置不同的导入策略 |
| 100 | +3. **解析器配置**:集成 `unplugin-vue-components` 的 `AntDesignVueResolver` |
| 101 | +4. **自动导入**:在构建时自动添加组件导入语句和样式导入 |
| 102 | + |
| 103 | +## 注意事项 |
| 104 | + |
| 105 | +- 确保项目中已安装 `ant-design-vue` 依赖 |
| 106 | +- 插件会自动处理样式导入,无需手动导入样式文件 |
| 107 | +- 支持 TypeScript,提供完整的类型支持 |
| 108 | + |
| 109 | +## 许可证 |
53 | 110 |
|
54 | 111 | [MIT](./LICENSE). |
0 commit comments