# 組件注冊 ## 按需引入 項目目前的組件注冊機制是按需注冊，是在需要用到的頁面才引入。 ```vue <template> <Menu> <SubMenu></SubMenu> <Menu> <menu> <sub-menu></sub-menu> <menu> </template> <script> import { Menu } from 'ant-design-vue'; export default defineComponent({ components: { Menu: Menu, SubMenu: Menu.SubMenu }, }) </script> ``` ### tsx 文件注冊 **tsx 文件內不能使用全局注冊組件** ```jsx import { Menu } from 'ant-design-vue'; export default defineComponent({ setup() { return () => ( <Menu> <Menu.SubMenu></Menu.SubMenu> </Menu> ); }, }); ``` ## 全局注冊 如果不習慣按需引入方式，可以進行全局注冊。全局注冊也分兩種方式 ### 全局按需注冊 只注冊需要的組件 代碼地址：[src/components/registerGlobComp.ts](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/components/registerGlobComp.ts) ```ts import { // Need Button as AntButton, Optional Select, Alert, Checkbox, DatePicker, Radio, Switch, Card, List, Tabs, Descriptions, Tree, Table, Divider, Modal, Drawer, Dropdown, Tag, Tooltip, Badge, Popover, Upload, Transfer, Steps, PageHeader, Result, Empty, Avatar, Menu, Breadcrumb, Form, Input, Row, Col, Spin, } from 'ant-design-vue'; export function registerGlobComp(app: App) { app .use(Select) .use(Alert) .use(Breadcrumb) .use(Checkbox) .use(DatePicker) .use(Radio) .use(Switch) .use(Card) .use(List) .use(Descriptions) .use(Tree) .use(Table) .use(Divider) .use(Modal) .use(Drawer) .use(Dropdown) .use(Tag) .use(Tooltip) .use(Badge) .use(Popover) .use(Upload) .use(Transfer) .use(Steps) .use(PageHeader) .use(Result) .use(Empty) .use(Avatar) .use(Menu) .use(Tabs) .use(Form) .use(Input) .use(Row) .use(Col) .use(Spin); } ``` ### 全量注冊 - 在`main.ts`內 ```ts import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.less'; const app = createApp(App); app.use(Antd); ``` - 刪除以下代碼 ```ts if (import.meta.env.DEV) { import('ant-design-vue/dist/antd.less'); } ```