Vue 进阶（幺幺零）：ant-design-vue

关注

发布于: 5 小时前

一、前言

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。

下面具体讲解下该组件库的应用实践。

二、组件库安装

npm install ant-design-vue --save

复制代码

如果你的网络环境不佳，推荐使用 cnpm。

三、引入

在main.js中全局引入并注册。

3.1 全部引入

import ant from 'ant-design-vue'import 'ant-design-vue/dist/antd.less'
Vue.use(ant)

复制代码

3.2 引入部分组件

import {Button} from 'ant-design-vue'import 'ant-design-vue/dist/antd.less'
Vue.use(Button)

复制代码

3.3 按需加载

ant-design-vue使用babel-plugin-import进行按需加载。

安装babel-plugin-import插件

npm i babel-plugin-import --save-dev

复制代码

修改.babelrc文件，在plugins节点下，添加下面这个配置项：

 "plugins": ["transform-vue-jsx", "transform-runtime",    [        "import",        {            "libraryName": "ant-design-vue",            "libraryDirectory": "lib",            "style": "css"                      }    ]]

复制代码

在需要使用相关组件的页面，引入并注册即可按需加载。

 <template>  <div>    <a-button type="primary">hello world</a-button>  </div></template>
<script>import { Button } from 'ant-design-vue';
export default {    components:{ AButton:Button },}</script>

复制代码

四、应用

直接在项目中可以使用，在antd官网复制即可。

<a-button type="primary">Primary</a-button>

复制代码

注：请严格按照官方文档操作，否则会错的很离谱。

例如，应用icon图标时，正确使用方式如下：

<a-icon type="fullscreen"/>

复制代码

而绝非如下方式：

<a-icon type="fullscreen"></a-icon>

复制代码

使用上述错误方式，会导致浏览器无法解析ant-design-vue，从而报错！

五、拓展阅读

发布于: 5 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/a8c9d9f641771c32ac7847167】。文章转载请联系作者。

No Silver Bullet

关注

No Silver Bullet 2021.07.09 加入

岂曰无衣与子同袍

发布

暂无评论

创作场景

Vue 进阶（幺幺零）：ant-design-vue

一、前言

二、组件库安装

三、 引入

3.1 全部引入

3.2 引入部分组件

3.3 按需加载

四、应用

五、拓展阅读

No Silver Bullet

评论

三、引入