Ant Design of Vue快速開發網頁

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') } ] })

 

 

最後還有一些不足，後期慢慢修改。