138 lines
4.9 KiB
Markdown
138 lines
4.9 KiB
Markdown
|
||
# 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://vue.ant.design/docs/vue/getting-started/#Compatibility))
|
||
* 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.use(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://vue.ant.design/)
|
||
- [Ant Design React](https://ant.design/)
|
||
- [Components](https://vue.ant.design/docs/vue/introduce)
|
||
- [Change Log](/docs/vue/changelog)
|
||
- [CodeSandbox template](https://codesandbox.io/s/2wpk21kzvr) for bug reports
|
||
- [Customize Theme](/docs/vue/customize-theme)
|
||
- [FAQ](/docs/vue/faq)
|
||
- [Support US](/docs/vue/sponsor)
|
||
- [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome)
|
||
|
||
## 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)
|