Vue按需引入Ant Design的一些问题（采坑）
1. 前言
为什么就不能友好点呢？程序员就到出采坑...
关于Element UI的按需引入请看这（也是坑）：https://www.misiai.com/articles/16.html
安装ant design就不说了：
npm i --save ant-design-vue2. 正文
2.1. 安装less
npm install less less-loader # ant design for vue使用less，所以需要安装less less-loader的相关配置不然会报错找不到less模块和loader
2.2. 提取出引入模块
言下之意就是把引入这些组件写到专门的一个js配置文件里面：
config\AntDesign.js
import {Button, message} from 'ant-design-vue';
const ant = {
install: function (Vue) {
Vue.use(message);
Vue.component(Button.name, Button);
Vue.prototype.$message = message;
}
};
export default ant然后在main.js中引入：
// 引入vue ant design
import ant from "./config/AntDesign";
Vue.use(ant);2.3. babel设置
1、安装按需引入的插件：
npm install babel-plugin-import --dev2、配置
在babel.config.js文件中：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{libraryName: "ant-design-vue", libraryDirectory: "es", style: true}
]
]
}2.4. 需要开启javascriptEnabled
不然会报错：
Inline JavaScript is not enabled. Is it set in your options?
vue-cli3.x解决办法是：新建vue.config.js文件，写入：
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录