# Ant Design of Vue Following the Ant Design specification, we developed a Vue UI library `antd` that contains a set of high quality components and demos for building rich, interactive user interfaces.
+
## Features - An enterprise-class UI design language for web applications. - A set of high-quality Vue components out of the box. - Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources. ## Environment Support * Modern browsers and Internet Explorer 9+ (with [polyfills](https://vuecomponent.github.io/ant-design/docs/vue/getting-started-cn/#兼容性)) * Server-side Rendering ## Version - Stable: [![npm package](https://img.shields.io/npm/v/vue-antd-ui.svg?style=flat-square)](https://www.npmjs.org/package/vue-antd-ui) You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design/releases.atom ## Installation ### Using npm or yarn **We recommend using npm or yarn to install**,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. ```bash $ npm install vue-antd-ui --save ``` ```bash $ yarn add vue-antd-ui ``` If you are in a bad network environment,you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). > **Using the new features of vue, like `slot-scope`(2.5.0+), `provide / inject`(2.2.0+)** ### Import in Browser Add `script` and `link` tags in your browser and use the global variable `antd`. We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `vue-antd-ui/dist` in antd's npm package. You can also download these files directly from [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-antd-ui/badge)](https://www.jsdelivr.com/package/npm/vue-antd-ui) or [unpkg](https://unpkg.com/vue-antd-ui/dist/). > **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using. > Note: you should import moment before using antd.js. ## Usage ```jsx import Vue from 'vue' import { DatePicker } from 'vue-antd-ui'; Vue.component(DatePicker.name, DatePicker) ``` And import stylesheets manually: ```jsx import 'vue-antd-ui/dist/antd.css'; // or 'vue-antd-ui/dist/antd.less' ``` ### Use modularized antd - Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) ```js // .babelrc or babel-loader option { "plugins": [ ["import", { "libraryName": "vue-antd-ui", "libraryDirectory": "es", "style": "css" }] // `style: true` for less ] } ``` > Note: Don't set `libraryDirectory` if you are using webpack 1. This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets. ```jsx // import js and css modularly, parsed by babel-plugin-import import { DatePicker } from 'vue-antd-ui'; ``` - Manually import ```jsx import DatePicker from 'vue-antd-ui/lib/date-picker'; // for js import 'vue-antd-ui/lib/date-picker/style/css'; // for css // import 'vue-antd-ui/lib/date-picker/style'; // that will import less ``` ## Links - [Home Page](https://vuecomponent.github.io/ant-design/) - [Ant Design React](https://ant.design/) - [Components](https://vuecomponent.github.io/ant-design/docs/react/introduce) - [Change Log](/ant-design/changelog) - [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports - [Customize Theme](/ant-design/docs/vue/customize-theme) ## Contributing If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/vue-antd-issue-helper/). > If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! ## THANK YOU [Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt)