ant-design of vue的引入

按需引入

1、安装

npm install --save ant-design-vue

//按需引入插件安装

npm install --save babel-plugin-import

2、引入并加载到vue

antDesign.js

 import Vue from 'vue'
import {
  // Button,
  // Icon,
  // Layout,
  // Menu,
  // Breadcrumb,
  // Card,
  // Pagination,
  // Tabs,
  message,
  Modal
  // Table,
  // Input,
  // Form,
  // Select,
  // Upload,
  // Popconfirm,
  // Dropdown
} from 'ant-design-vue'
[
//   Button,
//   Icon,
//   Layout,
//   Menu,
//   Breadcrumb,
//   Card,
//   Pagination,
//   Tabs,
//   Menu,
  Modal
//   Table,
//   Input,
//   Form,
//   Select,
//   Upload,
//   Popconfirm,
//   Dropdown
].forEach(AntComponent => Vue.use(AntComponent))
Vue.prototype.$message = message

main.js中

import './plugin/antDesign'

babel.config.js

module.exports = {
  // presets: [
  //   '@vue/cli-plugin-babel/preset'
  // ],
  // plugins: [
  //   [
  //     "import",
  //     { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
  //   ],
  //   [
  //     "component",
  //     {
  //       "libraryName": "element-ui",
  //       "styleLibraryName": "theme-chalk"
  //     }
  //   ]
  // ]
}

vue.config.js

module.exports = {
    css:{
        loaderOptions:{
            less:{
                javascriptEnabled:true//less-loader配置里开启允许javascript
            }
        }
    }
}

cdn引入

index.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.css">
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.8/dist/antd.min.js"></script>

vue.config.js

module.exports = {
    configureWebpack: {
        externals: {
            'ant-design-vue': 'antd'
        }
}