Ant Design of Vue

这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

特性 #

提炼自企业级中后台产品的交互语言和视觉风格。
开箱即用的高质量 Vue 组件。
共享Ant Design of React设计工具体系。

支持环境 #

现代浏览器和 IE9 及以上（需要 polyfills）。
支持服务端渲染。

版本 #

稳定版：

你可以订阅：https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。

安装 #

使用 npm 或 yarn 安装 #

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

$ npm install ant-design-vue --save

来源： https://vue.ant.design/docs/vue/introduce-cn/

生态 #

来源： https://github.com/vueComponent/ant-design-vue/blob/master/README-zh_CN.md

Project	Description
vue-ref	您可以使用回调来获取组件的引用，类似react
ant-design-vue-helper	ant-design-vue的vscode扩展
vue-cli-plugin-ant-design	使用vue-cli3快速使用ant-design-vue组件库
vue-dash-event	在DOM模板中，您可以使用ant-design-vue组件的自定义事件（camelCase）

下面使用第3个例子vue-cli3快速使用ant-design-vue组件库

vue-cli-plugin-ant-design

Ant-Design-Vue plugin for @vue/cli 3.0.

创建项目

vue create my-app
cd my-app
vue add ant-design
Vue CLI v3.5.1
┌───────────────────────────┐
│  Update available: 3.7.0  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
> cli3-test (vue-router, vuex, babel)   选择这个回车进入
  default (babel, eslint)
  Manually select features     
E:\vue\ant-design\mytest\my-test>vue add ant-design
📦  Installing vue-cli-plugin-ant-design...
+ vue-cli-plugin-ant-design@1.0.0
added 69 packages in 13.314s
✔  Successfully installed plugin: vue-cli-plugin-ant-design
? How do you want to import Ant-Design-Vue? (Use arrow keys)
> Fully import   //全部导入
  Import on demand
-----
 Choose the locale you want to load zh_CN    //上下方向按钮选择语言包，回车进入

App.vue

//使用官网示例

自定义触发器 #

要使用自定义触发器，可以设置 :trigger="null" 来隐藏默认设定。

<template>
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider :trigger="null" collapsible v-model="collapsed">
<div class="logo"></div>
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
<a-menu-item key="1">
<a-icon type="user"/>
<span>
<router-link to="/home">主页</router-link>
</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera"/>
<span>
<router-link to="/about">关于</router-link>
</span>
</a-menu-item>
<a-menu-item key="3">
<a-icon type="upload"/>
<span>
<router-link to="/rule">rule</router-link>
</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0">
<a-icon
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="()=> collapsed = !collapsed"
/>
</a-layout-header>
<a-layout-content
:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
>
<router-view/>
</a-layout-content>
</a-layout>
</a-layout>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";

export default {
name: "app",
data() {
return {
zh_CN,
collapsed: false
};
}
};
</script>

<style>
#components-layout-demo-custom-trigger {
height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}

#components-layout-demo-custom-trigger a {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #ffffff;
}
::-webkit-scrollbar {
width: 14px;
height: 14px;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-webkit-scrollbar-thumb {
height: 6px;
border-radius: 7px;
border: 4px solid transparent;
background-color: #ddd;
background-clip: padding-box;
}
</style>

About.vue

//npm install --save reqwest 
<template>
<a-table
:columns="columns"
:rowKey="record => record.login.uuid"
:dataSource="data"
:pagination="pagination"
:loading="loading"
@change="handleTableChange"
>
<template slot="name" slot-scope="name">{{name.first}} {{name.last}}</template>
</a-table>
</template>
<script>
import reqwest from "reqwest";
const columns = [
{
title: "Name",
dataIndex: "name",
sorter: true,
width: "20%",
scopedSlots: { customRender: "name" }
},
{
title: "Gender",
dataIndex: "gender",
filters: [
{ text: "Male", value: "male" },
{ text: "Female", value: "female" }
],
width: "20%"
},
{
title: "Email",
dataIndex: "email"
}
];

export default {
mounted() {
this.fetch();
},
data() {
return {
data: [],
pagination: {},
loading: false,
columns
};
},
methods: {
handleTableChange(pagination, filters, sorter) {
console.log(pagination);
const pager = { ...this.pagination };
pager.current = pagination.current;
this.pagination = pager;
this.fetch({
results: pagination.pageSize,
page: pagination.current,
sortField: sorter.field,
sortOrder: sorter.order,
...filters
});
},
fetch(params = {}) {
console.log("params:", params);
this.loading = true;
reqwest({
url: "https://randomuser.me/api",
method: "get",
data: {
results: 10,
...params
},
type: "json"
}).then(data => {
const pagination = { ...this.pagination };
// Read total count from server
// pagination.total = data.totalCount;
pagination.total = 200;
this.loading = false;
this.data = data.results;
this.pagination = pagination;
});
}
}
};
</script>

Home.vue

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
name: 'home',
components: {
HelloWorld
}
}
</script>

Test.vue

<template>
<a-table :columns="columns" :dataSource="data">
<a slot="name" slot-scope="text" href="javascript:;">{{text}}</a>
<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
<span slot="tags" slot-scope="tags">
<a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
</span>
<span slot="action" slot-scope="text, record">
<a href="javascript:;">Invite 一 {{record.name}}</a>
<a-divider type="vertical" />
<a href="javascript:;">Delete</a>
<a-divider type="vertical" />
<a href="javascript:;" class="ant-dropdown-link">
More actions <a-icon type="down" />
</a>
</span>
</a-table>
</template>
<script>
const columns = [{
dataIndex: 'name',
key: 'name',
slots: { title: 'customTitle' },
scopedSlots: { customRender: 'name' },
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
}, {
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
scopedSlots: { customRender: 'tags' },
}, {
title: 'Action',
key: 'action',
scopedSlots: { customRender: 'action' },
}];

const data = [{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
}, {
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
}, {
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
}];
export default {
data() {
return {
data,
columns,
}
}
}
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'index',
component: Home
},
{
path: '/home',
name: 'home',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/Home.vue')
} ,
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
} ,
{
path: '/test',
name: 'test',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/Test.vue')
}
]
})