一、什么是antd design
官网:https://www.antdv.com/docs/vue/introduce-cn/
蚂蚁金服体验技术部经过大量的项目实践和总结,沉淀出设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。目前有阿里、美团、滴滴、简书采用。
Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界,将进行 UE 设计和 UI 设计人员统称为『设计者』,利用统一的规范进行设计赋能,全面提高中台产品体验和研发效率。
antd不仅仅是一个组件库,而是一门设计语言,提供了配套的设计资源(A UI Design Language),它保持了组件的结构样式动画的一致性,我们可以直接使用antd官方提供的设计资源。此外,antd积累了丰富的语言包,在组件库中可以直接使用这些语言包。
二、安装antd design
npm install ant-design-vue --save
三、配置antd design
在main.js中,添加以下代码
import ant from 'ant-design-vue' // 引入Antd组件
import 'ant-design-vue/dist/antd.less' // 引入样式
Vue.use(ant) // 使用Antd
四、使用antd design
在页面中添加antd的按钮标签
<a-button type="primary">Antd Button</a-button>
打开页面可以看到如下样式,说明antd已经完成集成了。
接下来我们就可以自由使用antd的组件进行开发工作了。
代码(button、menu):
<template>
<div>
<h2>主页</h2>
<a-button type="primary">Antd Button</a-button>
<template>
<div>
<a-button type="primary">
Primary
</a-button>
<a-button>Default</a-button>
<a-button type="dashed">
Dashed
</a-button>
<a-button type="danger">
Danger
</a-button>
<a-config-provider :auto-insert-space-in-button="false">
<a-button type="primary">
按钮
</a-button>
</a-config-provider>
<a-button type="primary">
按钮
</a-button>
<a-button type="link">
Link
</a-button>
</div>
</template>
<template>
<div>
<a-menu v-model="current" mode="horizontal">
<a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>
<a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>
<a-sub-menu>
<span slot="title" class="submenu-title-wrapper"
><a-icon type="setting" />Navigation Three - Submenu</span
>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">
Option 1
</a-menu-item>
<a-menu-item key="setting:2">
Option 2
</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">
Option 3
</a-menu-item>
<a-menu-item key="setting:4">
Option 4
</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="alipay">
<a href="https://antdv.com" target="_blank" rel="noopener noreferrer"
>Navigation Four - Link</a
>
</a-menu-item>
</a-menu>
</div>
</template>
</div>
</template>
<script>
export default {
name: 'Main',
data () {
return {
current: ['mail']
}
}
}
</script>
<style scoped>
</style>
效果:
更多组件用法可参考antd官网:https://www.antdv.com/docs/vue/introduce-cn/