前端样式框架 ant-design-vue 讲解

举报
SHQ5785 发表于 2022/03/31 09:51:12 2022/03/31
【摘要】 一、前言ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致。 用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。下面具体讲解下该组件库的应用实践。 二、组件库安装npm install ant-desig...

一、前言

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的VueUI组件库,它其实是Ant DesignVue实现,组件的风格与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,从而报错!

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200