Showing
2 changed files
with
156 additions
and
20 deletions
@@ -2,21 +2,68 @@ | @@ -2,21 +2,68 @@ | ||
2 | * Introduces component library styles on demand. | 2 | * Introduces component library styles on demand. |
3 | * https://github.com/anncwb/vite-plugin-style-import | 3 | * https://github.com/anncwb/vite-plugin-style-import |
4 | */ | 4 | */ |
5 | + import styleImport from 'vite-plugin-style-import'; | ||
5 | 6 | ||
6 | -import styleImport from 'vite-plugin-style-import'; | ||
7 | - | ||
8 | -export function configStyleImportPlugin(isBuild: boolean) { | ||
9 | - if (!isBuild) return []; | ||
10 | - const styleImportPlugin = styleImport({ | ||
11 | - libs: [ | ||
12 | - { | ||
13 | - libraryName: 'ant-design-vue', | ||
14 | - esModule: true, | ||
15 | - resolveStyle: (name) => { | ||
16 | - return `ant-design-vue/es/${name}/style/index`; | ||
17 | - }, | ||
18 | - }, | ||
19 | - ], | ||
20 | - }); | ||
21 | - return styleImportPlugin; | ||
22 | -} | 7 | + export function configStyleImportPlugin(isBuild: boolean) { |
8 | + if (!isBuild) { | ||
9 | + return []; | ||
10 | + } | ||
11 | + const styleImportPlugin = styleImport({ | ||
12 | + libs: [ | ||
13 | + { | ||
14 | + libraryName: 'ant-design-vue', | ||
15 | + esModule: true, | ||
16 | + resolveStyle: (name) => { | ||
17 | + // 这里是“子组件”列表,无需额外引入样式文件 | ||
18 | + const ignoreList = [ | ||
19 | + 'typography-text', | ||
20 | + 'typography-title', | ||
21 | + 'typography-paragraph', | ||
22 | + 'typography-link', | ||
23 | + 'anchor-link', | ||
24 | + 'sub-menu', | ||
25 | + 'menu-item', | ||
26 | + 'menu-item-group', | ||
27 | + 'dropdown-button', | ||
28 | + 'breadcrumb-item', | ||
29 | + 'breadcrumb-separator', | ||
30 | + 'input-password', | ||
31 | + 'input-search', | ||
32 | + 'input-group', | ||
33 | + 'form-item', | ||
34 | + 'radio-group', | ||
35 | + 'checkbox-group', | ||
36 | + 'layout-sider', | ||
37 | + 'layout-content', | ||
38 | + 'layout-footer', | ||
39 | + 'layout-header', | ||
40 | + 'step', | ||
41 | + 'select-option', | ||
42 | + 'select-opt-group', | ||
43 | + 'card-grid', | ||
44 | + 'card-meta', | ||
45 | + 'collapse-panel', | ||
46 | + 'descriptions-item', | ||
47 | + 'list-item', | ||
48 | + 'list-item-meta', | ||
49 | + 'table-column', | ||
50 | + 'table-column-group', | ||
51 | + 'tab-pane', | ||
52 | + 'tab-content', | ||
53 | + 'timeline-item', | ||
54 | + 'tree-node', | ||
55 | + 'skeleton-input', | ||
56 | + 'skeleton-avatar', | ||
57 | + 'skeleton-title', | ||
58 | + 'skeleton-paragraph', | ||
59 | + 'skeleton-image', | ||
60 | + 'skeleton-button', | ||
61 | + ]; | ||
62 | + return ignoreList.includes(name) ? '' : `ant-design-vue/es/${name}/style/index`; | ||
63 | + }, | ||
64 | + }, | ||
65 | + ], | ||
66 | + }); | ||
67 | + return styleImportPlugin; | ||
68 | + } | ||
69 | + |
1 | -// 全局按需注册组件 | ||
2 | import type { App } from 'vue'; | 1 | import type { App } from 'vue'; |
2 | +import { Icon } from './Icon'; | ||
3 | import { Button } from './Button'; | 3 | import { Button } from './Button'; |
4 | import { | 4 | import { |
5 | // Need | 5 | // Need |
6 | Button as AntButton, | 6 | Button as AntButton, |
7 | + Select, | ||
8 | + Alert, | ||
9 | + Checkbox, | ||
10 | + DatePicker, | ||
11 | + Radio, | ||
12 | + Switch, | ||
13 | + Card, | ||
14 | + List, | ||
15 | + Tabs, | ||
16 | + Descriptions, | ||
17 | + Tree, | ||
18 | + Table, | ||
19 | + Divider, | ||
20 | + Modal, | ||
21 | + Drawer, | ||
22 | + TreeSelect, | ||
23 | + Dropdown, | ||
24 | + Tag, | ||
25 | + Tooltip, | ||
26 | + Badge, | ||
27 | + Popover, | ||
28 | + Upload, | ||
29 | + Transfer, | ||
30 | + Steps, | ||
31 | + PageHeader, | ||
32 | + Result, | ||
33 | + Empty, | ||
34 | + Avatar, | ||
35 | + Menu, | ||
36 | + Breadcrumb, | ||
37 | + Form, | ||
7 | Input, | 38 | Input, |
39 | + Row, | ||
40 | + Col, | ||
41 | + Spin, | ||
42 | + Space, | ||
8 | Layout, | 43 | Layout, |
44 | + Collapse, | ||
45 | + Slider, | ||
46 | + InputNumber, | ||
47 | + Carousel, | ||
48 | + Popconfirm, | ||
49 | + Skeleton, | ||
50 | + Cascader, | ||
51 | + Rate, | ||
9 | } from 'ant-design-vue'; | 52 | } from 'ant-design-vue'; |
10 | 53 | ||
11 | -const compList = [AntButton.Group]; | 54 | +const compList = [AntButton.Group, Icon]; |
12 | 55 | ||
13 | export function registerGlobComp(app: App) { | 56 | export function registerGlobComp(app: App) { |
14 | compList.forEach((comp) => { | 57 | compList.forEach((comp) => { |
15 | app.component(comp.name || comp.displayName, comp); | 58 | app.component(comp.name || comp.displayName, comp); |
16 | }); | 59 | }); |
17 | 60 | ||
18 | - app.use(Input).use(Button).use(Layout); | 61 | + app |
62 | + .use(Select) | ||
63 | + .use(Alert) | ||
64 | + .use(Button) | ||
65 | + .use(Breadcrumb) | ||
66 | + .use(Checkbox) | ||
67 | + .use(DatePicker) | ||
68 | + .use(Radio) | ||
69 | + .use(Switch) | ||
70 | + .use(Card) | ||
71 | + .use(List) | ||
72 | + .use(Descriptions) | ||
73 | + .use(Tree) | ||
74 | + .use(TreeSelect) | ||
75 | + .use(Table) | ||
76 | + .use(Divider) | ||
77 | + .use(Modal) | ||
78 | + .use(Drawer) | ||
79 | + .use(Dropdown) | ||
80 | + .use(Tag) | ||
81 | + .use(Tooltip) | ||
82 | + .use(Badge) | ||
83 | + .use(Popover) | ||
84 | + .use(Upload) | ||
85 | + .use(Transfer) | ||
86 | + .use(Steps) | ||
87 | + .use(PageHeader) | ||
88 | + .use(Result) | ||
89 | + .use(Empty) | ||
90 | + .use(Avatar) | ||
91 | + .use(Menu) | ||
92 | + .use(Tabs) | ||
93 | + .use(Form) | ||
94 | + .use(Input) | ||
95 | + .use(Row) | ||
96 | + .use(Col) | ||
97 | + .use(Spin) | ||
98 | + .use(Space) | ||
99 | + .use(Layout) | ||
100 | + .use(Collapse) | ||
101 | + .use(Slider) | ||
102 | + .use(InputNumber) | ||
103 | + .use(Carousel) | ||
104 | + .use(Popconfirm) | ||
105 | + .use(Skeleton) | ||
106 | + .use(Cascader) | ||
107 | + .use(Rate); | ||
19 | } | 108 | } |