first commit

2024-09-27 00:57:27 +08:00
commit 18df0f5e4b
2548 changed files with 253280 additions and 0 deletions
--- a/vant/.editorconfig
+++ b/vant/.editorconfig
@@ -0,0 +1,23 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+indent_size = 2
+
+[*.vue]
+indent_size = 2
+
+[*.css]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
--- a/vant/.eslintignore
+++ b/vant/.eslintignore
@@ -0,0 +1,4 @@
+es
+lib
+dist
+node_modules
--- a/vant/.github/.pydio
+++ b/vant/.github/.pydio
@@ -0,0 +1 @@
+feb5e4e1-a588-4699-9fa8-169f3165ecdd
--- a/vant/.github/CONTRIBUTING.md
+++ b/vant/.github/CONTRIBUTING.md
@@ -0,0 +1,45 @@
+# Contributing to Vant
+
+The following is a set of guidelines for contributing to Vant. Please spend several minutes in reading these guidelines before you create an issue or pull request.
+
+Anyway, these are just guidelines, not rules, use your best judgment and feel free to propose changes to this document in a pull request.
+
+## Opening an Issue
+
+If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been reported or fixed. You can search through existing issues and PRs to see if someone has reported one similar to yours.
+
+Next, create a new issue that briefly explains the problem, and provides a bit of background as to the circumstances that triggered it, and steps to reproduce it.
+
+## Submitting a Pull Request
+
+It's welcomed to pull request, And there are some tips about that:
+
+- Before working on a large change, it is best to open an issue first to discuss it with the maintainers.
+
+- When in doubt, keep your pull requests small. To give a PR the best chance of getting accepted, don't bundle more than one feature or bug fix per pull request. It's always best to create two smaller PRs than one big one.
+
+- When adding new features or modifying existing, please attempt to include tests to confirm the new behaviour.
+
+- Rebase before creating a PR to keep commit history clear.
+
+- Add some descriptions and refer relative issues for you PR.
+
+## Getting started
+
+```bash
+git clone git@github.com:youzan/vant.git
+
+cd vant
+
+npm run bootstrap
+
+npm run dev
+
+# open http://localhost:8080
+```
+
+## Contribute from the browser with a single click
+
+You can use gitpod (A free online IDE) with a single click it will launch a ready to code workspace with dependencies pre-installed and the web server running so that you don't have to waste any time on the dev setup and start contributing straight away.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/youzan/vant)
--- a/vant/.github/ISSUE_TEMPLATE.md
+++ b/vant/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,9 @@
+你好，请使用下面的链接创建 issue 以帮助我们更快的排查问题，不规范的 issue 会被关闭，感谢配合。
+
+https://youzan.github.io/vant-issue-generater
+
+---
+
+Please use the link below to create a new issue, the non-standard issue will be closed.
+
+https://youzan.github.io/vant-issue-generater
--- a/vant/.github/PULL_REQUEST_TEMPLATE.md
+++ b/vant/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,30 @@
+### Before submitting a pull request, please make sure the following is done:
+
+1. Read the [contributing guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md).
+2. If you've added code that should be tested, add tests.
+3. If you've changed APIs, update the documentation.
+4. Ensure the test suite passes (`npm test`).
+
+#### Title Format
+
+type(ComponentName?)：commit message
+
+Example：
+
+- docs: fix typo in quickstart
+- build: optimize build speed
+- fix(Button): incorrect style
+- feat(Button): add color prop
+
+Allowed Types:
+
+- fix
+- feat
+- docs
+- perf
+- test
+- types
+- build
+- chore
+- refactor
+- breaking change
--- a/vant/.github/workflows/.pydio
+++ b/vant/.github/workflows/.pydio
@@ -0,0 +1 @@
+0b39112d-5550-4d22-aea6-7f7930c6651c
--- a/vant/.github/workflows/test.yml
+++ b/vant/.github/workflows/test.yml
@@ -0,0 +1,51 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+
+    - name: Install dependencies
+      uses: bahmutov/npm-install@v1
+
+    - name: Run linter
+      run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+
+    - name: Install dependencies
+      uses: bahmutov/npm-install@v1
+
+    - name: Run test cases
+      run: npm test
+
+    - name: Upload coverage to Codecov  
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '12.x'
+
+    - name: Install dependencies
+      uses: bahmutov/npm-install@v1
+
+    - name: Build
+      run: npm run build
--- a/vant/.gitignore
+++ b/vant/.gitignore
@@ -0,0 +1,18 @@
+*.log*
+.cache
+.DS_Store
+.idea
+.vscode
+
+# npm
+node_modules
+package-lock.json
+
+# dist file
+es
+lib
+dist
+/site
+changelog.generated.md
+test/coverage
+vetur
--- a/vant/.gitpod.yml
+++ b/vant/.gitpod.yml
@@ -0,0 +1,6 @@
+tasks:
+  - init: npm run bootstrap
+    command: npm run dev
+ports:
+  - port: 8080
+    onOpen: open-preview
--- a/vant/.pydio
+++ b/vant/.pydio
@@ -0,0 +1 @@
+9cf0dc5c-134e-46ef-9b35-8c9aa2e2f9f1
--- a/vant/LICENSE
+++ b/vant/LICENSE
@@ -0,0 +1,7 @@
+Copyright 2016-present Youzan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/vant/README.md
+++ b/vant/README.md
@@ -0,0 +1,97 @@
+<p align="center">
+    <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" height="120" style="margin-bottom: 10px;">
+</p>
+
+<h3 align="center" style="margin: 30px 0 35px;">Mobile UI Components built on Vue</h3>
+
+<p align="center">
+    <img src="https://img.shields.io/npm/v/vant.svg?style=flat-square" alt="npm version" />
+    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square" alt="Coverage Status" />
+    <img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
+    <img src="https://img.shields.io/npm/dt/vant.svg?style=flat-square" alt="downloads" />
+    <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square" alt="downloads" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
+</p>
+
+<p align="center">
+  🔥 <a href="https://youzan.github.io/vant">文档网站</a>
+  &nbsp;
+  🇨🇳 <a href="./README.zh-CN.md">中文版介绍</a>
+  &nbsp;
+  🚀 <a href="https://github.com/youzan/vant-weapp" target="_blank">小程序版</a>
+</p>
+
+---
+
+## Features
+
+* 60+ Reusable components
+* 90% Unit test coverage
+* Extensive documentation and demos
+* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+* Support Custom Theme
+* Support i18n
+* Support TS
+* Support SSR
+
+## Install
+
+```bash
+# Using npm
+npm i vant -S
+
+# Using yarn
+yarn add vant
+```
+
+## Quickstart
+
+```js
+import Vue from 'vue';
+import { Button } from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Button);
+```
+
+See more in [Quickstart](https://youzan.github.io/vant#/en-US/quickstart).
+
+## Contribution
+
+Please make sure to read the [Contributing Guide](./.github/CONTRIBUTING.md) before making a pull request.
+
+## Browser Support
+
+Modern browsers and Android 4.0+, iOS 8.0+.
+
+## Ecosystem
+
+| Project | Description |
+|-----|------|
+| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI  |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+
+## Links
+
+* [Documentation](https://youzan.github.io/vant)
+* [Changelog](https://youzan.github.io/vant#/en-US/changelog)
+
+## Preview
+
+You can scan the following QR code to access the demo：
+
+<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >
+
+## Wechat Group
+
+Scan the qrcode to join our wechat discussion group, please note that you want to join Vant discussion group.
+
+<img src="https://img.yzcdn.cn/vant/wechat_20180606.png" width="220" height="292" >
+
+## LICENSE
+
+[MIT](https://en.wikipedia.org/wiki/MIT_License)
--- a/vant/README.zh-CN.md
+++ b/vant/README.zh-CN.md
@@ -0,0 +1,111 @@
+<p align="center">
+    <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center" style="margin: 30px 0 35px;">轻量、可靠的移动端 Vue 组件库</h3>
+
+<p align="center">
+    <img src="https://img.shields.io/npm/v/vant.svg?style=flat-square" alt="npm version" />
+    <img src="https://img.shields.io/codecov/c/github/youzan/vant/dev.svg?style=flat-square" alt="Coverage Status" />
+    <img src="https://travis-ci.org/youzan/vant.svg?branch=master" alt="Build Status" />
+    <img src="https://img.shields.io/npm/dt/vant.svg?style=flat-square" alt="downloads" />
+    <img src="https://img.shields.io/npm/dm/vant.svg?style=flat-square" alt="downloads" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/vant.min.js?compression=gzip&style=flat-square&label=JS%20gzip%20size" alt="JS Gzip Size" />
+    <img src="https://img.badgesize.io/https://unpkg.com/vant/lib/index.css?compression=gzip&style=flat-square&label=CSS%20gzip%20size" alt="CSS Gzip Size" />
+</p>
+
+<p align="center">
+  🔥 <a href="https://youzan.github.io/vant">文档网站</a>
+  &nbsp;
+  🚀 <a href="https://github.com/youzan/vant-weapp" target="_blank">小程序版</a>
+</p>
+
+---
+
+## 特性
+
+* 60+ 高质量组件
+* 90% 单元测试覆盖率
+* 完善的中英文文档和示例
+* 支持按需引入
+* 支持主题定制
+* 支持国际化
+* 支持 TS
+* 支持 SSR
+
+## 安装
+
+```bash
+# 通过 npm 安装
+npm i vant -S
+
+# 通过 yarn 安装
+yarn add vant
+```
+
+## 快速上手
+
+```js
+import Vue from 'vue';
+import { Button } from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Button);
+```
+
+vant 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://youzan.github.io/vant#/zh-CN/quickstart).
+
+## 贡献代码
+
+修改代码请阅读我们的 [开发指南](https://youzan.github.io/vant/#/zh-CN/contribution)。
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)。
+
+## 浏览器支持
+
+现代浏览器以及 Android 4.0+, iOS 8.0+.
+
+## 加入我们
+
+**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。
+
+我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：
+
+<img src="https://img.yzcdn.cn/public_files/2019/07/22/f4b70763c55c8710c52c667ecf192c05.jpeg" width="320" height="303">
+
+我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！
+
+- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
+- <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
+- <a target="_blank" href="https://github.com/youzan">开源项目</a>
+
+## 生态
+
+| 项目 | 描述 |
+|-----|------|
+| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+
+## 链接
+
+* [详细文档](https://youzan.github.io/vant)
+* [更新日志](https://youzan.github.io/vant#/zh-CN/changelog)
+* [码云镜像](https://gitee.com/organizations/vant-contrib)
+
+## 手机预览
+
+可以手机扫码以下二维码访问手机端 demo：
+
+<img src="https://img.yzcdn.cn/vant/preview_qrcode_20180528.png" width="220" height="220" >
+
+## 微信讨论群
+
+欢迎大家加入 Vant 交流群一起讨论，添加下方微信并注明『加入 Vant 交流群』即可
+
+<img src="https://img.yzcdn.cn/vant/wechat_20180606.png" width="220" height="292" >
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
--- a/vant/babel.config.js
+++ b/vant/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vant/cli/preset'],
+};
--- a/vant/docs/.pydio
+++ b/vant/docs/.pydio
@@ -0,0 +1 @@
+5af413d9-b879-423d-a279-c7647dec8085
--- a/vant/docs/assets/.pydio
+++ b/vant/docs/assets/.pydio
@@ -0,0 +1 @@
+1b618829-90e7-4a44-9eec-fd0404b8e2e9
--- a/vant/docs/assets/design.sketch
+++ b/vant/docs/assets/design.sketch
--- a/vant/docs/assets/logo.sketch
+++ b/vant/docs/assets/logo.sketch
--- a/vant/docs/assets/nav-logo.sketch
+++ b/vant/docs/assets/nav-logo.sketch
--- a/vant/docs/markdown/.pydio
+++ b/vant/docs/markdown/.pydio
@@ -0,0 +1 @@
+a771d393-31ea-4cf5-aede-b37c97a20464
--- a/vant/docs/markdown/changelog.en-US.md
+++ b/vant/docs/markdown/changelog.en-US.md
--- a/vant/docs/markdown/changelog.zh-CN.md
+++ b/vant/docs/markdown/changelog.zh-CN.md
--- a/vant/docs/markdown/contribution.zh-CN.md
+++ b/vant/docs/markdown/contribution.zh-CN.md
@@ -0,0 +1,95 @@
+# 开发指南
+
+### 介绍
+
+感谢你使用 Vant。
+
+以下是关于向 Vant 提交反馈或代码的指南。在向 Vant 提交 issue 或者 PR 之前，请先花几分钟时间阅读以下文字。
+
+### Issue 规范
+
+- 遇到问题时，请先确认这个问题是否已经在 issue 中有记录或者已被修复
+- 提 issue 时，请用简短的语言描述遇到的问题，并添加出现问题时的环境和复现步骤
+
+## 参与开发
+
+### 本地开发
+
+按照下面的步骤操作，即可在本地开发 Vant 组件
+
+```bash
+# 克隆仓库
+git clone git@github.com:youzan/vant.git
+
+# 安装依赖
+cd vant && npm run bootstrap
+
+# 进入开发模式，浏览器访问 http://localhost:8080
+npm run dev
+```
+
+### 目录结构
+
+- 仓库的组件代码位于 src 下，每个组件一个文件夹
+- docs 目录下是文档网站的代码，本地开发时可以在目录下运行 npm run dev 开启文档网站
+
+项目主要目录如下：
+
+```
+vant
+├─ build     # 构建
+├─ docs      # 文档
+├─ src       # 组件
+├─ packages  # 子包
+├─ test      # 单测
+└─ types     # 类型
+```
+
+### 添加新组件
+
+添加新组件时，请按照下面的目录结构组织文件，并在 `vant.config.js` 中配置组件名称
+
+```
+src
+└─ button
+   ├─ demo             # 示例代码
+   ├─ test             # 单元测试
+   ├─ index.js         # 组件入口
+   ├─ index.less       # 组件样式
+   ├─ README.md        # 英文文档
+   └─ README.zh-CN.md  # 中文文档
+```
+
+## 提交 PR
+
+### Pull Request 规范
+
+- 如果遇到问题，建议保持你的 PR 足够小。保证一个 PR 只解决一个问题或只添加一个功能
+- 当新增组件或者修改原有组件时，记得增加或者修改测试代码，保证代码的稳定
+- 在 PR 中请添加合适的描述，并关联相关的 Issue
+
+### Pull Request 流程
+
+1. fork 主仓库，如果已经 fork 过，请同步主仓库的最新代码
+2. 基于 fork 后仓库的 dev 分支新建一个分支，比如`feature/button_color`
+3. 在新分支上进行开发，开发完成后，提 Pull Request 到主仓库的 dev 分支
+4. Pull Request 会在 Review 通过后被合并到主仓库
+5. 等待 Vant 发布版本，一般是每周一次
+
+### 同步最新代码
+
+提 Pull Request 前，请依照下面的流程同步主仓库的最新代码
+
+```bash
+# 添加主仓库到 remote，作为 fork 后仓库的上游仓库
+git remote add upstream https://github.com/youzan/vant.git
+
+# 拉取主仓库最新代码
+git fetch upstream
+
+# 切换至 dev 分支
+git checkout dev
+
+# 合并主仓库代码
+git merge upstream/dev
+```
--- a/vant/docs/markdown/design.zh-CN.md
+++ b/vant/docs/markdown/design.zh-CN.md
@@ -0,0 +1,43 @@
+# 设计资源
+
+### 介绍
+
+这里提供了 Vant 现有的设计资源，更多资源还在整理中。
+
+### 组件
+
+包含 Sketch 格式的组件设计规范、色彩规范。
+
+<img src="https://img.yzcdn.cn/vant/design-components-0321.png" style="width: 80%;">
+
+<a class="design-download" href="https://github.com/youzan/vant/blob/dev/docs/assets/design.sketch?raw=true">下载</a>
+
+> 提示：目前 Sketch 中部分组件仍为旧版样式，我们正在梳理新版设计规范，尽请期待！
+
+### 图标
+
+包含 Sketch 格式的图标库资源。
+
+<img src="https://img.yzcdn.cn/vant/design-icons-0321.png" style="width: 80%;">
+
+<a class="design-download" href="https://github.com/youzan/vant-icons/blob/master/assets/icons.sketch?raw=true">下载</a>
+
+<style>
+a.design-download {
+  display: inline-block;
+  width: 100px;
+  color: #fff;
+  line-height: 40px;
+  text-align: center;
+  background-color: #38f;
+  border-radius: 3px;
+}
+
+a.design-download:hover {
+  opacity: .9;
+}
+
+a.design-download:active {
+  opacity: .7;
+}
+</style>
--- a/vant/docs/markdown/home.en-US.md
+++ b/vant/docs/markdown/home.en-US.md
@@ -0,0 +1,49 @@
+<div class="card">
+  <div class="van-doc-intro">
+    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
+    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
+    <p>Mobile UI Components built on Vue</p>
+  </div>
+</div>
+
+### Features
+
+* 60+ Reusable components
+* 90% Unit test coverage
+* Extensive documentation and demos
+* Support [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)
+* Support Custom Theme
+* Support i18n
+* Support TS
+* Support SSR
+
+### Quickstart
+
+See in [Quickstart](#/en-US/quickstart).
+
+### Contribution
+
+Please make sure to read the [Contributing Guide](https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.md) before making a pull request.
+
+### Browser Support
+
+Modern browsers and Android 4.0+, iOS 8.0+.
+
+### Ecosystem
+
+| Project | Description |
+|-----|------|
+| [vant-demo](https://github.com/youzan/vant-demo) | Official vant demo collection |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | WeChat MiniProgram UI  |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | Scaffold for UI library |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant icons |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | Using vant in desktop browsers |
+
+### Links
+
+* [Feedback](https://github.com/youzan/vant/issues)
+* [Changelog](#/en-US/changelog)
+
+### LICENSE
+
+[MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89)
--- a/vant/docs/markdown/home.zh-CN.md
+++ b/vant/docs/markdown/home.zh-CN.md
@@ -0,0 +1,66 @@
+<div class="card">
+  <div class="van-doc-intro">
+    <img class="van-doc-intro__logo" style="width: 120px; height: 120px;" src="https://img.yzcdn.cn/vant/logo.png">
+    <h2 style="margin: 0; font-size: 36px; line-height: 60px;">Vant</h2>
+    <p>轻量、可靠的移动端 Vue 组件库</p>
+  </div>
+</div>
+
+### 特性
+
+* 60+ 高质量组件
+* 90% 单元测试覆盖率
+* 完善的中英文文档和示例
+* 支持按需引入
+* 支持主题定制
+* 支持国际化
+* 支持 TS
+* 支持 SSR
+
+### 快速上手
+
+请参考 [快速上手](#/zh-CN/quickstart) 章节
+
+### 贡献代码
+
+修改代码请阅读我们的 [开发指南](#/zh-CN/contribution)
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/youzan/vant/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/youzan/vant/pulls)
+
+### 浏览器支持
+
+现代浏览器以及 Android 4.0+, iOS 8.0+
+
+### 加入我们
+
+**有赞前端团队**是由一群年轻、皮实、对技术饱含热情的小伙伴组成的，目前共有 100 多名前端工程师，分布在业务中台、电商、零售、美业、资产、赋能等业务线。
+
+我们热爱分享和开源，崇尚用工程师的方式解决问题，因此造了很多工具来解决我们遇到的问题，目前我们维护的开源产品有：
+
+<img src="https://img.yzcdn.cn/public_files/2019/07/22/f4b70763c55c8710c52c667ecf192c05.jpeg" style="width: 320px; height: 303px;">
+
+我们正在寻找更多优秀的小伙伴，一起拓展前端技术的边界，期待你的加入！
+
+- <a target="_blank" href="https://app.mokahr.com/apply/youzan/6252#/job/96f5d2c7-e657-4d31-9244-195edc443a7f?_k=jf2141">职位详情</a>（Base: 杭州/深圳）
+- <a target="_blank" href="https://tech.youzan.com/tag/front-end/">团队博客</a>
+- <a target="_blank" href="https://github.com/youzan">开源项目</a>
+
+### 生态
+
+| 项目 | 描述 |
+|-----|------|
+| [vant-demo](https://github.com/youzan/vant-demo) | Vant 官方示例合集 |
+| [vant-weapp](https://github.com/youzan/vant-weapp) | 微信小程序组件库 |
+| [vant-cli](https://github.com/youzan/vant/tree/dev/packages/vant-cli) | 开箱即用的组件库搭建工具 |
+| [vant-icons](https://github.com/youzan/vant/tree/dev/packages/vant-icons) | Vant 图标库 |
+| [vant-touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator) | 在桌面端使用 Vant 的辅助库 |
+
+### 链接
+
+* [意见反馈](https://github.com/youzan/vant/issues)
+* [更新日志](#/zh-CN/changelog)
+* [码云镜像](https://gitee.com/organizations/vant-contrib)
+
+### 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源
--- a/vant/docs/markdown/quickstart.en-US.md
+++ b/vant/docs/markdown/quickstart.en-US.md
@@ -0,0 +1,143 @@
+# Quickstart
+
+### Starter kit
+
+We recomment to use [Vue Cli](https://cli.vuejs.org/zh/) to create a project.
+
+```bash
+# Install Vue Cli
+npm install -g @vue/cli
+
+# Create a project
+vue create hello-world
+
+# Open GUI
+vue ui
+```
+
+![](https://img.yzcdn.cn/vant/vue-cli-demo-201809030812.png)
+
+In the GUI, click on 'Dependencies' -> `Install Dependencies` and add `vant` to the dependencies.
+
+### Install
+
+```bash
+# Using npm
+npm i vant -S
+
+# Using yarn
+yarn add vant
+```
+
+## Usage
+
+### 1. Import on demand
+
+Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to import components on demand
+
+```bash
+# Install plugin
+npm i babel-plugin-import -D
+```
+
+```js
+// set babel config in .babelrc or babel-loader
+// Note: Don't set libraryDirectory if you are using webpack 1.
+{
+  "plugins": [
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
+  ]
+}
+
+// For users who use babel7, that can be configured in babel.config.js
+module.exports = {
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
+  ]
+};
+```
+
+```js
+// Then you can import components from vant
+import { Button } from 'vant';
+```
+
+> If you are using TypeScript，please use [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) instead
+
+### 2. Manually import
+
+```js
+import Button from 'vant/lib/button';
+import 'vant/lib/button/style';
+```
+ 
+### 3. Import all components
+
+```js
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);
+```
+
+> If you configured babel-plugin-import, you won't be allowed to import all components.
+
+### 4. CDN
+
+The easiest way to use Vant is to include a CDN link in the html file, after which you can access all components via the global variable `vant`.
+
+```html
+<!-- import style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
+
+<!-- import script -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
+
+<script>
+  // Render the Button component
+  new Vue({
+    el: '#app',
+    template: `<van-button>Button</van-button>`
+  });
+
+  // Call function component
+  vant.Toast('Message');
+</script>
+```
+
+## Other
+
+### Rem units
+
+Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`.
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
+- [lib-flexible](https://github.com/amfe/lib-flexible)
+
+#### PostCSS Config
+
+postcss config example:
+
+```js
+module.exports = {
+  plugins: {
+    'autoprefixer': {
+      browsers: ['Android >= 4.0', 'iOS >= 8']
+    },
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    }
+  }
+}
+```
--- a/vant/docs/markdown/quickstart.zh-CN.md
+++ b/vant/docs/markdown/quickstart.zh-CN.md
@@ -0,0 +1,218 @@
+# 快速上手
+
+### 脚手架
+
+在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 [Vue Cli](https://cli.vuejs.org/zh/) 创建项目
+
+```bash
+# 安装 Vue Cli
+npm install -g @vue/cli
+
+# 创建一个项目
+vue create hello-world
+
+# 创建完成后，可以通过命令打开图形化界面，如下图所示
+vue ui
+```
+
+![](https://img.yzcdn.cn/vant/vue-cli-demo-201809032000.png)
+
+在图形化界面中，点击`依赖` -> `安装依赖`，然后将 `vant` 添加到依赖中即可。
+
+### 通过 npm 安装
+
+在现有项目中使用 Vant 时，可以通过`npm`或`yarn`安装
+
+```bash
+# 通过 npm 安装
+npm i vant -S
+
+# 通过 yarn 安装
+yarn add vant
+```
+
+### 示例工程
+
+我们提供了一个基于 Vue Cli 的[示例工程](https://github.com/youzan/vant-demo)，示例工程会帮助你了解如下内容：
+
+- 基于 Vant 搭建单页面应用，配置按需引入组件
+- 配置基于 Rem 的适配方案
+- 配置基于 Viewport 的适配方案
+- 配置基于 TypeScript 的工程
+- 配置自定义主题色方案
+
+
+## 引入组件
+
+### 方式一. 自动按需引入组件 (推荐)
+
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
+
+```bash
+# 安装插件
+npm i babel-plugin-import -D
+```
+
+```js
+// 在.babelrc 中添加配置
+// 注意：webpack 1 无需设置 libraryDirectory
+{
+  "plugins": [
+    ["import", {
+      "libraryName": "vant",
+      "libraryDirectory": "es",
+      "style": true
+    }]
+  ]
+}
+
+// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
+module.exports = {
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
+  ]
+};
+```
+
+```js
+// 接着你可以在代码中直接引入 Vant 组件
+// 插件会自动将代码转化为方式二中的按需引入形式
+import { Button } from 'vant';
+```
+
+> 如果你在使用 TypeScript，可以使用 [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin) 实现按需引入
+
+### 方式二. 手动按需引入组件
+
+在不使用插件的情况下，可以手动引入需要的组件
+
+```js
+import Button from 'vant/lib/button';
+import 'vant/lib/button/style';
+```
+
+### 方式三. 导入所有组件
+
+Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法
+
+```js
+import Vue from 'vue';
+import Vant from 'vant';
+import 'vant/lib/index.css';
+
+Vue.use(Vant);
+```
+
+> 配置按需引入后，将不允许直接导入所有组件
+
+### 方式四. 通过 CDN 引入
+
+使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量`vant`访问到所有组件。
+
+```html
+<!-- 引入样式文件 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">
+
+<!-- 引入 Vue 和 Vant 的 JS 文件 -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
+
+<script>
+// 在 #app 标签下渲染一个按钮组件
+new Vue({
+  el: '#app',
+  template: `<van-button>按钮</van-button>`
+});
+
+// 调用函数组件，弹出一个 Toast
+vant.Toast('提示');
+</script>
+```
+
+## 进阶用法
+
+### Rem 适配
+
+Vant 中的样式默认使用`px`作为单位，如果需要使用`rem`单位，推荐使用以下两个工具：
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 是一款 postcss 插件，用于将单位转化为 rem
+- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值
+
+#### PostCSS 配置
+
+下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改
+
+```js
+module.exports = {
+  plugins: {
+    'autoprefixer': {
+      browsers: ['Android >= 4.0', 'iOS >= 8']
+    },
+    'postcss-pxtorem': {
+      rootValue: 37.5,
+      propList: ['*']
+    }
+  }
+}
+```
+
+> 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译
+
+### 在桌面端使用
+
+Vant 是一个面向移动端的组件库，因此默认只适配了移动端设备，这意味着组件只监听了移动端的`touch`事件，没有监听桌面端的`mouse`事件。
+
+如果你需要在桌面端使用 Vant，可以引入我们提供的 [@vant/touch-emulator](https://github.com/youzan/vant/tree/dev/packages/vant-touch-emulator)，这个库会在桌面端自动将`mouse`事件转换成对应的`touch`事件，使得组件能够在桌面端使用。
+
+```bash
+# 安装模块
+npm i @vant/touch-emulator -S
+```
+
+```js
+// 引入模块后自动生效
+import '@vant/touch-emulator';
+```
+
+### 底部安全区适配
+
+iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。Vant 中部分组件提供了`safe-area-inset-bottom`属性，设置该属性后，即可在对应的机型上开启适配，如下示例：
+
+```html
+<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+
+<!-- 开启 safe-area-inset-bottom 属性 -->
+<van-number-keyboard safe-area-inset-bottom />
+```
+
+<img src="https://b.yzcdn.cn/vant/safearea.png" style="margin-top: 30px;">
+
+### 组件实例方法
+
+Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 [ref](https://cn.vuejs.org/v2/api/#ref) 来注册组件引用信息，引用信息将会注册在父组件的`$refs`对象上。注册完成后，我们可以通过`this.$refs.xxx`访问到对应的组件实例，并调用上面的实例方法。
+
+```html
+<!-- 将该组件绑定到 this.$refs.checkbox 上 -->
+<van-checkbox v-model="checked" ref="checkbox">
+  复选框
+</van-checkbox>
+```
+
+```js
+export default {
+  data() {
+    return {
+      checked: false
+    };
+  },
+  // 注意：组件挂载后才能访问到 ref 对象
+  mounted() {
+    this.$refs.checkbox.toggle();
+  }
+}
+```
--- a/vant/docs/markdown/style-guide.zh-CN.md
+++ b/vant/docs/markdown/style-guide.zh-CN.md
@@ -0,0 +1,226 @@
+# 风格指南
+
+### 介绍
+
+在参与 Vant 开发时，请遵守约定的单文件组件风格指南，指南内容节选自 [Vue 官方风格指南](https://cn.vuejs.org/v2/style-guide)。
+
+### 组件数据
+
+组件的 data 必须是一个函数。
+
+```js
+// bad
+export default {
+  data: {
+    foo: 'bar'
+  }
+}
+
+// good
+export default {
+  data () {
+    return {
+      foo: 'bar'
+    }
+  }
+}
+```
+
+### 单文件组件文件名称
+
+单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
+
+```
+// bad
+mycomponent.vue
+myComponent.vue
+
+// good
+my-component.vue
+MyComponent.vue
+```
+
+### 紧密耦合的组件名
+
+和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
+
+```
+// bad
+components/
+|- TodoList.vue
+|- TodoItem.vue
+└─ TodoButton.vue
+
+// good
+components/
+|- TodoList.vue
+|- TodoListItem.vue
+└─ TodoListItemButton.vue
+```
+
+### 自闭合组件
+
+在单文件组件中没有内容的组件应该是自闭合的。
+
+```html
+<!-- bad -->
+<my-component></my-component>
+
+<!-- good -->
+<my-component />
+```
+
+### Prop 名大小写
+
+在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case。
+
+```js
+// bad
+export default {
+  props: {
+    'greeting-text': String
+  }
+};
+
+// good
+export default {
+  props: {
+    greetingText: String
+  }
+}
+```
+
+```html
+<!-- bad -->
+<welcome-message greetingText="hi" />
+
+<!-- good -->
+<welcome-message greeting-text="hi" />
+```
+
+### Props 换行
+
+多个 Props 的元素应该分多行撰写，每个 Props 一行，闭合标签单起一行。
+
+```html
+<!-- bad -->
+<my-component foo="a" bar="b" baz="c" />
+
+<!-- good -->
+<my-component
+  foo="a"
+  bar="b"
+  baz="c"
+/>
+```
+
+### 指令缩写
+
+指令缩写，用 `:` 表示 `v-bind:` ，用 `@` 表示 `v-on:`
+
+```html
+<!-- bad -->
+<input
+  v-bind:value="value"
+  v-on:input="onInput"
+>
+
+<!-- good -->
+<input
+  :value="value"
+  @input="onInput"
+>
+```
+
+### Props 顺序
+
+标签的 Props 应该有统一的顺序，依次为指令、属性和事件。
+
+```html
+<my-component
+  v-if="if"
+  v-show="show"
+  v-model="value"
+  ref="ref"
+  :key="key"
+  :text="text"
+  @input="onInput"
+  @change="onChange"
+/>
+```
+
+### 组件选项的顺序
+
+组件选项应该有统一的顺序。
+
+```js
+export default {
+  name: '',
+
+  mixins: [],
+
+  components: {},
+
+  props: {},
+
+  data() {},
+
+  computed: {},
+
+  watch: {},
+
+  created() {},
+
+  mounted() {},
+
+  destroyed() {},
+
+  methods: {}
+};
+```
+
+### 组件选项中的空行
+
+组件选项较多时，建议在属性之间添加空行。
+
+```js
+export default {
+  computed: {
+    formattedValue() {
+      // ...
+    },
+
+    styles() {
+      // ...
+    }
+  },
+
+  methods: {
+    onInput() {
+      // ...
+    },
+
+    onChange() {
+      // ...
+    }
+  }
+};
+```
+
+### 单文件组件顶级标签的顺序
+
+单文件组件应该总是让顶级标签的顺序保持一致，且标签之间留有空行。
+
+```html
+<template>
+...
+</template>
+
+<script>
+/* ... */
+</script>
+
+<style>
+/* ... */
+</style>
+```
--- a/vant/docs/markdown/theme.en-US.md
+++ b/vant/docs/markdown/theme.en-US.md
@@ -0,0 +1,88 @@
+# Custom Theme
+
+### Intro
+
+Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
+
+### Less variables
+
+Vant use [Less](http://lesscss.org/) as css preprocessor，you can modify less variables to custom theme.
+
+There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
+
+```less
+// Component Colors
+@text-color: #323233;
+@border-color: #ebedf0;
+@active-color: #f2f3f5;
+@background-color: #f7f8fa;
+@background-color-light: #fafafa;
+```
+
+## How to custom theme
+
+
+### Step 1: import less file
+
+First you should import the less source file to your project. you can use babel-plugin-import to automatically import or just manually import less file.
+
+#### Automatically import style
+
+Configure babel plugin in babel.config.js, if you are using babel6, please manually import less file.
+
+```js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        // specify less file path
+        style: name => `${name}/style/less`
+      },
+      'vant'
+    ]
+  ]
+};
+```
+
+#### Manually import style
+
+```js
+// import all styles
+import 'vant/lib/index.less';
+
+// import style of single component
+import 'vant/lib/button/style/less';
+```
+
+### Step 2: modify less variables
+
+Use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to modify less variables，webpack config for reference:
+
+```js
+// webpack.config.js
+module.exports = {
+  rules: [
+    {
+      test: /\.less$/,
+      use: [
+        // ...other loaders
+        {
+          loader: 'less-loader',
+          options: {
+            modifyVars: {
+              // overide with less vars
+              'text-color': '#111',
+              'border-color': '#eee'
+              // or override with less file
+              'hack': `true; @import "your-less-file-path.less";`
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+```
--- a/vant/docs/markdown/theme.zh-CN.md
+++ b/vant/docs/markdown/theme.zh-CN.md
@@ -0,0 +1,91 @@
+# 定制主题
+
+### 介绍
+
+Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
+
+### 示例工程
+
+我们提供了一个基于 Vue Cli 3 的示例工程，仓库地址为 [Vant Demo](https://github.com/youzan/vant-demo)，其中包含了定制主题的基本配置，可以作为参考。
+
+### 样式变量
+
+Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
+
+下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
+
+```less
+// Component Colors
+@text-color: #323233;
+@border-color: #ebedf0;
+@active-color: #f2f3f5;
+@background-color: #f7f8fa;
+@background-color-light: #fafafa;
+```
+
+## 定制方法
+
+### 步骤一 引入样式源文件
+
+定制主题时，需要引入组件对应的 Less 样式文件，支持按需引入和手动引入两种方式。
+
+#### 按需引入样式（推荐）
+
+在 babel.config.js 中配置按需引入样式源文件，注意 babel6 不支持按需引入样式，请手动引入样式
+
+```js
+module.exports = {
+  plugins: [
+    [
+      'import',
+      {
+        libraryName: 'vant',
+        libraryDirectory: 'es',
+        // 指定样式路径
+        style: name => `${name}/style/less`
+      },
+      'vant'
+    ]
+  ]
+};
+```
+
+#### 手动引入样式
+
+```js
+// 引入全部样式
+import 'vant/lib/index.less';
+
+// 引入单个组件样式
+import 'vant/lib/button/style/less';
+```
+
+### 步骤二 修改样式变量
+
+使用 Less 提供的 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 即可对变量进行修改，下面是参考的 webpack 配置。
+
+```js
+// webpack.config.js
+module.exports = {
+  rules: [
+    {
+      test: /\.less$/,
+      use: [
+        // ...其他 loader 配置
+        {
+          loader: 'less-loader',
+          options: {
+            modifyVars: {
+              // 直接覆盖变量
+              'text-color': '#111',
+              'border-color': '#eee'
+              // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+              'hack': `true; @import "your-less-file-path.less";`
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+```
--- a/vant/docs/site/.pydio
+++ b/vant/docs/site/.pydio
@@ -0,0 +1 @@
+bad4b826-f174-4d93-a5c8-1c6cd7da8261
--- a/vant/docs/site/mobile.js
+++ b/vant/docs/site/mobile.js
@@ -0,0 +1,130 @@
+import Vue from 'vue';
+import Locale from '../../src/locale';
+import Lazyload from '../../src/lazyload';
+import { get } from '../../src/utils';
+import { camelize } from '../../src/utils/format/string';
+import enUS from '../../src/locale/lang/en-US';
+
+Vue.use(Lazyload, {
+  lazyComponent: true,
+});
+
+Locale.add({
+  'en-US': enUS,
+});
+
+// flag for vant-weapp demos
+const isWeapp = location.search.indexOf('weapp=1') !== -1;
+
+let demoUid = 0;
+
+// helper for demo locales
+Vue.mixin({
+  computed: {
+    $t() {
+      const { name } = this.$options;
+      const { lang = 'zh-CN' } = (this.$route && this.$route.meta) || {};
+      const prefix = name ? camelize(name) + '.' : '';
+      const messages = this.$vantMessages[lang];
+
+      return (path, ...args) => {
+        const message = get(messages, prefix + path) || get(messages, path);
+        return typeof message === 'function' ? message(...args) : message;
+      };
+    },
+
+    isWeapp() {
+      return isWeapp;
+    },
+  },
+
+  beforeCreate() {
+    if (!this.$options.name) {
+      this.$options.name = `demo-${demoUid++}`;
+    }
+
+    const { i18n, name } = this.$options;
+
+    if (i18n && name) {
+      const locales = {};
+      const camelizedName = camelize(name);
+
+      Object.keys(i18n).forEach(key => {
+        locales[key] = { [camelizedName]: i18n[key] };
+      });
+
+      Locale.add(locales);
+    }
+  },
+});
+
+// switch lang after routing
+if (window.vueRouter) {
+  window.vueRouter.afterEach(to => {
+    const { lang } = to.meta || {};
+
+    if (lang) {
+      Locale.use(lang);
+    }
+  });
+}
+
+// add some basic locale messages
+Locale.add({
+  'zh-CN': {
+    add: '增加',
+    decrease: '减少',
+    red: '红色',
+    orange: '橙色',
+    yellow: '黄色',
+    purple: '紫色',
+    tab: '标签',
+    tag: '标签',
+    desc: '描述信息',
+    back: '返回',
+    title: '标题',
+    status: '状态',
+    button: '按钮',
+    option: '选项',
+    search: '搜索',
+    content: '内容',
+    custom: '自定义',
+    username: '用户名',
+    password: '密码',
+    disabled: '禁用状态',
+    uneditable: '不可编辑',
+    basicUsage: '基础用法',
+    advancedUsage: '高级用法',
+    loadingStatus: '加载状态',
+    usernamePlaceholder: '请输入用户名',
+    passwordPlaceholder: '请输入密码',
+  },
+  'en-US': {
+    add: 'Add',
+    decrease: 'Decrease',
+    red: 'Red',
+    orange: 'Orange',
+    yellow: 'Yellow',
+    purple: 'Purple',
+    tab: 'Tab',
+    tag: 'Tag',
+    desc: 'Description',
+    back: 'Back',
+    title: 'Title',
+    status: 'Status',
+    button: 'Button',
+    option: 'Option',
+    search: 'Search',
+    content: 'Content',
+    custom: 'Custom',
+    username: 'Username',
+    password: 'Password',
+    loadingStatus: 'Loading',
+    disabled: 'Disabled',
+    uneditable: 'Uneditable',
+    basicUsage: 'Basic Usage',
+    advancedUsage: 'Advanced Usage',
+    usernamePlaceholder: 'Username',
+    passwordPlaceholder: 'Password',
+  },
+});
--- a/vant/docs/site/release.sh
+++ b/vant/docs/site/release.sh
@@ -0,0 +1,8 @@
+#!/usr/bin/env sh
+vant-cli build-site
+
+superman-cdn /vant ./site/*.js
+
+rm -rf site/*.js
+
+gh-pages -d site --add
--- a/vant/package.json
+++ b/vant/package.json
@@ -0,0 +1,99 @@
+{
+  "name": "vant",
+  "version": "2.4.7",
+  "description": "Mobile UI Components built on Vue",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "style": "lib/index.css",
+  "typings": "types/index.d.ts",
+  "files": [
+    "es",
+    "lib",
+    "types",
+    "vetur"
+  ],
+  "scripts": {
+    "bootstrap": "yarn || npm i",
+    "dev": "vant-cli dev",
+    "lint": "vant-cli lint",
+    "test": "vant-cli test",
+    "build": "vant-cli build",
+    "release": "vant-cli release",
+    "test:watch": "vant-cli test --watch",
+    "release:site": "sh docs/site/release.sh",
+    "test:coverage": "open test/coverage/index.html"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "vant-cli commit-lint"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,vue,less}": [
+      "prettier --write",
+      "git add"
+    ],
+    "*.{ts,tsx,js,vue}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{vue,css,less}": [
+      "stylelint --fix",
+      "git add"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:youzan/vant.git"
+  },
+  "keywords": [
+    "vue",
+    "component"
+  ],
+  "author": "youzanfe",
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "7.x",
+    "@vant/icons": "1.2.1",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "vue-lazyload": "1.2.3"
+  },
+  "peerDependencies": {
+    "vue": ">= 2.5.22"
+  },
+  "devDependencies": {
+    "@vant/cli": "^2.2.2",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*",
+    "*.css",
+    "*.less"
+  ],
+  "vetur": {
+    "tags": "vetur/tags.json",
+    "attributes": "vetur/attributes.json"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@vant"
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "@vant/stylelint-config"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "browserslist": [
+    "Android >= 4.0",
+    "iOS >= 8"
+  ]
+}
--- a/vant/packages/.pydio
+++ b/vant/packages/.pydio
@@ -0,0 +1 @@
+1c66f35f-f1e5-48f4-9816-87982334b9dd
--- a/vant/packages/create-vant-cli-app/.pydio
+++ b/vant/packages/create-vant-cli-app/.pydio
@@ -0,0 +1 @@
+4a848747-b0de-4fe8-a636-8aecb24ee3de
--- a/vant/packages/create-vant-cli-app/generators/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/.pydio
@@ -0,0 +1 @@
+d6d89bb3-9916-4e8d-ac56-a3bd71552b71
--- a/vant/packages/create-vant-cli-app/generators/templates/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/.pydio
@@ -0,0 +1 @@
+4a93d437-eba6-40ec-b788-2528b7d4220a
--- a/vant/packages/create-vant-cli-app/generators/templates/babel.config.js
+++ b/vant/packages/create-vant-cli-app/generators/templates/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vant/cli/preset'],
+};
--- a/vant/packages/create-vant-cli-app/generators/templates/docs/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/docs/.pydio
@@ -0,0 +1 @@
+c6aef35f-69ff-4e94-a2c6-bcad4032480c
--- a/vant/packages/create-vant-cli-app/generators/templates/docs/home.md
+++ b/vant/packages/create-vant-cli-app/generators/templates/docs/home.md
@@ -0,0 +1,11 @@
+# 介绍
+
+### 关于
+
+这是一段组件库的介绍
+
+### 特性
+
+- 特性一
+- 特性二
+- 特性三
--- a/vant/packages/create-vant-cli-app/generators/templates/docs/quickstart.md
+++ b/vant/packages/create-vant-cli-app/generators/templates/docs/quickstart.md
@@ -0,0 +1,11 @@
+# 快速上手
+
+### 安装
+
+```bash
+# 通过 npm 安装
+npm i <%= name %> -S
+
+# 通过 yarn 安装
+yarn add <%= name %>
+```
--- a/vant/packages/create-vant-cli-app/generators/templates/eslintignore.tpl
+++ b/vant/packages/create-vant-cli-app/generators/templates/eslintignore.tpl
@@ -0,0 +1,4 @@
+es
+lib
+dist
+node_modules
--- a/vant/packages/create-vant-cli-app/generators/templates/gitignore.tpl
+++ b/vant/packages/create-vant-cli-app/generators/templates/gitignore.tpl
@@ -0,0 +1,17 @@
+*.log*
+.cache
+.DS_Store
+.idea
+.vscode
+
+# npm
+node_modules
+package-lock.json
+
+# dist file
+es
+lib
+site
+
+# test
+test/coverage
--- a/vant/packages/create-vant-cli-app/generators/templates/package.json.tpl
+++ b/vant/packages/create-vant-cli-app/generators/templates/package.json.tpl
@@ -0,0 +1,66 @@
+{
+  "name": "<%= name %>",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/<%= name %>.js",
+  "style": "lib/index.css",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "dev": "vant-cli dev",
+    "test": "vant-cli test",
+    "lint": "vant-cli lint",
+    "build": "vant-cli build",
+    "release": "vant-cli release",
+    "test:coverage": "open test/coverage/index.html",
+    "build-site": "vant-cli build-site && gh-pages -d site"
+  },
+  "author": "",
+  "license": "MIT",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "vant-cli commit-lint"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,vue}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.{vue,css,less,scss}": [
+      "stylelint --fix",
+      "git add"
+    ]
+  },
+  "peerDependencies": {
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vant/cli": "^2.0.0",
+    "babel-plugin-import": "^1.13.0",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@vant"
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "@vant/stylelint-config"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "browserslist": [
+    "Android >= 4.0",
+    "iOS >= 8"
+  ]
+}
--- a/vant/packages/create-vant-cli-app/generators/templates/src/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/.pydio
@@ -0,0 +1 @@
+1f7b797d-f8bb-4eec-9206-309003f22b93
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/.pydio
@@ -0,0 +1 @@
+e3e24d50-1d42-4639-afaa-bc6d9312d493
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/README.md
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/README.md
@@ -0,0 +1,43 @@
+# DemoButton 按钮
+
+### 介绍
+
+DemoButton 是一个示例按钮组件
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { DemoButton } from '<%= name %>';
+
+Vue.use(DemoButton);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<demo-button type="primary" />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+|------|------|------|------|
+| type | 按钮类型 | *string* | `primary` |
+| color `1.0.0` | 按钮颜色 | *string* | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/.pydio
@@ -0,0 +1 @@
+22dc34dc-e3e8-43b5-99e2-ea9aab9bcc4d
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/demo/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <demo-section>
+    <demo-block title="基础用法">
+      <demo-button type="primary" style="margin-left: 15px;">按钮</demo-button>
+    </demo-block>
+
+    <demo-block title="自定义颜色">
+      <demo-button color="#03a9f4" style="margin-left: 15px;">按钮</demo-button>
+    </demo-block>
+  </demo-section>
+</template>
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/index.vue
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <button class="demo-button">
+    <slot />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'demo-button',
+
+  props: {
+    color: String,
+    type: {
+      type: String,
+      default: 'primary',
+    },
+  },
+};
+</script>
+
+<style lang="<%= cssLang %>">
+.demo-button {
+  min-width: 120px;
+  color: #fff;
+  font-size: 16px;
+  line-height: 36px;
+  background-color: #f44;
+  border: none;
+  border-radius: 30px;
+}
+</style>
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/.pydio
@@ -0,0 +1 @@
+880a5847-13d7-4fb0-957c-9b1f9cb9c050
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/snapshots/.pydio
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/snapshots/.pydio
@@ -0,0 +1 @@
+5792c86b-75c0-4d46-9475-ae7c5aa63be4
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/snapshots/index.spec.js.snap
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/snapshots/index.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render demo button 1`] = `<button class="demo-button"></button>`;
--- a/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/index.spec.js
+++ b/vant/packages/create-vant-cli-app/generators/templates/src/demo-button/test/index.spec.js
@@ -0,0 +1,7 @@
+import { mount } from '@vue/test-utils';
+import DemoButton from '..';
+
+test('render demo button', () => {
+  const wrapper = mount(DemoButton);
+  expect(wrapper).toMatchSnapshot();
+});
--- a/vant/packages/create-vant-cli-app/generators/templates/vant.config.js
+++ b/vant/packages/create-vant-cli-app/generators/templates/vant.config.js
@@ -0,0 +1,39 @@
+module.exports = {
+  name: '<%= name %>',
+  build: {
+    css: {
+      preprocessor: '<%= preprocessor %>',
+    },
+    site: {
+      publicPath: '/<%= name %>/',
+    },
+  },
+  site: {
+    title: '<%= name %>',
+    logo: 'https://img.yzcdn.cn/vant/logo.png',
+    nav: [
+      {
+        title: '开发指南',
+        items: [
+          {
+            path: 'home',
+            title: '介绍',
+          },
+          {
+            path: 'quickstart',
+            title: '快速上手',
+          },
+        ],
+      },
+      {
+        title: '基础组件',
+        items: [
+          {
+            path: 'demo-button',
+            title: 'DemoButton 按钮',
+          },
+        ],
+      },
+    ],
+  },
+};
--- a/vant/packages/create-vant-cli-app/package.json
+++ b/vant/packages/create-vant-cli-app/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "create-vant-cli-app",
+  "version": "0.1.1",
+  "description": "Create Vant Cli App",
+  "main": "lib/index.js",
+  "bin": {
+    "create-vant-cli-app": "./lib/index.js"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "release": "tsc & release-it"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/youzan/vant/tree/dev/packages/create-vant-cli-app"
+  },
+  "files": [
+    "lib",
+    "generators"
+  ],
+  "keywords": [
+    "vant"
+  ],
+  "author": "chenjiahan",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/fs-extra": "^8.0.1",
+    "@types/yeoman-generator": "^3.1.4",
+    "release-it": "^12.4.3",
+    "typescript": "^3.7.4"
+  },
+  "dependencies": {
+    "chalk": "^3.0.0",
+    "consola": "^2.11.3",
+    "fs-extra": "^8.1.0",
+    "inquirer": "^7.0.3",
+    "yeoman-generator": "^4.4.0"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "chore: release create-vant-cli-app@${version}"
+    }
+  }
+}
--- a/vant/packages/create-vant-cli-app/src/.pydio
+++ b/vant/packages/create-vant-cli-app/src/.pydio
@@ -0,0 +1 @@
+581186e1-63af-4a90-a85a-f0f17ad1c9b7
--- a/vant/packages/create-vant-cli-app/src/constant.ts
+++ b/vant/packages/create-vant-cli-app/src/constant.ts
@@ -0,0 +1,4 @@
+import { join } from 'path';
+
+export const CWD = process.cwd();
+export const GENERATOR_DIR = join(__dirname, '../generators');
--- a/vant/packages/create-vant-cli-app/src/generator.ts
+++ b/vant/packages/create-vant-cli-app/src/generator.ts
@@ -0,0 +1,92 @@
+import chalk from 'chalk';
+import consola from 'consola';
+import { join } from 'path';
+import { CWD, GENERATOR_DIR } from './constant';
+import Generator from 'yeoman-generator';
+
+const TEMPLATES = join(GENERATOR_DIR, 'templates');
+const PROMPTS = [
+  {
+    name: 'preprocessor',
+    message: 'Select css preprocessor',
+    type: 'list',
+    choices: ['Less', 'Sass'],
+  },
+];
+
+export class VanGenerator extends Generator {
+  inputs = {
+    name: '',
+    cssLang: '',
+    preprocessor: '',
+  };
+
+  constructor(name: string) {
+    super([], {
+      env: {
+        cwd: join(CWD, name),
+      },
+      resolved: GENERATOR_DIR,
+    });
+
+    this.inputs.name = name;
+  }
+
+  async prompting() {
+    return this.prompt<Record<string, string>>(PROMPTS).then(inputs => {
+      const preprocessor = inputs.preprocessor.toLowerCase();
+      const cssLang = preprocessor === 'sass' ? 'scss' : preprocessor;
+
+      this.inputs.cssLang = cssLang;
+      this.inputs.preprocessor = preprocessor;
+    });
+  }
+
+  writing() {
+    consola.info(`Creating project in ${join(CWD, this.inputs.name)}\n`);
+
+    const copy = (from: string, to?: string) => {
+      this.fs.copy(join(TEMPLATES, from), this.destinationPath(to || from));
+    };
+
+    const copyTpl = (from: string, to?: string) => {
+      this.fs.copyTpl(
+        join(TEMPLATES, from),
+        this.destinationPath(to || from),
+        this.inputs
+      );
+    };
+
+    copyTpl('package.json.tpl', 'package.json');
+    copyTpl('vant.config.js');
+    copyTpl('src/**/*', 'src');
+    copyTpl('docs/**/*', 'docs');
+    copy('babel.config.js');
+    copy('gitignore.tpl', '.gitignore');
+    copy('eslintignore.tpl', '.eslintignore');
+  }
+
+  install() {
+    console.log();
+    consola.info('Install dependencies...\n');
+
+    process.chdir(this.inputs.name);
+
+    this.installDependencies({
+      npm: false,
+      bower: false,
+      yarn: true,
+      skipMessage: true,
+    });
+  }
+
+  end() {
+    const { name } = this.inputs;
+
+    console.log();
+    consola.success(`Successfully created ${chalk.yellow(name)}.`);
+    consola.success(
+      `Run ${chalk.yellow(`cd ${name} && yarn dev`)} to start development!`
+    );
+  }
+}
--- a/vant/packages/create-vant-cli-app/src/index.ts
+++ b/vant/packages/create-vant-cli-app/src/index.ts
@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+
+import inquirer from 'inquirer';
+import { ensureDir } from 'fs-extra';
+import { VanGenerator } from './generator';
+
+const PROMPTS = [
+  {
+    type: 'input',
+    name: 'name',
+    message: 'Your package name',
+  },
+];
+
+export default async function run() {
+  const { name } = await inquirer.prompt(PROMPTS);
+
+  ensureDir(name);
+
+  const generator = new VanGenerator(name);
+  generator.run();
+}
+
+run();
--- a/vant/packages/create-vant-cli-app/tsconfig.json
+++ b/vant/packages/create-vant-cli-app/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "outDir": "./lib",
+    "module": "commonjs",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "lib": ["esnext"]
+  },
+  "include": ["src/**/*"]
+}
--- a/vant/packages/create-vant-cli-app/yarn.lock
+++ b/vant/packages/create-vant-cli-app/yarn.lock
--- a/vant/packages/vant-cli/.pydio
+++ b/vant/packages/vant-cli/.pydio
@@ -0,0 +1 @@
+eae5cd50-ee35-417d-97f7-d71db803b004
--- a/vant/packages/vant-cli/README.md
+++ b/vant/packages/vant-cli/README.md
@@ -0,0 +1,103 @@
+# Vant Cli
+
+Vant Cli 是一个 Vue 组件库构建工具，通过 Vant Cli 可以快速搭建一套功能完备的 Vue 组件库。
+
+### 特性
+
+- 提供丰富的命令，涵盖从开发测试到构建发布的完整流程
+- 基于约定的目录结构，自动生成优雅的文档站点和组件示例
+- 内置 ESlint、Stylelint 校验规则，提交代码时自动执行校验
+- 构建后的组件库默认支持按需引入、主题定制、Tree Shaking
+
+### 快速上手
+
+执行以下命令可以快速创建一个基于 Vant Cli 的项目：
+
+```bash
+npx create-vant-cli-app
+```
+
+### 手动安装
+
+```shell
+# 通过 npm 安装
+npm i @vant/cli -D
+
+# 通过 yarn 安装
+yarn add @vant/cli --dev
+```
+
+安装完成后，请将以下配置添加到 package.json 文件中
+
+```json
+{
+  "scripts": {
+    "dev": "vant-cli dev",
+    "test": "vant-cli test",
+    "lint": "vant-cli lint",
+    "release": "vant-cli release",
+    "build-site": "vant-cli build-site"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "vant commit-lint"
+    }
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx,vue}": [
+      "eslint",
+      "git add"
+    ],
+    "*.{vue,css,less,scss}": [
+      "stylelint",
+      "git add"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": ["@vant"]
+  },
+  "stylelint": {
+    "extends": ["@vant/stylelint-config"]
+  },
+  "prettier": {
+    "singleQuote": true
+  },
+  "browserslist": ["Android >= 4.0", "iOS >= 8"]
+}
+```
+
+## 命令
+
+### dev
+
+本地开发，dev 命令会启动一个本地服务器，用于在开发过程中对文档和示例进行预览
+
+### build
+
+构建组件库，在`es`和`lib`目录生成可用于生产环境的组件代码
+
+### build-site
+
+构建文档站点，在`site`目录生成可用于生产环境的文档站点代码
+
+### release
+
+发布组件库，发布前会自动执行 build 和 changelog 命令
+
+### changelog
+
+基于 commit 记录生成更新日志
+
+### commit-lint
+
+校验 commit message 的格式是否符合规范，需要配合`husky`在提交 commit 时触发
+
+## 配置
+
+参见[配置指南](https://github.com/youzan/vant/tree/dev/packages/vant-cli/docs/config.md)。
+
+## 更新日志
+
+参见[更新日志](https://github.com/youzan/vant/tree/dev/packages/vant-cli/changelog.md)。
--- a/vant/packages/vant-cli/changelog.md
+++ b/vant/packages/vant-cli/changelog.md
@@ -0,0 +1,80 @@
+# 更新日志
+
+### [v2.2.2]
+`2020-02-05`
+
+- 修复在 windows 上获取 markdown 路径错误的问题 ([#5626](https://github.com/youzan/vant/pull/5626))
+
+
+### [v2.2.1]
+`2020-02-04`
+
+- 升级 babel@7.8
+- 修复切换版本时跳转 undefined 的问题 ([#5620](https://github.com/youzan/vant/pull/5620))
+
+
+### [v2.2.0]
+`2020-01-19`
+
+- 升级 @vant/eslint-config@2.0.0
+
+
+### [v2.1.8]
+`2020-01-18`
+
+- 新增 create-vant-cli-app 初始化命令
+- 新增 --version 选项
+- 优化站点导航栏颜色
+- 优化站点代码块颜色
+
+
+### [v2.1.7]
+`2020-01-15`
+
+- 优化 help 命令
+- 优化控制台输出信息
+
+
+### [v2.1.6]
+`2020-01-12`
+
+- 支持自定义 Postcss 配置
+- 支持自定义 devServer 端口
+- 优化文档站点的 meta 字段
+- 新增 API 文档中的版本标签样式
+
+
+### [v2.1.5]
+`2020-01-10`
+
+- 修复编译时未替换 import 语句中的 CSS 后缀的问题
+- 升级 husky 版本到 4.0
+
+
+### [v2.1.4]
+`2020-01-06`
+
+**Bug Fixes**
+
+- 锁死 @vue/test-utils 版本为 1.0.0-beta.29
+
+
+### [v2.1.3]
+`2020-01-06`
+
+**Feature**
+
+- 增加 cache-loader，提高构建速度
+- 调整 jest setup 文件执行时机，延迟至 env 初始化后执行
+
+
+### [v2.1.2]
+`2020-01-05`
+
+**Feature**
+
+- 优化文档站点样式，统一圆角大小
+
+**Bug Fixes**
+
+- 修复 windows 下路径分隔符错误的问题
--- a/vant/packages/vant-cli/docs/.pydio
+++ b/vant/packages/vant-cli/docs/.pydio
@@ -0,0 +1 @@
+06942dbd-1253-44af-9a0b-4f339317d63d
--- a/vant/packages/vant-cli/docs/config.md
+++ b/vant/packages/vant-cli/docs/config.md
@@ -0,0 +1,288 @@
+# 配置指南
+
+- [配置指南](#)
+  - [vant.config.js](#vantconfigjs)
+    - [name](#name)
+    - [build.css](#buildcss)
+    - [build.site](#buildsite)
+    - [site.title](#sitetitle)
+    - [site.logo](#sitelogo)
+    - [site.description](#sitedescription)
+    - [site.nav](#sitenav)
+    - [site.versions](#siteversions)
+    - [site.baiduAnalytics](#sitebaiduanalytics)
+  - [Webpack](#webpack)
+  - [Babel](#babel)
+    - [默认配置](#-1)
+    - [依赖](#-2)
+  - [Postcss](#postcss)
+    - [默认配置](#-3)
+  - [browserslist](#browserslist)
+
+## vant.config.js
+
+`vant.config.js`中包含了`vant-cli`的打包配置和文档站点配置，请创建此文件并置于项目根目录下。下面是一份基本配置的示例：
+
+```js
+module.exports = {
+  // 组件库名称
+  name: 'demo-ui',
+  // 构建配置
+  build: {
+    site: {
+      publicPath: '/demo-ui/'
+    }
+  },
+  // 文档站点配置
+  site: {
+    // 标题
+    title: 'Demo UI',
+    // 图标
+    logo: 'https://img.yzcdn.cn/vant/logo.png',
+    // 描述
+    description: '示例组件库',
+    // 左侧导航
+    nav: [
+      {
+        title: '开发指南',
+        items: [
+          {
+            path: 'home',
+            title: '介绍'
+          }
+        ]
+      },
+      {
+        title: '基础组件',
+        items: [
+          {
+            path: 'my-button',
+            title: 'MyButton 按钮'
+          }
+        ]
+      }
+    ]
+  }
+};
+```
+
+### name
+
+- Type: `string`
+- Default: `''`
+
+组件库名称，建议使用中划线分割，如`demo-ui`。
+
+### build.css
+
+- Type: `object`
+- Default: `{ preprocessor: 'less' }`
+
+CSS 预处理器配置，目前支持`less`和`sass`两种预处理器，默认使用`less`。
+
+```js
+module.exports = {
+  build: {
+    css: {
+      preprocessor: 'sass'
+    }
+  }
+};
+```
+
+### build.site
+
+- Type: `object`
+- Default: `{ publicPath: '/' }`
+
+`site.publicPath`等价于 webpack 的`output.publicPath`配置。
+
+一般来说，我们的文档网站会部署在一个域名的子路径上，如 `https://my.github.io/demo-ui/`，这时候`publicPath`需要跟子路径保持一致，即`/demo-ui/`。
+
+```js
+module.exports = {
+  build: {
+    site: {
+      publicPath: '/demo-ui/'
+    }
+  }
+};
+```
+
+### site.title
+
+- Type: `string`
+- Default: `''`
+
+文档站点的标题。
+
+### site.logo
+
+- Type: `string`
+- Default: `''`
+
+文档站点的 Logo。
+
+### site.description
+
+- Type: `string`
+- Default: `''`
+
+标题下方的描述文案。
+
+### site.nav
+
+- Type: `object[]`
+- Default: `undefined`
+
+文档站点的左侧导航，数组中的每个对象表示一个导航分组。
+
+```js
+module.exports = {
+  site: {
+    nav: [
+      {
+        // 分组标题
+        title: '开发指南',
+        // 导航项
+        items: [
+          {
+            // 导航项路由
+            path: 'home',
+            // 导航项文案
+            title: '介绍'
+          }
+        ]
+      }
+    ]
+  }
+};
+```
+
+### site.versions
+
+- Type: `object[]`
+- Default: `undefined`
+
+文档站点多版本配置，当组件库存在多个版本的文档时，可以通过`site.versions`在顶部导航配置一个版本切换按钮。
+
+```js
+module.exports = {
+  site: {
+    versions: [
+      {
+        label: '1.x',
+        link: 'https://youzan.github.io/vant/1.x/'
+      }
+    ]
+  }
+};
+```
+
+### site.baiduAnalytics
+
+- Type: `object`
+- Default: `undefied`
+
+文档网站的百度统计配置，添加这项配置后，会自动在构建文档网站时加载百度统计的脚本。
+
+```js
+module.exports = {
+  site: {
+    baiduAnalytics: {
+      // 打开百度统计 ->『管理』->『代码获取』
+      // 找到下面这串 URL: "https://hm.baidu.com/hm.js?xxxxx"
+      // 将 `xxxxx` 填写在 seed 中即可
+      seed: 'xxxxx'
+    }
+  }
+};
+```
+
+## Webpack
+
+通过根目录下的`webpack.config.js`文件可以修改 Webpack 配置，配置内容会通过 [webpack-merge](https://github.com/survivejs/webpack-merge) 合并到最终的配置中。
+
+比如修改 devServer 端口：
+
+```js
+module.exports = {
+  devServer: {
+    port: 9000
+  }
+};
+```
+
+## Babel
+
+通过根目录下的`babel.config.js`文件可以对 Babel 进行配置。
+
+### 默认配置
+
+推荐使用`vant-cli`内置的 preset，配置如下：
+
+```js
+module.exports = {
+  presets: ['@vant/cli/preset']
+};
+```
+
+`@vant/cli/preset`中默认包含了以下插件：
+
+- @babel/preset-env（不含 core-js）
+- @babel/preset-typescript
+- @babel/plugin-transform-runtime
+- @babel/plugin-transform-object-assign
+- @babel/plugin-proposal-optional-chaining
+- @babel/plugin-proposal-nullish-coalescing-operator
+- @vue/babel-preset-jsx
+
+### 依赖
+
+由于使用了`@babel/plugin-transform-runtime`来优化 Babel 的 helper 函数，你需要将`@babel/runtime`添加到`package.json`的依赖项：
+
+```json
+{
+  "dependencies": {
+    "@babel/runtime": "7.x"
+  }
+}
+```
+
+如果使用了 JSX 的语法，还需要将`@vue/babel-helper-vue-jsx-merge-props`添加到依赖中：
+
+```json
+{
+  "dependencies": {
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0"
+  }
+}
+```
+
+## Postcss
+
+通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
+
+### 默认配置
+
+`vant-cli`中默认的 Postcss 配置如下：
+
+```js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
+```
+
+## browserslist
+
+推荐在`package.json`文件里添加 browserslist 字段，这个值会被`@babel/preset-env`和`autoprefixer`用来确定目标浏览器的版本，保证编译后代码的兼容性。
+
+在移动端浏览器中使用，可以添加如下配置：
+
+```json
+{
+  "browserslist": ["Android >= 4.0", "iOS >= 8"]
+}
+```
--- a/vant/packages/vant-cli/package.json
+++ b/vant/packages/vant-cli/package.json
@@ -0,0 +1,124 @@
+{
+  "name": "@vant/cli",
+  "version": "2.2.2",
+  "description": "",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "bin": {
+    "vant-cli": "./lib/index.js"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "tsc --watch",
+    "release": "tsc & release-it"
+  },
+  "files": [
+    "lib",
+    "site",
+    "template",
+    "preset.js"
+  ],
+  "keywords": [
+    "vant"
+  ],
+  "author": "chenjiahan",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^2.5.22",
+    "vue-template-compiler": "^2.5.22"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^8.0.1",
+    "@types/html-webpack-plugin": "^3.2.2",
+    "@types/lodash": "^4.14.149",
+    "@types/postcss-load-config": "^2.0.1",
+    "@types/sass": "^1.16.0",
+    "@types/shelljs": "^0.8.6",
+    "@types/webpack": "^4.41.4",
+    "@types/webpack-dev-server": "^3.10.0",
+    "@types/webpack-merge": "^4.1.5"
+  },
+  "dependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/plugin-syntax-jsx": "^7.8.3",
+    "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-typescript": "^7.8.3",
+    "@nuxt/friendly-errors-webpack-plugin": "^2.5.0",
+    "@types/jest": "^25.1.1",
+    "@vant/eslint-config": "^2.0.0",
+    "@vant/markdown-loader": "^2.3.0",
+    "@vant/markdown-vetur": "^1.1.0",
+    "@vant/stylelint-config": "^1.1.0",
+    "@vant/touch-emulator": "^1.2.0",
+    "@vue/babel-preset-jsx": "^1.1.2",
+    "@vue/component-compiler-utils": "^3.1.1",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "address": "^1.1.2",
+    "autoprefixer": "^9.7.4",
+    "babel-jest": "^25.1.0",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-import": "^1.13.0",
+    "cache-loader": "^4.1.0",
+    "chokidar": "^3.3.1",
+    "clean-css": "^4.2.3",
+    "codecov": "^3.6.4",
+    "commander": "^4.1.1",
+    "consola": "^2.11.3",
+    "conventional-changelog": "^3.1.18",
+    "cross-env": "^7.0.0",
+    "css-loader": "^3.4.2",
+    "eslint": "^6.8.0",
+    "fast-glob": "^3.1.1",
+    "gh-pages": "2.0.1",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "^4.2.1",
+    "jest": "^25.1.0",
+    "jest-canvas-mock": "^2.2.0",
+    "jest-serializer-vue": "^2.0.2",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^10.0.7",
+    "lodash": "^4.17.15",
+    "ora": "^4.0.3",
+    "portfinder": "^1.0.25",
+    "postcss": "^7.0.26",
+    "postcss-loader": "^3.0.0",
+    "release-it": "^12.4.3",
+    "sass": "^1.25.0",
+    "sass-loader": "^8.0.2",
+    "shelljs": "^0.8.3",
+    "style-loader": "^1.1.3",
+    "stylelint": "^13.0.0",
+    "typescript": "^3.7.5",
+    "vue-jest": "4.0.0-beta.2",
+    "vue-loader": "^15.8.3",
+    "vue-router": "^3.1.5",
+    "webpack": "^4.41.5",
+    "webpack-dev-server": "3.10.2",
+    "webpack-merge": "^4.2.2",
+    "webpackbar": "^4.0.0"
+  },
+  "release-it": {
+    "git": {
+      "tag": false,
+      "commitMessage": "chore: release @vant/cli@${version}"
+    }
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@vant"
+    ],
+    "rules": {
+      "global-require": 0,
+      "import/no-dynamic-require": 0
+    }
+  }
+}
--- a/vant/packages/vant-cli/preset.js
+++ b/vant/packages/vant-cli/preset.js
@@ -0,0 +1,3 @@
+const babelConfig = require('./lib/config/babel.config');
+
+module.exports = api => babelConfig(api);
--- a/vant/packages/vant-cli/site/.pydio
+++ b/vant/packages/vant-cli/site/.pydio
@@ -0,0 +1 @@
+58a0e612-6925-4750-9303-c27fbbc62ff6
--- a/vant/packages/vant-cli/site/common/.pydio
+++ b/vant/packages/vant-cli/site/common/.pydio
@@ -0,0 +1 @@
+2c196b31-1743-44f5-bc79-6d655593b8ad
--- a/vant/packages/vant-cli/site/common/iframe-router.js
+++ b/vant/packages/vant-cli/site/common/iframe-router.js
@@ -0,0 +1,29 @@
+/**
+ * 同步父窗口和 iframe 的 vue-router 状态
+ */
+
+import { iframeReady, isMobile } from '.';
+
+window.syncPath = function() {
+  const router = window.vueRouter;
+  const isInIframe = window !== window.top;
+  const currentDir = router.history.current.path;
+
+  if (isInIframe) {
+    window.top.replacePath(currentDir);
+  } else if (!isMobile) {
+    const iframe = document.querySelector('iframe');
+    if (iframe) {
+      iframeReady(iframe, () => {
+        iframe.contentWindow.replacePath(currentDir);
+      });
+    }
+  }
+};
+
+window.replacePath = function(path = '') {
+  // should preserve hash for anchor
+  if (window.vueRouter.currentRoute.path !== path) {
+    window.vueRouter.replace(path).catch(() => {});
+  }
+};
--- a/vant/packages/vant-cli/site/common/index.js
+++ b/vant/packages/vant-cli/site/common/index.js
@@ -0,0 +1,30 @@
+function iframeReady(iframe, callback) {
+  const doc = iframe.contentDocument || iframe.contentWindow.document;
+  const interval = () => {
+    if (iframe.contentWindow.replacePath) {
+      callback();
+    } else {
+      setTimeout(() => {
+        interval();
+      }, 50);
+    }
+  };
+
+  if (doc.readyState === 'complete') {
+    interval();
+  } else {
+    iframe.onload = interval;
+  }
+}
+
+const ua = navigator.userAgent.toLowerCase();
+const isMobile = /ios|iphone|ipod|ipad|android/.test(ua);
+
+export function decamelize(str, sep = '-') {
+  return str
+    .replace(/([a-z\d])([A-Z])/g, '$1' + sep + '$2')
+    .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + sep + '$2')
+    .toLowerCase();
+}
+
+export { isMobile, iframeReady };
--- a/vant/packages/vant-cli/site/common/locales.js
+++ b/vant/packages/vant-cli/site/common/locales.js
@@ -0,0 +1,30 @@
+const ZH_CN = 'zh-CN';
+const EN_US = 'en-US';
+const CACHE_KEY = 'vant-cli-lang';
+
+let currentLang = ZH_CN;
+
+export function getLang() {
+  return currentLang;
+}
+
+export function setLang(lang) {
+  currentLang = lang;
+  localStorage.setItem(CACHE_KEY, lang);
+}
+
+export function setDefaultLang(langFromConfig) {
+  const cached = localStorage.getItem(CACHE_KEY);
+
+  if (cached) {
+    currentLang = cached;
+    return;
+  }
+
+  if (navigator.language && navigator.language.indexOf('zh-') !== -1) {
+    currentLang = ZH_CN;
+    return;
+  }
+
+  currentLang = langFromConfig || EN_US;
+}
--- a/vant/packages/vant-cli/site/common/style/.pydio
+++ b/vant/packages/vant-cli/site/common/style/.pydio
@@ -0,0 +1 @@
+bec7060d-dbcd-4465-b730-de9b5ccae70a
--- a/vant/packages/vant-cli/site/common/style/base.less
+++ b/vant/packages/vant-cli/site/common/style/base.less
@@ -0,0 +1,46 @@
+@import './var';
+
+body {
+  min-width: 1100px;
+  margin: 0;
+  overflow-x: auto;
+  color: @van-doc-black;
+  font-size: 16px;
+  font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
+  background-color: @van-doc-background-color;
+  -webkit-font-smoothing: antialiased;
+}
+
+p {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-size: inherit;
+}
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+.van-doc-row {
+  width: 100%;
+
+  @media (min-width: @van-doc-row-max-width) {
+    width: @van-doc-row-max-width;
+    margin: 0 auto;
+  }
+}
--- a/vant/packages/vant-cli/site/common/style/highlight.less
+++ b/vant/packages/vant-cli/site/common/style/highlight.less
@@ -0,0 +1,79 @@
+@import './var';
+
+code {
+  position: relative;
+  display: block;
+  margin-top: 20px;
+  overflow-x: auto;
+  color: @van-doc-code-color;
+  font-weight: 400;
+  font-size: 13.4px;
+  font-family: @van-doc-code-font-family;
+  line-height: 26px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -webkit-font-smoothing: auto;
+}
+
+pre {
+  margin: 0;
+}
+
+.hljs {
+  display: block;
+  padding: 0.5em;
+  overflow-x: auto;
+  background: #fff;
+}
+
+.hljs-subst {
+  color: @van-doc-code-color;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-symbol,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: @van-doc-green;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #999;
+}
+
+.hljs-params,
+.hljs-keyword,
+.hljs-attribute {
+  color: @van-doc-purple;
+}
+
+.hljs-deletion,
+.hljs-variable,
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-bullet,
+.hljs-link {
+  color: #eb6f6f;
+}
+
+.hljs-attr,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-doctag,
+.hljs-type,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-strong {
+  color: #4994df;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
--- a/vant/packages/vant-cli/site/common/style/var.less
+++ b/vant/packages/vant-cli/site/common/style/var.less
@@ -0,0 +1,29 @@
+@van-doc-black: #323233;
+@van-doc-blue: #1989fa;
+@van-doc-purple: #8080ff;
+@van-doc-fuchsia: #a7419e;
+@van-doc-green: #4fc08d;
+@van-doc-text-color: #34495e;
+@van-doc-text-light-blue: rgba(69, 90, 100, 0.6);
+@van-doc-background-color: #f7f8fa;
+@van-doc-grey: #999;
+@van-doc-dark-grey: #666;
+@van-doc-light-grey: #ccc;
+@van-doc-border-color: #f1f4f8;
+@van-doc-code-color: #58727e;
+@van-doc-code-background-color: #f1f4f8;
+@van-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+@van-doc-padding: 30px;
+@van-doc-row-max-width: 1680px;
+@van-doc-nav-width: 220px;
+@van-doc-border-radius: 12px;
+
+// header
+@van-doc-header-top-height: 60px;
+@van-doc-header-bottom-height: 50px;
+
+// simulator
+@van-doc-simulator-width: 360px;
+@van-doc-simulator-small-width: 320px;
+@van-doc-simulator-height: 620px;
+@van-doc-simulator-small-height: 560px;
--- a/vant/packages/vant-cli/site/desktop/.pydio
+++ b/vant/packages/vant-cli/site/desktop/.pydio
@@ -0,0 +1 @@
+a19e2525-f848-4240-a0b0-be63b37c9f6b
--- a/vant/packages/vant-cli/site/desktop/App.vue
+++ b/vant/packages/vant-cli/site/desktop/App.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="app">
+    <van-doc
+      :lang="lang"
+      :config="config"
+      :versions="versions"
+      :simulator="simulator"
+      :lang-configs="langConfigs"
+    >
+      <router-view />
+    </van-doc>
+  </div>
+</template>
+
+<script>
+import VanDoc from './components';
+import { config, packageVersion } from 'site-desktop-shared';
+import { setLang } from '../common/locales';
+
+export default {
+  components: {
+    VanDoc,
+  },
+
+  data() {
+    const path = location.pathname.replace('/index', '/');
+
+    return {
+      packageVersion,
+      simulator: `${path}mobile.html${location.hash}`,
+    };
+  },
+
+  computed: {
+    lang() {
+      const { lang } = this.$route.meta;
+      return lang || '';
+    },
+
+    langConfigs() {
+      const { locales = {} } = config.site;
+      return Object.keys(locales).map(key => ({
+        lang: key,
+        label: locales[key].langLabel || '',
+      }));
+    },
+
+    config() {
+      const { locales } = config.site;
+
+      if (locales) {
+        return locales[this.lang];
+      }
+
+      return config.site;
+    },
+
+    versions() {
+      if (config.site.versions) {
+        return [{ label: packageVersion }, ...config.site.versions];
+      }
+
+      return null;
+    },
+  },
+
+  watch: {
+    lang(val) {
+      setLang(val);
+      this.setTitle();
+    },
+  },
+
+  created() {
+    this.setTitle();
+  },
+
+  methods: {
+    setTitle() {
+      let { title } = this.config;
+
+      if (this.config.description) {
+        title += ` - ${this.config.description}`;
+      }
+
+      document.title = title;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../common/style/base';
+@import '../common/style/highlight';
+
+.van-doc-intro {
+  padding-top: 20px;
+  font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
+  text-align: center;
+
+  p {
+    margin-bottom: 20px;
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/.pydio
+++ b/vant/packages/vant-cli/site/desktop/components/.pydio
@@ -0,0 +1 @@
+aee38061-e7df-40fa-b330-e3c710239aa2
--- a/vant/packages/vant-cli/site/desktop/components/Container.vue
+++ b/vant/packages/vant-cli/site/desktop/components/Container.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+    class="van-doc-container van-doc-row"
+    :class="{ 'van-doc-container--with-simulator': hasSimulator }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-container',
+
+  props: {
+    hasSimulator: Boolean,
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-container {
+  box-sizing: border-box;
+  padding-left: @van-doc-nav-width;
+  overflow: hidden;
+
+  &--with-simulator {
+    padding-right: @van-doc-simulator-width + @van-doc-padding;
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/Content.vue
+++ b/vant/packages/vant-cli/site/desktop/components/Content.vue
@@ -0,0 +1,238 @@
+<template>
+  <div :class="['van-doc-content', `van-doc-content--${currentPage}`]">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-content',
+
+  computed: {
+    currentPage() {
+      const { path } = this.$route;
+      if (path) {
+        return path.split('/').slice(-1)[0];
+      }
+      return this.$route.name;
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-content {
+  position: relative;
+  flex: 1;
+  padding: 0 0 75px;
+
+  .card {
+    margin-bottom: 24px;
+    padding: 24px;
+    background-color: #fff;
+    border-radius: @van-doc-border-radius;
+    box-shadow: 0 8px 12px #ebedf0;
+  }
+
+  a {
+    margin: 0 1px;
+    color: @van-doc-green;
+    -webkit-font-smoothing: auto;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: @van-doc-black;
+    font-weight: normal;
+    line-height: 1.5;
+
+    &[id] {
+      cursor: pointer;
+    }
+  }
+
+  h1 {
+    margin: 0 0 30px;
+    font-size: 30px;
+    cursor: default;
+  }
+
+  h2 {
+    margin: 45px 0 20px;
+    font-size: 22px;
+  }
+
+  h3 {
+    margin-bottom: 16px;
+    font-weight: 500;
+    font-size: 18px;
+  }
+
+  h4 {
+    margin: 24px 0 12px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+
+  h5 {
+    margin: 24px 0 12px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
+  p {
+    color: @van-doc-text-color;
+    font-size: 14px;
+    line-height: 26px;
+  }
+
+  table {
+    width: 100%;
+    margin-top: 12px;
+    color: @van-doc-text-color;
+    font-size: 13px;
+    line-height: 1.5;
+    border-collapse: collapse;
+
+    th {
+      padding: 8px 10px;
+      font-weight: 500;
+      text-align: left;
+
+      &:first-child {
+        padding-left: 0;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    td {
+      padding: 8px;
+      border-top: 1px solid @van-doc-code-background-color;
+
+      &:first-child {
+        padding-left: 0;
+
+        // version tag
+        code {
+          margin: 0;
+          padding: 2px 6px;
+          color: @van-doc-blue;
+          font-weight: 500;
+          font-size: 10px;
+          background-color: fade(@van-doc-blue, 10%);
+          border-radius: 20px;
+        }
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    em {
+      color: @van-doc-green;
+      font-size: 12.5px;
+      font-family: @van-doc-code-font-family;
+      font-style: normal;
+      -webkit-font-smoothing: auto;
+    }
+  }
+
+  ul li,
+  ol li {
+    position: relative;
+    margin: 5px 0 5px 10px;
+    padding-left: 15px;
+    color: @van-doc-text-color;
+    font-size: 14px;
+    line-height: 26px;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 6px;
+      height: 6px;
+      margin-top: 10px;
+      border: 1px solid @van-doc-dark-grey;
+      border-radius: 50%;
+      content: '';
+    }
+  }
+
+  hr {
+    margin: 30px 0;
+    border: 0 none;
+    border-top: 1px solid #eee;
+  }
+
+  p > code,
+  li > code,
+  table code {
+    display: inline;
+    margin: 2px 3px;
+    padding: 2px 5px;
+    font-size: 13px;
+    font-family: inherit;
+    word-break: keep-all;
+    background-color: #f0f2f5;
+    border-radius: 4px;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  p > code {
+    font-size: 14px;
+  }
+
+  section {
+    padding: 30px;
+    overflow: hidden;
+  }
+
+  blockquote {
+    margin: 20px 0 0;
+    padding: 16px;
+    color: rgba(52, 73, 94, 0.8);
+    font-weight: 500;
+    font-size: 14px;
+    background-color: #ecf9ff;
+    border-radius: @van-doc-border-radius;
+  }
+
+  img {
+    width: 100%;
+    margin: 16px 0;
+    border-radius: @van-doc-border-radius;
+  }
+
+  &--changelog {
+    strong {
+      display: block;
+      margin: 24px 0 12px;
+      font-weight: 500;
+      font-size: 15px;
+    }
+
+    h3 {
+      + p code {
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+        font-size: 20px;
+      }
+    }
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/Header.vue
+++ b/vant/packages/vant-cli/site/desktop/components/Header.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="van-doc-header">
+    <div class="van-doc-row">
+      <div class="van-doc-header__top">
+        <a class="van-doc-header__logo">
+          <img :src="config.logo" />
+          <span>{{ config.title }}</span>
+        </a>
+
+        <search-input
+          v-if="searchConfig"
+          :lang="lang"
+          :search-config="searchConfig"
+        />
+
+        <ul class="van-doc-header__top-nav">
+          <li v-for="item in config.links" class="van-doc-header__top-nav-item">
+            <a
+              class="van-doc-header__logo-link"
+              target="_blank"
+              :href="item.url"
+            >
+              <img :src="item.logo" />
+            </a>
+          </li>
+
+          <li
+            ref="version"
+            v-if="versions"
+            class="van-doc-header__top-nav-item"
+          >
+            <span
+              class="van-doc-header__cube van-doc-header__version"
+              @click="toggleVersionPop"
+            >
+              {{ versions[0].label }}
+              <transition name="van-doc-dropdown">
+                <div v-if="showVersionPop" class="van-doc-header__version-pop">
+                  <div
+                    v-for="item in versions"
+                    class="van-doc-header__version-pop-item"
+                    @click="onSwitchVersion(item)"
+                  >
+                    {{ item.label }}
+                  </div>
+                </div>
+              </transition>
+            </span>
+          </li>
+
+          <li v-if="langLabel && langLink" class="van-doc-header__top-nav-item">
+            <a class="van-doc-header__cube" :href="langLink">{{ langLabel }}</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SearchInput from './SearchInput';
+
+export default {
+  name: 'van-doc-header',
+
+  components: {
+    SearchInput,
+  },
+
+  props: {
+    lang: String,
+    config: Object,
+    versions: Array,
+    langConfigs: Array,
+  },
+
+  data() {
+    return {
+      showVersionPop: false,
+    };
+  },
+
+  computed: {
+    langLink() {
+      return `#${this.$route.path.replace(this.lang, this.anotherLang.lang)}`;
+    },
+
+    langLabel() {
+      return this.anotherLang.label;
+    },
+
+    anotherLang() {
+      const items = this.langConfigs.filter(item => item.lang !== this.lang);
+      if (items.length) {
+        return items[0];
+      }
+
+      return {};
+    },
+
+    searchConfig() {
+      return this.config.searchConfig;
+    },
+  },
+
+  methods: {
+    toggleVersionPop() {
+      const val = !this.showVersionPop;
+
+      const action = val ? 'add' : 'remove';
+      document.body[`${action}EventListener`](
+        'click',
+        this.checkHideVersionPop
+      );
+
+      this.showVersionPop = val;
+    },
+
+    checkHideVersionPop(event) {
+      if (!this.$refs.version.contains(event.target)) {
+        this.showVersionPop = false;
+      }
+    },
+
+    onSwitchLang(lang) {
+      this.$router.push(this.$route.path.replace(lang.from, lang.to));
+    },
+
+    onSwitchVersion(version) {
+      if (version.link) {
+        location.href = version.link;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-header {
+  width: 100%;
+  user-select: none;
+
+  &__top {
+    display: flex;
+    align-items: center;
+    height: @van-doc-header-top-height;
+    padding: 0 @van-doc-padding;
+    line-height: @van-doc-header-top-height;
+    background-color: #001938;
+
+    &-nav {
+      flex: 1;
+      font-size: 0;
+      text-align: right;
+
+      > li {
+        position: relative;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      &-item {
+        margin-left: 20px;
+      }
+
+      &-title {
+        display: block;
+        font-size: 15px;
+      }
+    }
+  }
+
+  &__cube {
+    position: relative;
+    display: block;
+    padding: 0 12px;
+    color: #fff;
+    font-size: 14px;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    line-height: 24px;
+    text-align: center;
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 20px;
+    cursor: pointer;
+    transition: 0.3s ease-in-out;
+  }
+
+  &__version {
+    padding-right: 20px;
+
+    &::after {
+      position: absolute;
+      top: 7px;
+      right: 7px;
+      width: 5px;
+      height: 5px;
+      color: rgba(255, 255, 255, 0.9);
+      border: 1px solid;
+      border-color: transparent transparent currentColor currentColor;
+      transform: rotate(-45deg);
+      content: '';
+    }
+
+    &-pop {
+      position: absolute;
+      top: 30px;
+      right: 0;
+      left: 0;
+      z-index: 99;
+      color: #333;
+      line-height: 36px;
+      text-align: left;
+      background-color: #fff;
+      border-radius: @van-doc-border-radius;
+      box-shadow: 0 4px 12px #ebedf0;
+      transform-origin: top;
+      transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+      &-item {
+        padding-left: 12px;
+        transition: 0.2s;
+
+        &:hover {
+          color: @van-doc-blue;
+        }
+      }
+    }
+  }
+
+  &__logo {
+    display: block;
+
+    img,
+    span {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    img {
+      width: 24px;
+      margin-right: 10px;
+    }
+
+    span {
+      color: #fff;
+      font-size: 22px;
+    }
+  }
+
+  &__logo-link {
+    img {
+      display: block;
+      width: 26px;
+      height: 26px;
+      transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+      &:hover {
+        transform: scale(1.2);
+      }
+    }
+  }
+}
+
+.van-doc-dropdown {
+  &-enter,
+  &-leave-active {
+    transform: scaleY(0);
+    opacity: 0;
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/Nav.vue
+++ b/vant/packages/vant-cli/site/desktop/components/Nav.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="van-doc-nav" :style="style">
+    <div
+      v-for="(group, index) in navConfig"
+      class="van-doc-nav__group"
+      :key="index"
+    >
+      <div class="van-doc-nav__title">
+        {{ group.title }}
+      </div>
+      <template v-if="group.items">
+        <div
+          v-for="(item, groupIndex) in group.items"
+          :key="groupIndex"
+          class="van-doc-nav__item"
+        >
+          <van-doc-nav-link :item="item" :base="base" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavLink from './NavLink';
+
+export default {
+  name: 'van-doc-nav',
+
+  components: {
+    [NavLink.name]: NavLink,
+  },
+
+  props: {
+    lang: String,
+    navConfig: Array,
+  },
+
+  data() {
+    return {
+      top: 60,
+      bottom: 0,
+    };
+  },
+
+  computed: {
+    style() {
+      return {
+        top: this.top + 'px',
+        bottom: this.bottom + 'px',
+      };
+    },
+
+    base() {
+      return this.lang ? `/${this.lang}/` : '/';
+    },
+  },
+
+  created() {
+    window.addEventListener('scroll', this.onScroll);
+    this.onScroll();
+  },
+
+  methods: {
+    onScroll() {
+      const { pageYOffset: offset } = window;
+      this.top = Math.max(0, 60 - offset);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-nav {
+  position: fixed;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  min-width: @van-doc-nav-width;
+  max-width: @van-doc-nav-width;
+  padding: 24px 0 72px;
+  overflow-y: scroll;
+  background-color: #fff;
+  box-shadow: 0 8px 12px #ebedf0;
+
+  @media (min-width: @van-doc-row-max-width) {
+    left: 50%;
+    margin-left: -(@van-doc-row-max-width / 2);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 6px;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(69, 90, 100, 0.2);
+  }
+
+  &__group {
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    padding: 8px 0 8px @van-doc-padding;
+    color: #455a64;
+    font-weight: 500;
+    font-size: 15px;
+    line-height: 28px;
+  }
+
+  &__item {
+    a {
+      display: block;
+      margin: 0;
+      padding: 8px 0 8px @van-doc-padding;
+      color: #455a64;
+      font-size: 14px;
+      line-height: 28px;
+      transition: color 0.2s;
+
+      &:hover,
+      &.active {
+        color: @van-doc-green;
+      }
+
+      &.active {
+        -webkit-font-smoothing: auto;
+      }
+
+      span {
+        font-size: 13px;
+      }
+    }
+  }
+
+  @media (max-width: 1300px) {
+    &__item {
+      a {
+        font-size: 13px;
+      }
+
+      &:active {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/NavLink.vue
+++ b/vant/packages/vant-cli/site/desktop/components/NavLink.vue
@@ -0,0 +1,62 @@
+<template>
+  <router-link
+    v-if="item.path"
+    :class="{ active }"
+    :to="path"
+    v-html="itemName"
+  />
+  <a v-else-if="item.link" :href="item.link" v-html="itemName" />
+  <a v-else v-html="itemName" />
+</template>
+
+<script>
+export default {
+  name: 'van-doc-nav-link',
+
+  props: {
+    base: String,
+    item: Object,
+  },
+
+  computed: {
+    itemName() {
+      const name = (this.item.title || this.item.name).split(' ');
+      return `${name[0]} <span>${name.slice(1).join(' ')}</span>`;
+    },
+
+    path() {
+      return `${this.base}${this.item.path}`;
+    },
+
+    active() {
+      if (this.$route.path === this.path) {
+        return true;
+      }
+
+      if (this.item.path === 'home') {
+        return this.$route.path === this.base;
+      }
+
+      return false;
+    },
+  },
+
+  watch: {
+    active() {
+      this.scrollIntoView();
+    },
+  },
+
+  mounted() {
+    this.scrollIntoView();
+  },
+
+  methods: {
+    scrollIntoView() {
+      if (this.active && this.$el && this.$el.scrollIntoViewIfNeeded) {
+        this.$el.scrollIntoViewIfNeeded();
+      }
+    },
+  },
+};
+</script>
--- a/vant/packages/vant-cli/site/desktop/components/SearchInput.vue
+++ b/vant/packages/vant-cli/site/desktop/components/SearchInput.vue
@@ -0,0 +1,101 @@
+<template>
+  <input class="van-doc-search" :placeholder="placeholder" />
+</template>
+
+<script>
+export default {
+  name: 'van-doc-search',
+
+  props: {
+    lang: String,
+    searchConfig: Object,
+  },
+
+  computed: {
+    placeholder() {
+      return this.searchConfig.placeholder || 'Search...';
+    },
+  },
+
+  watch: {
+    lang(lang) {
+      if (this.docsearchInstance) {
+        this.docsearchInstance.algoliaOptions.facetFilters = [`lang:${lang}`];
+      }
+    },
+  },
+
+  mounted() {
+    if (this.searchConfig) {
+      this.docsearchInstance = window.docsearch({
+        ...this.searchConfig,
+        inputSelector: '.van-doc-search',
+        algoliaOptions: {
+          facetFilters: [`lang:${this.lang}`],
+        },
+      });
+    }
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-search {
+  width: 200px;
+  height: 60px;
+  margin-left: 140px;
+  color: #fff;
+  font-size: 14px;
+  background-color: transparent;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: #fff;
+    opacity: 0.7;
+  }
+}
+
+.ds-dropdown-menu {
+  line-height: 1.8;
+}
+
+.algolia-autocomplete {
+  .algolia-docsearch-suggestion--highlight {
+    color: @van-doc-blue;
+    background-color: transparent;
+  }
+
+  .algolia-docsearch-suggestion--title {
+    font-weight: 500;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    .algolia-docsearch-suggestion--highlight {
+      box-shadow: inset 0 -1px 0 0 @van-doc-blue;
+    }
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    border-bottom-color: #eee;
+  }
+
+  .ds-dropdown-menu [class^='ds-dataset-'] {
+    border: none;
+  }
+
+  .ds-dropdown-menu {
+    top: 80% !important;
+    box-shadow: 0 4px 12px #ebedf0;
+
+    &::before {
+      display: none;
+    }
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/Simulator.vue
+++ b/vant/packages/vant-cli/site/desktop/components/Simulator.vue
@@ -0,0 +1,82 @@
+<template>
+  <div :class="['van-doc-simulator', { 'van-doc-simulator-fixed': isFixed }]">
+    <iframe ref="iframe" :src="src" :style="simulatorStyle" frameborder="0" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'van-doc-simulator',
+
+  props: {
+    src: String,
+  },
+
+  data() {
+    return {
+      scrollTop: window.scrollY,
+      windowHeight: window.innerHeight,
+    };
+  },
+
+  computed: {
+    isFixed() {
+      return this.scrollTop > 60;
+    },
+
+    simulatorStyle() {
+      const height = Math.min(640, this.windowHeight - 90);
+      return {
+        height: height + 'px',
+      };
+    },
+  },
+
+  mounted() {
+    window.addEventListener('scroll', () => {
+      this.scrollTop = window.scrollY;
+    });
+    window.addEventListener('resize', () => {
+      this.windowHeight = window.innerHeight;
+    });
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+
+.van-doc-simulator {
+  position: absolute;
+  top: @van-doc-padding + @van-doc-header-top-height;
+  right: @van-doc-padding;
+  z-index: 1;
+  box-sizing: border-box;
+  width: @van-doc-simulator-width;
+  min-width: @van-doc-simulator-width;
+  overflow: hidden;
+  background: #fafafa;
+  border-radius: @van-doc-border-radius;
+  box-shadow: #ebedf0 0 4px 12px;
+
+  @media (max-width: 1100px) {
+    right: auto;
+    left: 750px;
+  }
+
+  @media (min-width: @van-doc-row-max-width) {
+    right: 50%;
+    margin-right: -@van-doc-row-max-width / 2 + 40px;
+  }
+
+  &-fixed {
+    position: fixed;
+    top: @van-doc-padding;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+  }
+}
+</style>
--- a/vant/packages/vant-cli/site/desktop/components/index.vue
+++ b/vant/packages/vant-cli/site/desktop/components/index.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="van-doc">
+    <doc-header
+      :lang="lang"
+      :config="config"
+      :versions="versions"
+      :lang-configs="langConfigs"
+      @switch-version="$emit('switch-version', $event)"
+    />
+    <doc-nav :lang="lang" :nav-config="config.nav" />
+    <doc-container :has-simulator="!!simulator">
+      <doc-content>
+        <slot />
+      </doc-content>
+    </doc-container>
+    <doc-simulator v-if="simulator" :src="simulator" />
+  </div>
+</template>
+
+<script>
+import DocNav from './Nav';
+import DocHeader from './Header';
+import DocContent from './Content';
+import DocContainer from './Container';
+import DocSimulator from './Simulator';
+
+export default {
+  name: 'van-doc',
+
+  components: {
+    DocNav,
+    DocHeader,
+    DocContent,
+    DocContainer,
+    DocSimulator,
+  },
+
+  props: {
+    lang: String,
+    versions: Array,
+    simulator: String,
+    langConfigs: Array,
+    config: {
+      type: Object,
+      required: true,
+    },
+    base: {
+      type: String,
+      default: '',
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line
+    '$route.path'() {
+      this.setNav();
+    },
+  },
+
+  created() {
+    this.setNav();
+    this.keyboardHandler();
+  },
+
+  methods: {
+    setNav() {
+      const { nav } = this.config;
+      const items = nav.reduce((list, item) => list.concat(item.items), []);
+      const currentPath = this.$route.path.split('/').pop();
+
+      let currentIndex;
+      for (let i = 0, len = items.length; i < len; i++) {
+        if (items[i].path === currentPath) {
+          currentIndex = i;
+          break;
+        }
+      }
+
+      this.leftNav = items[currentIndex - 1];
+      this.rightNav = items[currentIndex + 1];
+    },
+
+    keyboardNav(direction) {
+      const nav = direction === 'prev' ? this.leftNav : this.rightNav;
+      if (nav.path) {
+        this.$router.push(this.base + nav.path);
+      }
+    },
+
+    keyboardHandler() {
+      window.addEventListener('keyup', event => {
+        switch (event.keyCode) {
+          case 37: // left
+            this.keyboardNav('prev');
+            break;
+          case 39: // right
+            this.keyboardNav('next');
+            break;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../common/style/var';
+</style>
--- a/vant/packages/vant-cli/site/desktop/index.html
+++ b/vant/packages/vant-cli/site/desktop/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <meta
+      name="description"
+      content="<%= htmlWebpackPlugin.options.description %>"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      href="<%= htmlWebpackPlugin.options.logo %>"
+    />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
+    />
+    <meta http-equiv="Cache-Control" content="no-cache" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <link
+      href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css"
+      rel="stylesheet"
+    />
+    <% if (htmlWebpackPlugin.options.baiduAnalytics) { %>
+    <script>
+      var _hmt = _hmt || [];
+      (function() {
+        var hm = document.createElement('script');
+        hm.src =
+          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduAnalytics.seed %>';
+        var s = document.getElementsByTagName('script')[0];
+        s.parentNode.insertBefore(hm, s);
+      })();
+    </script>
+    <% } %>
+  </head>
+  <body ontouchstart>
+    <div id="app"></div>
+    <script src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
+  </body>
+</html>
--- a/vant/packages/vant-cli/site/desktop/main.js
+++ b/vant/packages/vant-cli/site/desktop/main.js
@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import App from './App';
+import { router } from './router';
+import { scrollToAnchor } from './utils';
+
+if (process.env.NODE_ENV !== 'production') {
+  Vue.config.productionTip = false;
+}
+
+new Vue({
+  el: '#app',
+  mounted() {
+    if (this.$route.hash) {
+      scrollToAnchor(this.$route.hash);
+    }
+  },
+  render: h => h(App),
+  router,
+});
--- a/vant/packages/vant-cli/site/desktop/router.js
+++ b/vant/packages/vant-cli/site/desktop/router.js
@@ -0,0 +1,119 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import { isMobile, decamelize } from '../common';
+import { config, documents } from 'site-desktop-shared';
+import { getLang, setDefaultLang } from '../common/locales';
+import '../common/iframe-router';
+
+if (isMobile) {
+  location.replace('mobile.html' + location.hash);
+}
+
+const { locales, defaultLang } = config.site;
+
+setDefaultLang(defaultLang);
+
+function parseName(name) {
+  if (name.indexOf('_') !== -1) {
+    const pairs = name.split('_');
+    const component = pairs.shift();
+
+    return {
+      component: `${decamelize(component)}`,
+      lang: pairs.join('-'),
+    };
+  }
+
+  return {
+    component: `${decamelize(name)}`,
+    lang: '',
+  };
+}
+
+function getLangFromRoute(route) {
+  const lang = route.path.split('/')[1];
+  const langs = Object.keys(locales);
+
+  if (langs.indexOf(lang) !== -1) {
+    return lang;
+  }
+
+  return getLang();
+}
+
+function getRoutes() {
+  const routes = [];
+  const names = Object.keys(documents);
+
+  if (locales) {
+    routes.push({
+      path: '*',
+      redirect: route => `/${getLangFromRoute(route)}/`,
+    });
+  } else {
+    routes.push({
+      path: '*',
+      redirect: '/',
+    });
+  }
+
+  function addHomeRoute(Home, lang) {
+    routes.push({
+      name: lang,
+      path: `/${lang || ''}`,
+      component: Home,
+      meta: { lang },
+    });
+  }
+
+  names.forEach(name => {
+    const { component, lang } = parseName(name);
+
+    if (component === 'home') {
+      addHomeRoute(documents[name], lang);
+    }
+
+    if (lang) {
+      routes.push({
+        name: `${lang}/${component}`,
+        path: `/${lang}/${component}`,
+        component: documents[name],
+        meta: {
+          lang,
+          name: component,
+        },
+      });
+    } else {
+      routes.push({
+        name: `${component}`,
+        path: `/${component}`,
+        component: documents[name],
+        meta: {
+          name: component,
+        },
+      });
+    }
+  });
+
+  return routes;
+}
+
+Vue.use(VueRouter);
+
+export const router = new VueRouter({
+  mode: 'hash',
+  routes: getRoutes(),
+  scrollBehavior(to) {
+    if (to.hash) {
+      return { selector: to.hash };
+    }
+
+    return { x: 0, y: 0 };
+  },
+});
+
+router.afterEach(() => {
+  Vue.nextTick(() => window.syncPath());
+});
+
+window.vueRouter = router;
--- a/vant/packages/vant-cli/site/desktop/utils.js
+++ b/vant/packages/vant-cli/site/desktop/utils.js
@@ -0,0 +1,19 @@
+export function scrollToAnchor(selector) {
+  let count = 0;
+
+  const timer = setInterval(() => {
+    const el = document.querySelector(selector);
+    if (el) {
+      el.scrollIntoView({
+        behavior: 'smooth',
+      });
+      clearInterval(timer);
+    } else {
+      count++;
+
+      if (count > 10) {
+        clearInterval(timer);
+      }
+    }
+  }, 100);
+}
--- a/vant/packages/vant-cli/site/mobile/.pydio
+++ b/vant/packages/vant-cli/site/mobile/.pydio
@@ -0,0 +1 @@
+30e8bd7d-e3e2-45e1-92b5-a2f0e3e45b0a
--- a/vant/packages/vant-cli/site/mobile/App.vue
+++ b/vant/packages/vant-cli/site/mobile/App.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <demo-nav />
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </div>
+</template>
+
+<script>
+import DemoNav from './components/DemoNav';
+
+export default {
+  components: { DemoNav },
+};
+</script>
+
+<style lang="less">
+@import '../common/style/var';
+@import '../common/style/base';
+
+body {
+  min-width: 100vw;
+}
+
+::-webkit-scrollbar {
+  width: 0;
+  background: transparent;
+}
+</style>
--- a/vant/packages/vant-cli/site/mobile/components/.pydio
+++ b/vant/packages/vant-cli/site/mobile/components/.pydio
@@ -0,0 +1 @@
+2ac1d033-d3a3-4e0c-bfd7-d9f0d1b5a9e5
--- a/vant/packages/vant-cli/site/mobile/components/ArrowRight.vue
+++ b/vant/packages/vant-cli/site/mobile/components/ArrowRight.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg viewBox="0 0 1024 1024">
+    <path
+      fill="#B6C3D2"
+      d="M601.1 556.5L333.8 289.3c-24.5-24.5-24.5-64.6 0-89.1s64.6-24.5 89.1 0l267.3 267.3c24.5 24.5 24.5 64.6 0 89.1-24.5 24.4-64.6 24.4-89.1-.1z"
+    />
+    <path
+      fill="#B6C3D2"
+      d="M690.2 556.5L422.9 823.8c-24.5 24.5-64.6 24.5-89.1 0s-24.5-64.6 0-89.1l267.3-267.3c24.5-24.5 64.6-24.5 89.1 0 24.5 24.6 24.5 64.6 0 89.1z"
+    />
+  </svg>
+</template>
--- a/Show More
+++ b/Show More