Ant Design Vue教程

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>

例子

Catalog
快速入门 Button 按钮 Affix 固钉 Breadcrumb 面包屑 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关