Showing
2 changed files
with
156 additions
and
20 deletions
... | ... | @@ -2,21 +2,68 @@ |
2 | 2 | * Introduces component library styles on demand. |
3 | 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 | + | |
\ No newline at end of file | ... | ... |
1 | -// 全局按需注册组件 | |
2 | 1 | import type { App } from 'vue'; |
2 | +import { Icon } from './Icon'; | |
3 | 3 | import { Button } from './Button'; |
4 | 4 | import { |
5 | 5 | // Need |
6 | 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 | 38 | Input, |
39 | + Row, | |
40 | + Col, | |
41 | + Spin, | |
42 | + Space, | |
8 | 43 | Layout, |
44 | + Collapse, | |
45 | + Slider, | |
46 | + InputNumber, | |
47 | + Carousel, | |
48 | + Popconfirm, | |
49 | + Skeleton, | |
50 | + Cascader, | |
51 | + Rate, | |
9 | 52 | } from 'ant-design-vue'; |
10 | 53 | |
11 | -const compList = [AntButton.Group]; | |
54 | +const compList = [AntButton.Group, Icon]; | |
12 | 55 | |
13 | 56 | export function registerGlobComp(app: App) { |
14 | 57 | compList.forEach((comp) => { |
15 | 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 | } | ... | ... |