ant-design-vue基础

1.ant design vue 官网

https://www.antdv.com/components/drawer-cn/

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.config.productionTip = false
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

文档：https://element.eleme.io/#/zh-CN/component/installation 

vue-element-admin演示地址：https://panjiachen.github.io/vue-element-admin/#/login 
vue-element-admin项目文档：https://panjiachen.github.io/vue-element-admin-site/zh/ 
vue-element-admin项目源码：https://github.com/PanJiaChen/vue-element-admin

2.2.2 Ant Design Vue

文档：https://vue.ant.design/docs/vue/introduce-cn/ 

Ant Design Pro演示地址：https://preview.pro.antdv.com 
Ant Design Pro项目文档：https://pro.loacg.com/docs/getting-started Ant Design Pro项目源码：https://github.com/sendya/ant-design-pro-vue

2.2.3 iView

文档：https://www.iviewui.com/docs/introduce 
iView-admin预览:https://admin.iviewui.com/login 
iView-admin项目文档：https://lison16.github.io/iview-admin-doc/#/ iView-admin项目源码：https://github.com/iview/iview-admin