Ant Design Vue快速入门教程

Ant Design是蚂蚁金服出品的一款前端UI库，官方的介绍是服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。简而言之就是一款简洁漂亮的UI库。

运行环境

1，现代浏览器和 IE9 及以上（需要 polyfills）。
2，Vue框架

方式一

 1， 下载Ant Design  
 2， 下载Vue框架

引用JS和CSS文件

<script src="https://www.itxst.com/package/vue/vue.min.js"></script>
<script src="https://www.itxst.com/package/ant-design-vue/antd.min.js"></script>
<link href="https://www.itxst.com/package/ant-design-vue/antd.min.css" rel="stylesheet" />
<!--浏览器方式下有些事件无法响应，需要引入vue-dash-event插件-->
<script src="//www.itxst.com/package/ant-design-vue/vue-dash-event.js"></script>

方式二

环境node.js webpack vscode npm

//安装vue脚手架和ant design vue
npm install -g @vue/cli
npm i --save ant-design-vue
//创建一个vue demo
vue create antd-demo

//在mian.js中完整引入
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Antd from 'ant-design-vue'
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/>'
})

按钮例子

<div id="app">
        <a-button type="primary">主按钮</a-button>
        <a-button>默认</a-button>
        <a-button type="dashed">虚线</a-button>
        <a-button type="danger">警告</a-button>
        <a-config-provider :autoInsertSpaceInButton="false">
            <a-button type="primary">按钮</a-button>
        </a-config-provider>
        <a-button type="primary">按钮</a-button>
        <a-button type="link">连接</a-button>
 </div>
 <script>
   //vue-dash-event解决有些事件无法响应的问题
   Vue.use(window['vue-dash-event']);
    var app = new Vue({
            el: '#app',
            data: { 
     }
   });
</script>

例子

图标Icon例子

<div id="app">
    <div class="icons-list">
        <a-icon type="home"></a-icon>
        <a-icon type="setting" theme="filled"></a-icon>
        <a-icon type="smile" theme="outlined"></a-icon>
        <a-icon type="sync" spin></a-icon>
        <a-icon type="smile" :rotate="180"></a-icon>
        <a-icon type="loading"></a-icon>
    </div>
</div>
<script>
   var app = new Vue({
        el: '#app',
        data: {
        }
    });
</script>

例子

dropdown下拉菜单例子

<a-dropdown placement="bottomLeft">
    <a-button>bottomLeft</a-button>
    <a-menu slot="overlay">
        <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="https://www.itxst.com/">1st menu item</a>
        </a-menu-item>
        <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="https://www.itxst.com/">2nd menu item</a>
        </a-menu-item>
        <a-menu-item>
            <a target="_blank" rel="noopener noreferrer" href="https://www.itxst.com/">3rd menu item</a>
        </a-menu-item>
    </a-menu>
</a-dropdown>

例子

Breadcrumb面包屑

<a-breadcrumb>
    <a-breadcrumb-item href="">
        <a-icon type="home"> </a-icon>
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
        <a-icon type="user"> </a-icon>
        <span>用户管理</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>
        个人资料
    </a-breadcrumb-item>
</a-breadcrumb>

例子