ant-design-vue基础
1.ant design vue 官⽹
1.1 什么是ant-design-vue?(What:是什么?)
Ant Design是蚂蚁⾦服技术部经过⼤量项⽬时间和总结,设计的前端UI组件库
Ant Design Vue 是使⽤ Vue 实现的遵循 Ant Design 设计规范的⾼质量 UI 组件库,⽤于开发和服务于企业级中后台产品
1.2 ant-design-vue作⽤?(Where:什么地⽅使⽤?)
ant-design-pro-vue:使⽤ vue+ant-design-vue 开发的项⽬
*⽤于开发和服务与企业后台产品
1.3 为什么使⽤?(Why)
快速⾼效的开发后台管理系统
1.4 如何使⽤?(How:如何使⽤)
# 1.安装
cnpm install ant-design-vue --save
# 2.main.js中全局引⼊并注册
import Vue from 'vue'
import App from './App'
import Antd from 'ant-design-vue'
import router from './router'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
# 3.在页⾯中不再需要引⼊注册组件,可以直接使⽤所有的组件
<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>
2.UI组件库对⽐
2.1.常见组件库对⽐
Element-UI
Ant-Design-Vue
iView
2.2.各组件库资源
2.2.1 Element UI
⽂档:element.eleme.io/#/zh-CN/component/installation
vue-element-admin演⽰地址:panjiachen.github.io/vue-element-admin/#/login
vue-element-admin项⽬⽂档:panjiachen.github.io/vue-element-admin-site/zh/
vue-element-admin项⽬源码:github/PanJiaChen/vue-element-admin
2.2.2 Ant Design Vue
antdesign教程
⽂档:vue.ant.design/docs/vue/introduce-cn/
Ant Design Pro演⽰地址:preview.pro.antdv
Ant Design Pro项⽬⽂档:pro.loacg/docs/getting-started Ant Design Pro项⽬源码:github/sendya/ant-design-pro-vue 2.2.3 iView
⽂档:www.iviewui/docs/introduce
iView-admin预览:admin.iviewui/login
iView-admin项⽬⽂档:lison16.github.io/iview-admin-doc/#/ iView-admin项⽬源码:github/iview/iview-admin
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论