1.安装

yarn  add ant-design-vue@next
# OR
npm i --save ant-design-vue@next

2.使用
在main.ts文件中引入

import { createApp } from "vue";
import App from "./App.vue";
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import store from "./store";

createApp(App)
  .use(store)
  .use(router)
  .use(Antd)
  .mount("#app");

3.按需加载
安装babel插件

cnpm install babel-plugin-import --save-dev

新建plugins/Ant/index.ts文件,
在这里插入图片描述

按需引用需要加载的组件

import { Button, Input, Steps, Form, Select, Row, Radio, DatePicker, Col, Icon, Checkbox, Switch } from 'ant-design-vue'

const ant = {
  install(Vue: any) {
    Vue.component(Button.name, Button)
    Vue.component(Input.name, Input)
    Vue.component(Steps.name, Steps)
    Vue.component(Form.name, Form)
    Vue.component(Select.name, Select)
    Vue.component(Row.name, Row)
    Vue.component(Radio.name, Radio)
    Vue.component(DatePicker.name, DatePicker)
    Vue.component(Col.name, Col)
    Vue.component(Icon.name, Icon)
    Vue.component(Checkbox.name, Checkbox)
    Vue.component(Switch.name, Switch)
  }
}
export default ant

修改bable.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

在main.ts文件中修改,引入plugins/Ant下的文件

import { createApp } from "vue";
import App from "./App.vue";
import Antd from './plugins/Ant'
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import store from "./store";

createApp(App)
  .use(store)
  .use(router)
  .use(Antd)
  .mount("#app");

使用ant组件

<a-button type="primary">按钮</a-button>

查看效果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐