Ant Design Vue基于 Ant Design 和 Vue 的 企業(yè)級 UI 組件庫
Ant Design Vue 是使用 Vue 實(shí)現(xiàn)的遵循 Ant Design 設(shè)計(jì)規(guī)范的高質(zhì)量 UI 組件庫，用于開發(fā)和服務(wù)于企業(yè)級中后臺(tái)產(chǎn)品。
特性
-
提煉自企業(yè)級中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。
-
開箱即用的高質(zhì)量 Vue 組件。
-
共享 Ant Design of React 設(shè)計(jì)工具體系。
支持環(huán)境
-
現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）。
-
支持服務(wù)端渲染。
安裝
使用 npm 或 yarn 安裝
我們推薦使用 npm 或 yarn 的方式進(jìn)行開發(fā)，不僅可在開發(fā)環(huán)境輕松調(diào)試，也可放心地在生產(chǎn)環(huán)境打包部署使用，享受整個(gè)生態(tài)圈和工具鏈帶來的諸多好處。
$ npm install ant-design-vue --save
$ yarn add ant-design-vue
如果你的網(wǎng)絡(luò)環(huán)境不佳，推薦使用 cnpm。
組件庫使用了 vue 的新特性
slot-scope(2.5.0新增),provide / inject(2.2.0新增)
瀏覽器引入
在瀏覽器中使用 script 和 link 標(biāo)簽直接引入文件，并使用全局變量 antd。
我們在 npm 發(fā)布包內(nèi)的 ant-design-vue/dist 目錄下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通過 https://www.jsdelivr.com/package/npm/ant-design-vue 或 UNPKG 進(jìn)行下載。
強(qiáng)烈不推薦使用已構(gòu)建文件，這樣無法按需加載，而且難以獲得底層依賴模塊的 bug 快速修復(fù)支持。
注意：引入 antd.js 前你需要自行引入 moment。
示例
import Vue from 'vue'
import { DatePicker } from 'ant-design-vue';
Vue.component(DatePicker.name, DatePicker)
引入樣式：
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'
按需加載
下面兩種方式都可以只加載用到的組件。
-
使用 babel-plugin-import（推薦）。
// .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 會(huì)加載 less 文件 ] }注意：webpack 1 無需設(shè)置
libraryDirectory。然后只需從 ant-design-vue 引入模塊即可，無需單獨(dú)引入樣式。等同于下面手動(dòng)引入的方式。
// babel-plugin-import 會(huì)幫助你加載 JS 和 CSS import { DatePicker } from 'ant-design-vue'; -
手動(dòng)引入
import DatePicker from 'ant-design-vue/lib/date-picker'; // 加載 JS import 'ant-design-vue/lib/date-picker/style/css'; // 加載 CSS // import 'ant-design-vue/lib/date-picker/style'; // 加載 LESS
關(guān)于 ant-design-vue
眾所周知，Ant Design作為一門設(shè)計(jì)語言面世，經(jīng)歷過多年的迭代和積累，它對UI的設(shè)計(jì)思想已經(jīng)成為一套事實(shí)標(biāo)準(zhǔn)，受到眾多前端開發(fā)者及企業(yè)的追捧和喜愛，也是React開發(fā)者手中的神兵利器。希望ant-design-vue能夠讓Vue開發(fā)者也享受到Ant Design的優(yōu)秀設(shè)計(jì)。
ant-design-vue 是 Ant Design 的Vue實(shí)現(xiàn)，組件的風(fēng)格與Ant Design保持同步，組件的html結(jié)構(gòu)和css樣式也保持一致，真正做到了樣式0修改，組件API也盡量保持了一致。
Ant Design Vue 致力于提供給程序員愉悅的開發(fā)體驗(yàn)。