Ant Design Vue框架的按需引入的全部组件汇总

ant design vue框架的按需引入的组件汇总
新建ant.js文件

// ant design vue library
import { 
  ConfigProvider,
  Layout,
  Input,
  InputNumber,
  Button,
  Switch,
  Radio,
  Checkbox,
  Select,
  Card,
  Form,
  FormModel,
  Row,
  Col,
  Modal,
  Table,
  Tabs,
  Icon,
  Badge,
  Popover,
  Dropdown,
  List,
  Avatar,
  Breadcrumb,
  Steps,
  Spin,
  Menu,
  Drawer,
  Tooltip,
  Alert,
  Tag,
  Divider,
  DatePicker,
  TimePicker,
  Upload,
  Progress,
  Skeleton,
  Popconfirm,
  PageHeader,
  Result,
  Statistic,
  Descriptions,
  message,
  notification,
  Collapse,
  Timeline,
  AutoComplete,
  Transfer,
  TreeSelect,
  Pagination,
  Tree,
  Cascader,
  Anchor,
  Carousel,
  BackTop,
  Empty
} from 'ant-design-vue'

const importAntd = Vue => {
  Vue.use(ConfigProvider)
  Vue.use(Layout)
  Vue.use(Input)
  Vue.use(InputNumber)
  Vue.use(Button)
  Vue.use(Switch)
  Vue.use(Radio)
  Vue.use(Checkbox)
  Vue.use(Select)
  Vue.use(Card)
  Vue.use(Form)
  Vue.use(FormModel)
  Vue.use(Row)
  Vue.use(Col)
  Vue.use(Modal)
  Vue.use(Table)
  Vue.use(Tabs)
  Vue.use(Icon)
  Vue.use(Badge)
  Vue.use(Popover)
  Vue.use(Dropdown)
  Vue.use(List)
  Vue.use(Avatar)
  Vue.use(Breadcrumb)
  Vue.use(Steps)
  Vue.use(Spin)
  Vue.use(Menu)
  Vue.use(Drawer)
  Vue.use(Tooltip)
  Vue.use(Alert)
  Vue.use(Tag)
  Vue.use(Divider)
  Vue.use(DatePicker)
  Vue.use(TimePicker)
  Vue.use(Upload)
  Vue.use(Progress)
  Vue.use(Skeleton)
  Vue.use(Popconfirm)
  Vue.use(PageHeader)
  Vue.use(Result)
  Vue.use(Statistic)
  Vue.use(Descriptions)
  Vue.use(Collapse)
  Vue.use(Timeline)
  Vue.use(AutoComplete)
  Vue.use(Transfer)
  Vue.use(TreeSelect)
  Vue.use(Pagination)
  Vue.use(Tree)
  Vue.use(Cascader)
  Vue.use(Anchor)
  Vue.use(Carousel)
  Vue.use(BackTop)
  Vue.use(Empty)
  Vue.prototype.$message = message
  Vue.prototype.$Message = message
  Vue.prototype.$notification = notification
  Vue.prototype.$confirm = Modal.confirm
  Vue.prototype.$info = Modal.info
  Vue.prototype.$success = Modal.success
  Vue.prototype.$error = Modal.error
  Vue.prototype.$warning = Modal.warning

  process.env.NODE_ENV !== 'production' && console.warn('ant design use lazy-load !')
}

export default importAntd

新建lazy_useUI.js

import Vue from "vue";
import Antd from "./module/ant.js";
Vue.use(Antd);

在main.js引入文件

import './core/plugin/lazy_useUI'
import 'ant-design-vue/dist/antd.less';

注意点：引入less和less-loader时注意版本问题，项目使用版本如下：

 "less": "^2.7.3",
 "less-loader": "^6.0.0",

编译遇到问题可以改下vue.config.js文件里面的css

const { defineConfig } = require("@vue/cli-service")
module.exports = defineConfig({
  publicPath: process.env.NODE_ENV == 'production' ? '/static' : '',
  outputDir: "dist",
  productionSourceMap: false,
  //关闭eslint校验
  lintOnSave: false,
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          // 内联JavaScript启用
          javascriptEnabled: true,
        }
      }
    }
  }
})