ant-design-vue 在vue-cli按需加载
首先需要 安装 babel-plugin-import
npm install babel-plugin-import --save-dev
vue-cli 2 版本:
修改 .babelrc 文件 进行配置
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
- "plugins": ["transform-vue-jsx", "transform-runtime"]
+ "plugins": [
+ "transform-vue-jsx",
+ "transform-runtime",
+ ["import", {
"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
+ ]
}
vue-cli 3 版本
修改 babel.config.js 文件 进行配置
module.exports = {
presets: ["@vue/app"],
+ plugins: [
+ [
+ "import",
+ {
libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
+ ]
+ ]
};
调用时:
// src/main.js
import Vue from 'vue'
- import Button from 'ant-design-vue/lib/button';
+ import {
Button } from 'ant-design-vue';
- import 'ant-design-vue/dist/antd.css'
import App from './App'
Vue.component(Button.name, Button)
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount("#app");
或者在单独的vue文件中
import Vue from "vue";
import {
Button } from "ant-design-vue";
Vue.use(Button);