diff --git a/packages/vant-cli/generators/.eslintignore b/packages/vant-cli/generators/.eslintignore
new file mode 100644
index 000000000..c05831264
--- /dev/null
+++ b/packages/vant-cli/generators/.eslintignore
@@ -0,0 +1,4 @@
+es
+lib
+dist
+node_modules
diff --git a/packages/vant-cli/generators/.gitignore b/packages/vant-cli/generators/.gitignore
new file mode 100644
index 000000000..8159d27da
--- /dev/null
+++ b/packages/vant-cli/generators/.gitignore
@@ -0,0 +1,17 @@
+*.log*
+.cache
+.DS_Store
+.idea
+.vscode
+
+# npm
+node_modules
+package-lock.json
+
+# dist file
+es
+lib
+site
+
+# test
+test/coverage
diff --git a/packages/vant-cli/generators/babel.config.js b/packages/vant-cli/generators/babel.config.js
new file mode 100644
index 000000000..27fec6e80
--- /dev/null
+++ b/packages/vant-cli/generators/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vant/cli/preset']
+};
diff --git a/packages/vant-cli/generators/docs/home.md b/packages/vant-cli/generators/docs/home.md
new file mode 100644
index 000000000..3c7c761b5
--- /dev/null
+++ b/packages/vant-cli/generators/docs/home.md
@@ -0,0 +1,11 @@
+# 介绍
+
+### 关于
+
+这是一段组件库的介绍
+
+### 特性
+
+- 特性一
+- 特性二
+- 特性三
diff --git a/packages/vant-cli/generators/docs/quickstart.md b/packages/vant-cli/generators/docs/quickstart.md
new file mode 100644
index 000000000..5c48a838c
--- /dev/null
+++ b/packages/vant-cli/generators/docs/quickstart.md
@@ -0,0 +1,15 @@
+# 快速上手
+
+### 安装
+
+```bash
+# 通过 npm 安装
+npm i vant -S
+
+# 通过 yarn 安装
+yarn add vant
+```
+
+### 引入组件
+
+这是一段引入组件的介绍
diff --git a/packages/vant-cli/generators/package.json b/packages/vant-cli/generators/package.json
new file mode 100644
index 000000000..55f7e1034
--- /dev/null
+++ b/packages/vant-cli/generators/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "@youzan/demo-ui",
+  "version": "1.0.0",
+  "description": "",
+  "main": "lib/demo-ui.js",
+  "style": "lib/demo-ui.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": {
+    "vant": "^2.2.16",
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vant/cli": "^2.0.0",
+    "babel-plugin-import": "^1.13.0",
+    "vant": "^2.2.16",
+    "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"
+  ]
+}
diff --git a/packages/vant-cli/generators/src/my-button/README.md b/packages/vant-cli/generators/src/my-button/README.md
new file mode 100644
index 000000000..1272d05a6
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-button/README.md
@@ -0,0 +1,49 @@
+# MyButton 按钮
+
+### 介绍
+
+MyButton 是一个示例按钮组件
+
+### 引入
+
+``` javascript
+import Vue from 'vue';
+import { MyButton } from 'demo-ui';
+
+Vue.use(MyButton);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<my-button type="primary" />
+```
+
+### 自定义颜色
+
+```html
+<my-button color="#03a9f4" />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| type | 按钮类型 | *string* | `primary` | - |
+| color | 按钮颜色 | *string* | - | 1.0.0 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
diff --git a/packages/vant-cli/generators/src/my-button/demo/index.vue b/packages/vant-cli/generators/src/my-button/demo/index.vue
new file mode 100644
index 000000000..6592a3f95
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-button/demo/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <demo-section>
+    <demo-block title="基础用法">
+      <my-button type="primary" style="margin-left: 15px;">按钮</my-button>
+    </demo-block>
+
+    <demo-block title="自定义颜色">
+      <my-button color="#03a9f4" style="margin-left: 15px;">按钮</my-button>
+    </demo-block>
+  </demo-section>
+</template>
diff --git a/packages/vant-cli/generators/src/my-button/index.less b/packages/vant-cli/generators/src/my-button/index.less
new file mode 100644
index 000000000..6446ebfd4
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-button/index.less
@@ -0,0 +1,3 @@
+.test {
+  color: red;
+}
diff --git a/packages/vant-cli/generators/src/my-button/index.vue b/packages/vant-cli/generators/src/my-button/index.vue
new file mode 100644
index 000000000..b3857983d
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-button/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <van-button :type="type" :color="color" class="my-button">
+    <slot />
+  </van-button>
+</template>
+
+<script>
+import { Button } from 'vant';
+import MyIcon from '../my-icon';
+import { foo } from './utils';
+
+export default {
+  name: 'my-button',
+
+  components: {
+    [MyIcon.name]: MyIcon,
+    [Button.name]: Button
+  },
+
+  props: {
+    color: String,
+    type: {
+      type: String,
+      default: 'primary'
+    }
+  },
+
+  methods: {
+    foo
+  }
+};
+</script>
+
+<style lang="less">
+.my-button {
+  min-width: 120px;
+  font-weight: 500;
+}
+</style>
diff --git a/packages/vant-cli/generators/src/my-button/test/__snapshots__/index.spec.js.snap b/packages/vant-cli/generators/src/my-button/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..15814b52e
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-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="my-button van-button van-button--primary van-button--normal"></button>`;
diff --git a/packages/vant-cli/generators/src/my-button/test/index.spec.js b/packages/vant-cli/generators/src/my-button/test/index.spec.js
new file mode 100644
index 000000000..87c961d6c
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-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();
+});
diff --git a/packages/vant-cli/generators/src/my-button/utils.ts b/packages/vant-cli/generators/src/my-button/utils.ts
new file mode 100644
index 000000000..e5bd111b4
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-button/utils.ts
@@ -0,0 +1,3 @@
+export function foo() {
+  return 'bar';
+}
diff --git a/packages/vant-cli/generators/src/my-cell/README.md b/packages/vant-cli/generators/src/my-cell/README.md
new file mode 100644
index 000000000..5299a4830
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-cell/README.md
@@ -0,0 +1,49 @@
+# MyCell 单元格
+
+### 介绍
+
+MyCell 是一个示例单元格组件
+
+### 引入
+
+``` javascript
+import Vue from 'vue';
+import { MyCell } from 'demo-ui';
+
+Vue.use(MyCell);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<my-cell title="单元格" />
+```
+
+### 显示箭头
+
+```html
+<my-cell title="单元格" is-link />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| title | 单元格标题 | *string* | `-` | - |
+| is-link | 是否为可点击单元格 | *boolean* | `false` | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击时触发 | event: Event |
+
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
diff --git a/packages/vant-cli/generators/src/my-cell/demo/index.vue b/packages/vant-cli/generators/src/my-cell/demo/index.vue
new file mode 100644
index 000000000..3b6d6ab9a
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-cell/demo/index.vue
@@ -0,0 +1,11 @@
+<template>
+  <demo-section>
+    <demo-block title="基础用法">
+      <my-cell title="单元格" />
+    </demo-block>
+
+    <demo-block title="显示箭头">
+      <my-cell title="单元格" is-link />
+    </demo-block>
+  </demo-section>
+</template>
diff --git a/packages/vant-cli/generators/src/my-cell/index.jsx b/packages/vant-cli/generators/src/my-cell/index.jsx
new file mode 100644
index 000000000..8ea9d7833
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-cell/index.jsx
@@ -0,0 +1,14 @@
+import { Cell } from 'vant';
+
+export default {
+  name: 'my-cell',
+
+  props: {
+    title: String,
+    isLink: Boolean
+  },
+
+  render() {
+    return <Cell class="my-cell" title={this.title} isLink={this.isLink} />;
+  }
+};
diff --git a/packages/vant-cli/generators/src/my-cell/index.less b/packages/vant-cli/generators/src/my-cell/index.less
new file mode 100644
index 000000000..4db6e9469
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-cell/index.less
@@ -0,0 +1,8 @@
+.my-cell {
+  padding: 16px;
+  font-weight: 500;
+
+  .van-cell__value {
+    color: #333;
+  }
+}
diff --git a/packages/vant-cli/generators/src/my-icon/README.md b/packages/vant-cli/generators/src/my-icon/README.md
new file mode 100644
index 000000000..7fe23619a
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-icon/README.md
@@ -0,0 +1,37 @@
+# MyIcon 图标
+
+### 介绍
+
+MyIcon 是一个示例图标组件
+
+### 引入
+
+``` javascript
+import Vue from 'vue';
+import { MyIcon } from 'demo-ui';
+
+Vue.use(MyIcon);
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<my-icon name="success" />
+```
+
+### 显示箭头
+
+```html
+<my-icon name="success" dot />
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| name | 图标名称 | *string* | `-` | - |
+| dot | 是否展示红点 | *boolean* | `false` | - |
diff --git a/packages/vant-cli/generators/src/my-icon/demo/index.vue b/packages/vant-cli/generators/src/my-icon/demo/index.vue
new file mode 100644
index 000000000..789fca4a5
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-icon/demo/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <demo-section>
+    <demo-block title="基础用法">
+      <my-icon name="success" />
+    </demo-block>
+
+    <demo-block title="显示红点">
+      <my-icon name="success" dot />
+    </demo-block>
+  </demo-section>
+</template>
+
+<style lang="less">
+.demo-my-icon {
+  .my-icon {
+    margin-left: 16px;
+  }
+}
+</style>
diff --git a/packages/vant-cli/generators/src/my-icon/index.jsx b/packages/vant-cli/generators/src/my-icon/index.jsx
new file mode 100644
index 000000000..d00b0bb8f
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-icon/index.jsx
@@ -0,0 +1,14 @@
+import { Icon } from 'vant';
+
+export default {
+  name: 'my-icon',
+
+  props: {
+    name: String,
+    dot: Boolean
+  },
+
+  render() {
+    return <Icon name={this.name} dot={this.dot} class="my-icon" />;
+  }
+};
diff --git a/packages/vant-cli/generators/src/my-icon/index.less b/packages/vant-cli/generators/src/my-icon/index.less
new file mode 100644
index 000000000..af143f320
--- /dev/null
+++ b/packages/vant-cli/generators/src/my-icon/index.less
@@ -0,0 +1,3 @@
+.my-icon {
+  font-size: 32px;
+}
diff --git a/packages/vant-cli/generators/src/style/base.less b/packages/vant-cli/generators/src/style/base.less
new file mode 100644
index 000000000..880da5087
--- /dev/null
+++ b/packages/vant-cli/generators/src/style/base.less
@@ -0,0 +1,5 @@
+@import "./var.less";
+
+body {
+  color: @text-color;
+}
diff --git a/packages/vant-cli/generators/src/style/var.less b/packages/vant-cli/generators/src/style/var.less
new file mode 100644
index 000000000..f636b24d8
--- /dev/null
+++ b/packages/vant-cli/generators/src/style/var.less
@@ -0,0 +1,2 @@
+@primary-color: #f44;
+@text-color: #4a4a4a;
diff --git a/packages/vant-cli/generators/vant.config.js b/packages/vant-cli/generators/vant.config.js
new file mode 100644
index 000000000..5214c8a26
--- /dev/null
+++ b/packages/vant-cli/generators/vant.config.js
@@ -0,0 +1,49 @@
+module.exports = {
+  name: 'demo-ui',
+  build: {
+    site: {
+      publicPath: '/demo-ui/'
+    }
+  },
+  site: {
+    title: 'Demo UI',
+    logo: 'https://img.yzcdn.cn/vant/logo.png',
+    nav: [
+      {
+        title: '开发指南',
+        items: [
+          {
+            path: 'home',
+            title: '介绍'
+          },
+          {
+            path: 'quickstart',
+            title: '快速上手'
+          }
+        ]
+      },
+      {
+        title: '基础组件',
+        items: [
+          {
+            path: 'my-button',
+            title: 'MyButton 按钮'
+          },
+          {
+            path: 'my-icon',
+            title: 'MyIcon 图标'
+          }
+        ]
+      },
+      {
+        title: '展示组件',
+        items: [
+          {
+            path: 'my-cell',
+            title: 'MyCell 单元格'
+          }
+        ]
+      }
+    ]
+  }
+};