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>
posted @ 2021-03-02 14:00  comyan  阅读(411)  评论(0编辑  收藏  举报