安装和配置
安装: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了。