|
|
|
|
|
# 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.
|
|
|
|
|
|
<div class="pic-plus">
|
|
|
<img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
|
|
|
<span>+</span>
|
|
|
<img width="160" src="https://cn.vuejs.org/images/logo.png">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<style>
|
|
|
.pic-plus > * {
|
|
|
display: inline-block !important;
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
.pic-plus span {
|
|
|
font-size: 30px;
|
|
|
color: #aaa;
|
|
|
margin: 0 20px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
|
|
|
## 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-vue/docs/vue/getting-started-cn/#兼容性))
|
|
|
* Server-side Rendering
|
|
|
|
|
|
## Version
|
|
|
|
|
|
- Stable: [](https://www.npmjs.org/package/ant-design-vue)
|
|
|
|
|
|
You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/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 ant-design-vue --save
|
|
|
```
|
|
|
|
|
|
```bash
|
|
|
$ yarn add ant-design-vue
|
|
|
```
|
|
|
|
|
|
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 `ant-design-vue/dist` in antd's npm package. You can also download these files directly from [](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/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 'ant-design-vue';
|
|
|
Vue.component(DatePicker.name, DatePicker)
|
|
|
```
|
|
|
|
|
|
And import stylesheets manually:
|
|
|
|
|
|
```jsx
|
|
|
import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/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": "ant-design-vue", "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 'ant-design-vue';
|
|
|
```
|
|
|
|
|
|
- Manually import
|
|
|
|
|
|
```jsx
|
|
|
import DatePicker from 'ant-design-vue/lib/date-picker'; // for js
|
|
|
import 'ant-design-vue/lib/date-picker/style/css'; // for css
|
|
|
// import 'ant-design-vue/lib/date-picker/style'; // that will import less
|
|
|
```
|
|
|
|
|
|
|
|
|
## Links
|
|
|
|
|
|
- [Home Page](https://vuecomponent.github.io/ant-design-vue/)
|
|
|
- [Ant Design React](https://ant.design/)
|
|
|
- [Components](https://vuecomponent.github.io/ant-design-vue/docs/react/introduce)
|
|
|
- [Change Log](/ant-design-vue/changelog)
|
|
|
- [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
|
|
- [Customize Theme](/ant-design-vue/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-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/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)
|
