Vue-cli3全局引入Ant Design Vue和按需引入

1、首先我们介绍下如何在vue中全局引入Ant Design Vue

1.1、输入命令npm i --save [email protected]下载指定版本

$ npm i --save [email protected]

1.2、main.js文件引入并使用

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

2、按需引入，我们这里讲vue-cli3x及以上版本的

2.1、需要在下载好[email protected]版本后执行npm install babel-plugin-import --dev下载用于按需加载组件代码和样式的 babel 插件

$ npm install babel-plugin-import --dev 

2.2、修改babel.config.js文件，配置 babel-plugin-import

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

2.3、src目录下创建文件夹plugins，然后创建antd.js 如下按需引入即可，用到啥组件引用啥组件

import Vue from 'vue'
import {
    Button,
    Checkbox,
    DatePicker,
    Form,
    Input,
    message,
    Modal
} from 'ant-design-vue';

import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件


Vue.use(Button)
Vue.use(Checkbox)
Vue.use(DatePicker)
Vue.use(Form)
Vue.use(Input)

Vue.prototype.$message = message
Vue.prototype.$confirm = Modal.confirm;

2.4、main.js文件引入antd.js

import './plugins/antd';

2.5、因antd.js有用到less文件 故项目如没有配置less 还需下载并配置less

$ npm install [email protected] [email protected] --save-dev  
//执行npm install [email protected] [email protected] --save-dev命令下载less 及less-loader

2.6、项目主目录下与src同级创建vue.config.js文件并如下配置就完成了按需引入

module.exports = {
    css:{
        requireModuleExtension: true,
        loaderOptions:{
          less:{
              javascriptEnabled: true
          }
        }
    }
}

创作不易，欢迎点赞收藏！