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 文件内不能使用全局注册组件

复制代码
import { Menu } from 'ant-design-vue';

export default defineComponent({
  setup() {
    return () => (
      <Menu>
        <Menu.SubMenu></Menu.SubMenu>
      </Menu>
    );
  },
});

全局注册

如果不习惯按需引入方式,可以进行全局注册。全局注册也分两种方式

全局按需注册

只注册需要的组件

代码地址:src/components/registerGlobComp.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

    import { createApp } from 'vue';
    import Antd from 'ant-design-vue';
    import 'ant-design-vue/dist/antd.less';
    const app = createApp(App);
    app.use(Antd);

  • 删除以下代码

    if (import.meta.env.DEV) {
    import('ant-design-vue/dist/antd.less');
    }

相关推荐
sunbyte1 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常2 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常4 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10188 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28115 分钟前
Chrome插件开发
前端
前端 贾公子27 分钟前
Monorepo + vite 怎么热更新
前端
coding随想36 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#