按需引入Ant-Design-Vue

1.安装babel-plugin-import

npm i babel-plugin-import

2.创建antd配置文件ant-design/index.js,需要用到什么组件把注释去掉就可以了

import Vue from 'vue'
import Antd from 'ant-design-vue'

const {
  // Affix,
  // BackTop,
  ConfigProvider,
  // Layout,
  Input,
  // InputNumber,
  Pagination,
  Button,
  // Switch,
  // Radio,
  // Checkbox,
  Select,
  // Card,
  Form,
  Row,
  Col,
  // Modal,
  Table,
  // Tabs,
  Icon,
  // Badge,
  // Popover,
  // Dropdown,
  // List,
  // Avatar,
  // Breadcrumb,
  Steps,
  // Spin,
  // Menu,
  // Drawer,
  Tooltip,
  // Alert,
  // Tag,
  // Tree,
  // TreeSelect,
  // Divider,
  // DatePicker,
  // TimePicker,
  // Carousel,
  // Upload,
  // Progress,
  // Skeleton,
  // Popconfirm,
  message
  // notification,
  // Spin
} = Antd

// Vue.use(Affix)
// Vue.use(BackTop)
Vue.use(ConfigProvider)
Vue.use(Pagination)
// 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(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(Tree);
// Vue.use(TreeSelect);
// Vue.use(Divider)
// Vue.use(DatePicker)
// Vue.use(TimePicker);
// Vue.use(Upload);
// Vue.use(Progress);
// Vue.use(Skeleton);
// Vue.use(Popconfirm);
// Vue.use(Carousel);
// Vue.use(Spin)

// Vue.prototype.$confirm = Modal.confirm;
Vue.prototype.$message = message
// Vue.prototype.$notification = notification
// Vue.prototype.$info = Modal.info;
// Vue.prototype.$success = Modal.success;
// Vue.prototype.$error = Modal.error;
// Vue.prototype.$warning = Modal.warning;
Vue.prototype.$form = Form
message.config({
  top: `200px`
})

3. 修改main.js 引入配置文件 ant-design/index.js

按需引入Ant-Design-Vue_第1张图片

 4.修改配置文件.babelrc

["import", 
      { 
      "libraryName": "ant-design-vue", 
      "libraryDirectory": "es", 
      "style": "css" 
      }
    ],

按需引入Ant-Design-Vue_第2张图片

 

 

 

你可能感兴趣的:(vue,vue.js,按需引入,antd)