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 | } |