update README.md (#227)

* [bugfix] Checkbox border render error in weixin browser * [bugfix] TreeSelect dependency path error * [bugfix] Swipe should clear autoplay timer when destroyed * [bugfix] Optimize component dependency analyze when build style entry * merge * update yarn.lock * update README.md * update README.md * update README.md * update README.md * update README.md
2025-04-05 19:41:42 +08:00 · 2017-10-20 03:20:19 -05:00 · 2017-10-20 03:20:19 -05:00 · 3092d55fa9
commit 3092d55fa9
parent 1b1b667e93
2 changed files with 150 additions and 10 deletions
--- a/README.md
+++ b/README.md
@ -11,6 +11,18 @@
 
 [访问中文版](./README.zh-CN.md)

+## Features
+
+- Components come from wechat mall business of [YouZan](https://youzan.com)
+- Extensive documentation and demos.
+- Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+- Unit test coverage over 90%
+- Not only have the basic components, but also have a lot of business components
+
+<p align="center">
+  <img alt="feature demo" src="https://img.yzcdn.cn/public_files/2017/09/21/34974ceef63f380373bf3d68ec7907f8.gif">
+</p >
+
 ## Install

 ```shell
@ -18,14 +30,71 @@ npm i -S vant
 ```
 
 ## Quickstart
-See [Quickstart](https://www.youzanyun.com/zanui/vue#/en-US/component/quickstart).
- 
-## How to contribute

+#### 1. Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended)
+```bash
+# Install babel-plugin-import
+npm i babel-plugin-import -D
+```
+
+```js
+// set babel config in .babelrc or babel-loader
+{
+  "plugins": [
+    ["import", { "libraryName": "vant", "style": true }]
+  ]
+}
+```
+
+Then you can import components from vant, equivalent to import manually below.
+
+```js
+import { Button } from 'vant';
+```
+
+#### 2. Manually import
+
+```js
+import { Button } from 'vant/lib/button';
+import 'vant/lib/vant-css/base.css';
+import 'vant/lib/vant-css/button.css';
+```
+ 
+#### 3. Import all components
+
+```js
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/vant-css/index.css';
+
+Vue.use(Vant);
+```
+
+### CDN
+
+```html
+<!-- import style -->
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css" />
+
+<!-- import script --><script></script>
+<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
+```
+
+See more in [Quickstart](https://www.youzanyun.com/zanui/vue#/en-US/component/quickstart).
+ 
+## Contribution
 Please make sure to read the [Contributing Guide](./.github/CONTRIBUTING.md) before making a pull request.

-## Preview
+## Browser Support
+Modern browsers and Android 4.0+, iOS 6+.

+## Links
+- [Documentation](https://www.youzanyun.com/zanui/vue)
+- [Change log](https://www.youzanyun.com/zanui/vue#/en-US/component/changelog)
+- [React UI Zent](https://www.youzanyun.com/zanui/react)
+- [vue-cli-template-vant](https://github.com/youzan/vue-cli-template-vant) 
+ 
+## Preview
 You can scan the following QR code to access the demo：

 ![zanui_vue_mobile_qrcode](https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/zanui_vue_mobile_preview_03.png)
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@ -8,28 +8,99 @@
 <p align="center">A Vue.js 2.0 Mobile UI at YouZan</p>

 [![Build Status](https://travis-ci.org/youzan/vant.svg?branch=master)](https://travis-ci.org/youzan/vant) [![Coverage Status](https://img.shields.io/codecov/c/github/youzan/vant/dev.svg)](https://codecov.io/github/youzan/vant?branch=dev) [![npm version](https://img.shields.io/npm/v/vant.svg?style=flat)](https://www.npmjs.com/package/vant) [![downloads](https://img.shields.io/npm/dt/vant.svg)](https://www.npmjs.com/package/vant) 
+
+## 特性
+
+- 组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱
+- 丰富的文档和Demo
+- 支持 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+- 单元测试覆盖率超过90%
+- 不仅仅有丰富的基础组件，还有许多的业务组件
+
+<p align="center">
+  <img alt="feature demo" src="https://img.yzcdn.cn/public_files/2017/09/21/34974ceef63f380373bf3d68ec7907f8.gif">
+</p >
 
-## 一、安装
+## 安装

 ```shell
 npm i -S vant
 ```
 
-## 二、快速上手
-参考 [Quickstart](https://www.youzanyun.com/zanui/vue#/zh-CN/component/quickstart).
+## 快速上手

-## 三、贡献代码
+#### 方式一. 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (推荐)
+```bash
+# 安装 babel-plugin-import 插件
+npm i babel-plugin-import -D
+```
+
+```js
+// 在 .babelrc 或 babel-loader 中添加插件配置
+{
+  "plugins": [
+    ["import", { "libraryName": "vant", "style": true }]
+  ]
+}
+```
+
+接着你可以在代码中直接引入 Vant 组件，插件会自动将代码转化为方式二中的按需引入形式。
+
+```js
+import { Button } from 'vant';
+```
+
+#### 方式二. 按需引入组件
+
+```js
+import { Button } from 'vant/lib/button';
+import 'vant/lib/vant-css/base.css';
+import 'vant/lib/vant-css/button.css';
+```
+ 
+#### 方式三. 导入所有组件
+
+```js
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/vant-css/index.css';
+
+Vue.use(Vant);
+```
+
+### CDN
+
+```html
+<!-- 引入样式 -->
+<link rel="stylesheet" href="https://unpkg.com/vant/lib/vant-css/index.css">
+
+<!-- 引入组件 --><script></script>
+<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
+```
+
+更多内容请参考 [快速上手](https://www.youzanyun.com/zanui/vue#/zh-CN/component/quickstart).
+
+## 贡献代码

 修改代码请阅读我们的 [开发指南](./.github/CONTRIBUTING.zh-CN.md)。

 使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。

-## 四、手机预览
+## 浏览器支持
+现代浏览器以及 Android 4.0+, iOS 6+.
+
+## 手机预览

 可以手机扫码以下二维码访问手机端demo：

 ![zanui_vue_mobile_qrcode](https://img.yzcdn.cn/v2/image/youzanyun/zanui/pc/zanui_vue_mobile_preview_03.png)
+
+## 链接
+- [详细文档](https://www.youzanyun.com/zanui/vue)
+- [更新日志](https://www.youzanyun.com/zanui/vue#/en-US/component/changelog)
+- [React 组件库 Zent](https://www.youzanyun.com/zanui/react)
+- [vue-cli-template-vant](https://github.com/youzan/vue-cli-template-vant) 
 
-## 五、开源协议
+## 开源协议

 本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。