vue-cli里用antd of vue

antd of vue

• • • 安装和配置
    • 使用
    • 说明

安装和配置

安装：yarn add ant-design-vue

安装按需插件：yarn add babel-plugin-import --dev

配置文件babel.config.js:

注意，不要直接用官网里的配置，不然大概率会报错。

module.exports = {
    presets: [
        // '@vue/cli-plugin-babel/preset',
        "@vue/app"
    ],
    plugins: [
        [
            "import",
            { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
        ]
    ]
}

安装less和less-loader:

yarn add less

yarn add less-loader@5.0.0

注意less-loader的版本，不然也会报错。

使用

以使用Button组件为例：

在/src/main.js中引入：

import { Button} from 'ant-design-vue';

使用插件和使用该组件的方法有两种：

第一种：

在main.js中使用插件：

Vue.use(Button);

相当于

Vue.component('a-button', Button);

在其他.vue文件中使用组件：

<a-button>click</a-button>

也就是说，你不给Button定义一个组件名，

系统默认了用a-button来代替Button

第二种：

自己定义组件名来代替Button

在main.js中使用插件：

Vue.component('hello', Button);

这就表示在使用组件的时候，

用<hello></hello>来代替<Button></Button>

在其他.vue文件中使用该组件：

<hello>click me</hello>

说明

antd of vue官方文档：https://www.antdv.com/docs/vue/use-with-vue-cli-cn/

本来要用element-ui的，但是bebal插件貌似出了问题，不能做按需加载了。

antd本来就是UI这块的鼻祖，而且react和vue都可用。所以直接入手antd of vue了。