ant-design-vue 按需使用组件踩坑
Antd-vue按需引入
1.从 yarn 或 npm 安装并引入 ant-design-vue
//npm
npm install ant-design-vue --save
//yarn
yarn add ant-design-vue
2.开始配置按需引入配置
babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件,如果需要样式自动加载那么要先装这个插件
npm install babel-plugin-import --dev
安装完后需要配置babel.plugin.config文件
这里要注意 style:true会报错 ,把true换成css
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"import",
{libraryName: "ant-design-vue", libraryDirectory: "es", style:"css"}
]
]
}
新建一个文件,把需要的组件引入进来
//main.js
import { Button } from 'ant-design-vue';
Vue.use(Button);
<a-button type="primary">Button</a-button>