一 、安装ant-design-vue
npm i --save ant-design-vue
二.、引入
1.完整引入
import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;
Vue.use(Antd);
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
});
2. 按需引入
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button } from 'ant-design-vue'
Vue.use(Button)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
三、根据官方文档配置babel-plugin-import
1. 安装babel-plugin-import
2. 配置babel.config.js
其中
style:true表示会去编译less文件，但是在编译less文件时就会报下面的错误
四、遇到的坑
1. 第一次会报错
./node_modules/antd/lib/button/style/index.less (./node_modules/css-loader??ref--6-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/less-loader/dist/cjs.js!./node_modules/antd/lib/button/style/index.less)
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in /myproject/react/antedemo/node_modules/antd/lib/style/color/bezierEasing.less (line 110, column 0)
2. 第二次报错
3. 解决方案
其实上面两个错误都是编译不了less文件，可能时less和less-loader的版本太高了，但是也可以去在创建
vue.config.js文件，去进行下面配置就能解决按需引入的bug了
- less-loader版本大于5.0以上
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true,
},
},
},
};
- less-loader版本大于6.0以上
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true,
},
},
},
},
}
