添加文档网站 (#126)

[new feature] Doc: 添加文档网站
2025-04-06 03:58:05 +08:00 · 2018-02-13 17:42:21 +08:00 · 2018-02-13 17:42:21 +08:00 · 37cdd28aff
commit 37cdd28aff
parent 56605cc5f3
53 changed files with 10612 additions and 1 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,206 @@
+{
+  "name": "zanui-weapp",
+  "version": "2.4.4",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "array-union": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+      "requires": {
+        "array-uniq": "1.0.3"
+      }
+    },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "async": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz",
+      "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==",
+      "requires": {
+        "lodash": "4.17.5"
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    },
+    "base64url": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-2.0.0.tgz",
+      "integrity": "sha1-6sFuA+oUOO/5Qj1puqNiYu0fcLs="
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "commander": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.11.0.tgz",
+      "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "fs-extra": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+      "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "jsonfile": "4.0.0",
+        "universalify": "0.1.1"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "gh-pages": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-1.1.0.tgz",
+      "integrity": "sha512-ZpDkeOVmIrN5mz+sBWDz5zmTqcbNJzI/updCwEv/7rrSdpTNlj1B5GhBqG7f4Q8p5sJOdnBV0SIqxJrxtZQ9FA==",
+      "requires": {
+        "async": "2.6.0",
+        "base64url": "2.0.0",
+        "commander": "2.11.0",
+        "fs-extra": "4.0.3",
+        "globby": "6.1.0",
+        "graceful-fs": "4.1.11",
+        "rimraf": "2.6.2"
+      }
+    },
+    "glob": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+      "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+      "requires": {
+        "fs.realpath": "1.0.0",
+        "inflight": "1.0.6",
+        "inherits": "2.0.3",
+        "minimatch": "3.0.4",
+        "once": "1.4.0",
+        "path-is-absolute": "1.0.1"
+      }
+    },
+    "globby": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+      "requires": {
+        "array-union": "1.0.2",
+        "glob": "7.1.2",
+        "object-assign": "4.1.1",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1"
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "1.4.0",
+        "wrappy": "1.0.2"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "requires": {
+        "graceful-fs": "4.1.11"
+      }
+    },
+    "lodash": {
+      "version": "4.17.5",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+      "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "1.1.11"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1.0.2"
+      }
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "requires": {
+        "pinkie": "2.0.4"
+      }
+    },
+    "rimraf": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
+      "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
+      "requires": {
+        "glob": "7.1.2"
+      }
+    },
+    "universalify": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
+      "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@ -11,7 +11,9 @@
    "components": "node scripts/build-components.js --color",
    "changelog": "sh scripts/build-changelog.sh",
    "icon": "sh scripts/build-icon.sh",
-    "dev": "node scripts/build-dev.js --color"
+    "dev": "node scripts/build-dev.js --color",
+    "build": "sh scripts/deploy.sh",
+    "deploy": "npm run build && superman cdn basic && gh-pages -d website/dist --remote youzan"
  },
  "repository": {
    "type": "git",
@ -38,5 +40,8 @@
    "postcss-easy-import": "^3.0.0",
    "precss": "^2.0.0",
    "shelljs": "^0.7.8"
+  },
+  "dependencies": {
+    "gh-pages": "^1.1.0"
  }
 }
--- a/scripts/deploy.sh
+++ b/scripts/deploy.sh
@ -0,0 +1,7 @@
+cd website && yarn && yarn cache node_modules
+
+npm run build
+
+cd ../
+
+
--- a/superman.json
+++ b/superman.json
@ -0,0 +1,8 @@
+{
+  "cdn": {
+    "basic": {
+      "src": ["website/dist/**/*.*"],
+      "dist": "zanui/weapp"
+    }
+  }
+}
--- a/website/.babelrc
+++ b/website/.babelrc
@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
+    }
+  }
+}
--- a/website/.editorconfig
+++ b/website/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/website/.eslintignore
+++ b/website/.eslintignore
@ -0,0 +1,6 @@
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/
+/src/components/vant-doc
--- a/website/.eslintrc.js
+++ b/website/.eslintrc.js
@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
--- a/website/.gitignore
+++ b/website/.gitignore
@ -0,0 +1,17 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/website/.postcssrc.js
+++ b/website/.postcssrc.js
@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/website/README.md
+++ b/website/README.md
@ -0,0 +1,91 @@
+# doc-web-cli
+
+一个简单易用的网页文档生成工具
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# 安装
+npm install doc-web-cli -g
+# 初始化配置文档
+doc-web init 
+
+# 自动提取项目中的 markdown 文件
+doc-web doc --config=your-config-path --out=your-website-path --docs=your-docs-path
+
+# 生成网站
+doc-web build --config=your-config-path --out=your-website-path --docs=your-docs-path
+```
+## 配置
+
+- command
+  - init
+  - doc
+  - build
+
+- config
+
+  {
+    UI: [
+      自定义的UI库会其他库
+    ],
+    header: {
+      logo: {
+        image: 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png',
+        title: 'ZanUI',
+        href: 'http://www.youzanyun.com/zanui'
+      },
+      nav: {
+        lang: {
+          text: 'En',
+          from: 'zh-CN',
+          to: 'en-US'
+        },
+        github: 'https://github.com/youzan/vant'
+      }
+    },
+    footer: {
+      github: 'https://github.com/youzan/vant',
+      nav: {
+        'React 组件库': 'https://www.youzanyun.com/zanui/zent',
+        小程序组件库: 'https://github.com/youzan/zanui-weapp',
+        意见反馈: 'https://github.com/youzan/vant/issues',
+        开发指南: 'https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.zh-CN.md',
+        加入我们: 'https://job.youzan.com'
+      }
+    },
+    docs: {
+      base: 'zanui',
+      category: [{
+        base: 'base',
+        label: '基础',
+        include: {
+          badge: import('../../packages/badge/README.md')
+        }
+      }],
+      include: {
+        badge: import('../../packages/badge/README.md')
+      }
+    }
+    /**
+    lang: {
+      'zn-ch': {
+        docs: {
+          base: 'zanui',
+          category: [{
+            base: 'base',
+            label: '基础',
+            include: {
+              badge: import('../../packages/badge/README.md')
+            }
+          }],
+          include: {
+            badge: import('../../packages/badge/README.md')
+          }
+        }
+      }
+    }
+    */
+  }
--- a/website/bin/gen-doc.js
+++ b/website/bin/gen-doc.js
@ -0,0 +1,25 @@
+const argv = require('yarns')
+const path = require('path')
+const shell = require('shelljs')
+const file = require('./../build/file')
+const buildDocConfig = require('./../build/doc')
+const tplPath = path.resolve(__dirname, '../doc.config.js.tpl')
+const websitePath = path.resolve(__dirname, '../')
+const docsPath = path.resolve(__dirname, argv.docPath)
+const configPath = path.join(process.cwd(), argv.config)
+const outputPath = path.join(process.cwd(), argv.output || 'dist')
+
+if (Object.hasPrototypeof(argv, 'init')) {
+  shell.cp(tplPath, configPath)
+}
+
+if (!argv.config) return console.log('config 参数必须')
+if (!file.hasFile(configPath)) return console.log(`找不到文件：${configPath}`)
+
+if (Object.hasPrototypeof(argv, 'doc')) {
+  buildDocConfig(docsPath, configPath)
+}
+
+if (Object.hasPrototypeof(argv, 'build')) {
+  //
+}
--- a/website/build/build.js
+++ b/website/build/build.js
@ -0,0 +1,41 @@
+'use strict'
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+const ora = require('ora')
+const rm = require('rimraf')
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const config = require('../config')
+const webpackConfig = require('./webpack.prod.conf')
+
+const spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
--- a/website/build/check-versions.js
+++ b/website/build/check-versions.js
@ -0,0 +1,54 @@
+'use strict'
+const chalk = require('chalk')
+const semver = require('semver')
+const packageConfig = require('../package.json')
+const shell = require('shelljs')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  }
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  const warnings = []
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log('  ' + warning)
+    }
+
+    console.log()
+    process.exit(1)
+  }
+}
--- a/website/build/demo.js
+++ b/website/build/demo.js
@ -0,0 +1,29 @@
+const path = require('path')
+const fs = require('fs')
+const file = require('./file')
+const demoPath = path.join(__dirname, '../../example/pages')
+
+function getDemoFiles (demoDir) {
+  if (!file.hasFile(demoDir)) return {}
+  let files = file.getFiles(demoDir)
+  let conf = {}
+  files.forEach(_file => {
+    let ext = file.getExtname(_file)
+    conf[ext] = fs.readFileSync(_file, 'utf-8')
+  })
+  return conf
+}
+
+function getDemoDir (docFile) {
+  return path.join(demoPath, docFile.split('/').pop())
+}
+
+module.exports = function (template) {
+  let demoDir = getDemoDir(this.context)
+  let demoConf = getDemoFiles(demoDir)
+  template = Object.keys(demoConf).reduce((res, key) => {
+    res += `\n~~~ ${key}\n${demoConf[key]}~~~`
+    return res
+  }, template + `<wxapp-demo demo-types="${Object.keys(demoConf)}">\n`)
+  return template + '\n</wxapp-demo>'
+}
--- a/website/build/doc.js
+++ b/website/build/doc.js
@ -0,0 +1,89 @@
+let path = require('path')
+let file = require('./file')
+let fs = require('fs')
+let esprima = require('esprima')
+let estraverse = require('estraverse')
+let escodegen = require('escodegen')
+let commander = require('commander')
+
+commander
+  .option('--docs <doc dirs>', '文档目录位置')
+  .option('--async', '文档加载方式')
+  .parse(process.argv)
+
+const processDir = process.cwd()
+
+const confFile = path.join(__dirname, '../src/doc.config.js')
+const moduleType = commander.async ? '__import__' : '__require__'
+let docDirs = commander.docs.split(',')
+docDirs = Array.isArray(docDirs) ? docDirs : []
+let mds = {}
+docDirs.forEach(dir => {
+  let docDir = path.join(processDir, dir)
+  mds = Object.assign({}, mds, getDocFiles(docDir))
+})
+
+const code = parseASTToCode(mds, parseCodeToAST(confFile))
+
+updateConfig(code, confFile)
+
+function getDocFiles (docDir) {
+  const confDir = path.join(__dirname, '../src')
+
+  let mds = file.getFiles(docDir).filter(f => {
+    return file.getExtname(f) === 'md'
+  })
+
+  return mds.reduce((res, f) => {
+    let dir = path.dirname(f)
+    let relativePath = path.relative(confDir, f)
+    let key = dir.substr(dir.lastIndexOf('/') + 1)
+    res[key] = relativePath
+    return res
+  }, {})
+}
+
+function parseCodeToAST (confFile) {
+  let config = fs.readFileSync(confFile, 'utf-8').replace(/import/g, moduleType)
+  return esprima.parseScript(config)
+}
+
+function parseASTToCode (docs, ast) {
+  let keys = Object.keys(docs)
+  ast = estraverse.replace(ast, {
+    enter (node, parent) {
+      if (node.name === 'include') {
+        estraverse.replace(parent.value, {
+          enter (node, parent) {
+            if (node.type === 'Identifier' && parent.type === 'Property' && keys.indexOf(node.name) !== -1) {
+              let path = docs[node.name]
+              parent.value = esprima.parseScript(`${moduleType}('${path}')`).body[0]
+              delete docs[node.name]
+            }
+          }
+        })
+      }
+    }
+  })
+
+  ast = estraverse.replace(ast, {
+    enter (node, parent) {
+      if (node.name === 'docs') {
+        let properties = parent.value.properties.filter(prop => prop.key.name === 'include')
+        let newProperties = Object.keys(docs).map(key => `${key}: ${moduleType}('${docs[key]}')`)
+        if (newProperties.length) {
+          newProperties = 'props = {' + newProperties.join() + '}'
+          newProperties = esprima.parseScript(newProperties).body[0].expression.right.properties
+          properties[0].value.properties.push(...newProperties)
+        }
+      }
+    }
+  })
+  let reg = new RegExp(moduleType, 'g')
+  let code = escodegen.generate(ast).replace(reg, moduleType === '__import__' ? 'import' : 'require').replace(/;/g, '')
+  return code
+}
+
+function updateConfig (code, confFile) {
+  file.mkfile(confFile, code)
+}
--- a/website/build/file.js
+++ b/website/build/file.js
@ -0,0 +1,115 @@
+let path = require('path')
+let fs = require('fs')
+let Readable = require('stream').Readable
+let process = require('child_process')
+function mkfile(filename, string = '') {
+  let dir = path.dirname(filename)
+  if (dir === '.' || dir === '..' || existFile(mkfile)) {
+    return
+  }
+  mkdir(dir)
+  fs.writeFileSync(filename, string, {mode: 0777, encoding: 'utf8'})
+}
+function mkfileStream (from, to) {
+  try {
+    mkfile(to)
+    let reader = fs.createReadStream(from)
+    reader.pipe(fs.createWriteStream(to))
+    reader.on('end', () => `File modify: ${to}`)
+  } catch (e) {
+    console.log(e);
+  }
+}
+function rmdir(dir) {
+  let files = getFiles(dir)
+  let dirs = getDirs(dir)
+  files.forEach((file) => {
+    rmFile(file)
+  })
+  dirs.forEach((dir) => {
+    fs.rmdirSync(dir)
+  })
+  fs.rmdirSync(dir)
+}
+function getExtname (fileName) {
+  let ext = path.extname(fileName)
+  return ext ? ext.substr(1) : ''
+}
+function isJS (file) {
+  let ext = getExtname(file)
+  return ext === 'js' ? true : false
+}
+function getDirs (dir) {
+  let files = fs.readdirSync(dir)
+  let fileList = []
+  files.forEach((file) => {
+    file = path.join(dir, file)
+    if (isDir(file)) {
+      fileList.push(...getDirs(file), file)
+    }
+  })
+  return fileList
+}
+function getFiles (dir) {
+  let files = fs.readdirSync(dir)
+  let fileList = []
+  files.forEach((file) => {
+    file = path.join(dir, file)
+    isDir(file) ? fileList.push(...getFiles(file)) : fileList.push(file)
+  })
+  return fileList
+}
+function hasFile (dir) {
+  try {
+    return fs.readdirSync(dir).length
+  } catch (e) {
+    return 0
+  }
+}
+function mkdir (dir) {
+  let parPath = path.dirname(dir)
+  if (isDir(dir)) {
+    return
+  } else if (!isDir(parPath)) {
+    mkdir(parPath)
+  }
+  fs.mkdirSync(dir, 0777)
+}
+function rmFile (file) {
+  return fs.existsSync(file) && fs.unlinkSync(file)
+}
+function isDir(dir) {
+  return fs.existsSync(dir) && fs.statSync(dir).isDirectory()
+}
+function existFile (file) {
+  return fs.existsSync(file)
+}
+function readLines (file) {
+  if (isDir(file)) throw new Error('参数必须是一个文件')
+  let index = 0
+  let lines = fs.readFileSync(file, 'utf-8').split(/[\n|\n\r]/)
+
+  lines.next = function () {
+    return lines[index + 1]
+  }
+
+  lines.find = function (word) {
+    let i = -1
+    while(i === -1 || lines[i].indexOf(word) === -1) {
+      i++
+    }
+    return i
+  }
+  return lines
+}
+exports.getExtname = getExtname
+exports.mkfile = mkfile
+exports.getFiles = getFiles
+exports.isJS = isJS
+exports.mkfileStream = mkfileStream
+exports.rmdir = rmdir
+exports.hasFile = hasFile
+exports.rmFile = rmFile
+exports.mkdir = mkdir
+exports.existFile = existFile
+exports.readLines = readLines
--- a/website/build/markdown-loader.js
+++ b/website/build/markdown-loader.js
@ -0,0 +1,173 @@
+var hljs = require('highlight.js')
+var cheerio = require('cheerio')
+var markdown = require('markdown-it')
+var Token = require('markdown-it/lib/token')
+
+/**
+ * `<pre></pre>` => `<pre v-pre></pre>`
+ * `<code></code>` => `<code v-pre></code>`
+ * @param  {string} str
+ * @return {string}
+ */
+var addVuePreviewAttr = function (str) {
+  return str.replace(/(<pre|<code)/g, '$1 v-pre')
+}
+
+/**
+ * renderHighlight
+ * @param  {string} str
+ * @param  {string} lang
+ */
+var renderHighlight = function (str, lang) {
+  let addtionLang = {wxml: 'html', wxss: 'css'}
+  lang = addtionLang[lang] ? addtionLang[lang] : lang
+  if (!(lang && hljs.getLanguage(lang))) {
+    return ''
+  }
+
+  return hljs.highlight(lang, str, true).value
+}
+
+/**
+ * html => vue file template
+ * @param  {[type]} html [description]
+ * @return {[type]}      [description]
+ */
+var renderVueTemplate = function (html, wrapper) {
+  var $ = cheerio.load(html, {
+    decodeEntities: false,
+    lowerCaseAttributeNames: false,
+    lowerCaseTags: false
+  })
+
+  $('style').remove()
+  $('script').remove()
+
+  let label = $('h1').text() || $('h2').text() || $('h3').text()
+  let template =
+    `
+      <${wrapper}>
+        ${$.html()}
+      </${wrapper}>
+    `
+  return {template, label}
+}
+
+function markdownCompiler (source, opts) {
+  this.cacheable && this.cacheable()
+  var parser, preprocess
+  var vueMarkdownOptions = this.options.__vueMarkdownOptions__
+  var opts = Object.create(vueMarkdownOptions.__proto__) // inherit prototype
+  var preventExtract = false
+
+  opts = Object.assign(opts, vueMarkdownOptions) // assign attributes
+
+  if (opts.preventExtract) {
+    delete opts.preventExtract
+    preventExtract = true
+  }
+
+  if (typeof opts.render === 'function') {
+    parser = opts
+  } else {
+    opts = Object.assign(
+      {
+        preset: 'default',
+        html: true,
+        highlight: renderHighlight,
+        wrapper: 'section'
+      },
+      opts
+    )
+
+    var plugins = opts.use
+    preprocess = opts.preprocess
+
+    delete opts.use
+    delete opts.preprocess
+
+    if (opts.before && typeof opts.before === 'function') {
+      source = opts.before.call(this, source)
+    }
+
+    parser = markdown(opts.preset, opts)
+
+    // add ruler:extract script and style tags from html token content
+    !preventExtract &&
+      parser.core.ruler.push('extract_script_or_style', function replace (
+        state
+      ) {
+        let tag_reg = new RegExp('<(script|style)(?:[^<]|<)+</\\1>', 'g')
+        let newTokens = []
+        state.tokens
+          .filter(token => token.type == 'fence' && token.info == 'html')
+          .forEach(token => {
+            let tokens = (token.content.match(tag_reg) || []).map(content => {
+              let t = new Token('html_block', '', 0)
+              t.content = content
+              return t
+            })
+            if (tokens.length > 0) {
+              newTokens.push.apply(newTokens, tokens)
+            }
+          })
+        state.tokens.push.apply(state.tokens, newTokens)
+      })
+
+    if (plugins) {
+      plugins.forEach(function (plugin) {
+        if (Array.isArray(plugin)) {
+          parser.use.apply(parser, plugin)
+        } else {
+          parser.use(plugin)
+        }
+      })
+    }
+  }
+
+  /**
+   * override default parser rules by adding v-pre attribute on 'code' and 'pre' tags
+   * @param {Array<string>} rules rules to override
+   */
+  function overrideParserRules (rules) {
+    if (parser && parser.renderer && parser.renderer.rules) {
+      var parserRules = parser.renderer.rules
+      rules.forEach(function (rule) {
+        if (parserRules && parserRules[rule]) {
+          var defaultRule = parserRules[rule]
+          parserRules[rule] = function () {
+            return addVuePreviewAttr(defaultRule.apply(this, arguments))
+          }
+        }
+      })
+    }
+  }
+
+  overrideParserRules(['code_inline', 'code_block', 'fence'])
+
+  if (preprocess) {
+    source = preprocess.call(this, parser, source)
+  }
+
+  var content = parser.render(source)
+  var result = renderVueTemplate(content, opts.wrapper)
+
+  if (opts.after && typeof opts.after === 'function') {
+    result = opts.after.call(this, result)
+  }
+  if (opts.raw) {
+    return result
+  } else {
+    return 'module.exports = ' + JSON.stringify(result)
+  }
+}
+
+module.exports = function (source) {
+  this.cacheable()
+
+  this.options.__vueMarkdownOptions__ =
+    this.query || this.vueMarkdown || this.options.vueMarkdown || {}
+
+  var result = markdownCompiler.call(this, source)
+  return result
+}
--- a/website/build/utils.js
+++ b/website/build/utils.js
@ -0,0 +1,101 @@
+'use strict'
+const path = require('path')
+const config = require('../config')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const packageConfig = require('../package.json')
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
+
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier')
+
+  return (severity, errors) => {
+    if (severity !== 'error') return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split('!').pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ': ' + error.name,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png')
+    })
+  }
+}
--- a/website/build/vue-loader.conf.js
+++ b/website/build/vue-loader.conf.js
@ -0,0 +1,22 @@
+'use strict'
+const utils = require('./utils')
+const config = require('../config')
+const isProduction = process.env.NODE_ENV === 'production'
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href'
+  }
+}
--- a/website/build/webpack.base.conf.js
+++ b/website/build/webpack.base.conf.js
@ -0,0 +1,107 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const config = require('../config')
+const vueLoaderConfig = require('./vue-loader.conf')
+const marked = require('marked')
+marked.setOptions({
+  highlight: function (code) {
+    return require('highlight.js').highlightAuto(code).value
+  }
+})
+const getDemoTemplate = require('./demo.js')
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+const createLintingRule = () => ({
+  test: /\.(js|vue)$/,
+  loader: 'eslint-loader',
+  enforce: 'pre',
+  include: [resolve('src'), resolve('test')],
+  options: {
+    formatter: require('eslint-friendly-formatter'),
+    emitWarning: !config.dev.showEslintErrorsInOverlay
+  }
+})
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src')
+    }
+  },
+  module: {
+    rules: [
+      ...(config.dev.useEslint ? [createLintingRule()] : []),
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.md$/,
+        loader: path.resolve(__dirname, './markdown-loader'),
+        options: {
+          before (source) {
+            return getDemoTemplate.call(this, source)
+          }
+        }
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('media/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  },
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
+}
--- a/website/build/webpack.dev.conf.js
+++ b/website/build/webpack.dev.conf.js
@ -0,0 +1,95 @@
+'use strict'
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const path = require('path')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+const portfinder = require('portfinder')
+
+const HOST = process.env.HOST
+const PORT = process.env.PORT && Number(process.env.PORT)
+
+const devWebpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: config.dev.devtool,
+
+  // these devServer options should be customized in /config/index.js
+  devServer: {
+    clientLogLevel: 'warning',
+    historyApiFallback: {
+      rewrites: [
+        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
+      ],
+    },
+    hot: true,
+    contentBase: false, // since we use CopyWebpackPlugin.
+    compress: true,
+    host: HOST || config.dev.host,
+    port: PORT || config.dev.port,
+    open: config.dev.autoOpenBrowser,
+    overlay: config.dev.errorOverlay
+      ? { warnings: false, errors: true }
+      : false,
+    publicPath: config.dev.assetsPublicPath,
+    proxy: config.dev.proxyTable,
+    quiet: true, // necessary for FriendlyErrorsPlugin
+    watchOptions: {
+      poll: config.dev.poll,
+    }
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': require('../config/dev.env')
+    }),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.dev.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+module.exports = new Promise((resolve, reject) => {
+  portfinder.basePort = process.env.PORT || config.dev.port
+  portfinder.getPort((err, port) => {
+    if (err) {
+      reject(err)
+    } else {
+      // publish the new Port, necessary for e2e tests
+      process.env.PORT = port
+      // add port to devServer config
+      devWebpackConfig.devServer.port = port
+
+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+        },
+        onErrors: config.dev.notifyOnErrors
+        ? utils.createNotifierCallback()
+        : undefined
+      }))
+
+      resolve(devWebpackConfig)
+    }
+  })
+})
--- a/website/build/webpack.prod.conf.js
+++ b/website/build/webpack.prod.conf.js
@ -0,0 +1,150 @@
+'use strict'
+const path = require('path')
+const utils = require('./utils')
+const webpack = require('webpack')
+const config = require('../config')
+const merge = require('webpack-merge')
+const baseWebpackConfig = require('./webpack.base.conf')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+const env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : require('../config/prod.env')
+
+const webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true,
+      usePostCSS: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    path: config.build.assetsRoot,
+    publicPath: 'https://b.yzcdn.cn/zanui/weapp/',
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      uglifyOptions: {
+        compress: {
+          warnings: false
+        }
+      },
+      sourceMap: config.build.productionSourceMap,
+      parallel: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css'),
+      // Setting the following option to `false` will not extract CSS from codesplit chunks.
+      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
+      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
+      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
+      allChunks: true
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin({
+      cssProcessorOptions: config.build.productionSourceMap
+        ? { safe: true, map: { inline: false } }
+        : { safe: true }
+    }),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: process.env.NODE_ENV === 'testing'
+        ? 'index.html'
+        : config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // keep module.id stable when vendor modules does not change
+    new webpack.HashedModuleIdsPlugin(),
+    // enable scope hoisting
+    new webpack.optimize.ModuleConcatenationPlugin(),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks (module) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      minChunks: Infinity
+    }),
+    // This instance extracts shared chunks from code splitted chunks and bundles them
+    // in a separate chunk, similar to the vendor chunk
+    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'app',
+      async: 'vendor-async',
+      children: true,
+      minChunks: 3
+    }),
+
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  const CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
--- a/website/config/dev.env.js
+++ b/website/config/dev.env.js
@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
--- a/website/config/index.js
+++ b/website/config/index.js
@ -0,0 +1,76 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
--- a/website/config/prod.env.js
+++ b/website/config/prod.env.js
@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}
--- a/website/config/test.env.js
+++ b/website/config/test.env.js
@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})
--- a/website/doc.config.js.tpl
+++ b/website/doc.config.js.tpl
@ -0,0 +1,59 @@
+module.exports = {
+  header: {
+    logo: {
+      image: 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png',
+      title: 'ZanUI',
+      href: 'http://www.youzanyun.com/zanui'
+    },
+    nav: {
+      lang: {
+        text: 'En',
+        from: 'zh-CN',
+        to: 'en-US'
+      },
+      github: 'https://github.com/youzan/vant'
+    }
+  },
+  footer: {
+    github: 'https://github.com/youzan/vant',
+    nav: {
+      'React 组件库': 'https://www.youzanyun.com/zanui/zent',
+      小程序组件库: 'https://github.com/youzan/zanui-weapp',
+      意见反馈: 'https://github.com/youzan/vant/issues',
+      开发指南: 'https://github.com/youzan/vant/blob/dev/.github/CONTRIBUTING.zh-CN.md',
+      加入我们: 'https://job.youzan.com'
+    }
+  },
+  docs: {
+    base: 'zanui',
+    category: [{
+      base: 'base',
+      label: '基础',
+      include: {
+        badge: import('../../packages/badge/README.md')
+      }
+    }],
+    include: {
+      badge: import('../../packages/badge/README.md')
+    }
+  }
+  /**
+  lang: {
+    'zn-ch': {
+      docs: {
+        base: 'zanui',
+        category: [{
+          base: 'base',
+          label: '基础',
+          include: {
+            badge: import('../../packages/badge/README.md')
+          }
+        }],
+        include: {
+          badge: import('../../packages/badge/README.md')
+        }
+      }
+    }
+  }
+   */
+}
--- a/website/index.html
+++ b/website/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>website</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/website/package.json
+++ b/website/package.json
@ -0,0 +1,100 @@
+{
+  "name": "doc-web-cli",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "liujiandong <liujiandong@youzan.com>",
+  "bin": {
+    "gen-doc": "./bin/gen-doc"
+  },
+  "private": true,
+  "scripts": {
+    "dev": "npm run build:config && npm run lint && webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "build:config": "node build/doc.js --docs ../packages",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "markdown-loader": "^2.0.2",
+    "shelljs": "^0.7.8",
+    "vant-doc": "^1.0.1",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "yargs": "^10.1.1",
+    "escodegen": "^1.9.0",
+    "esprima": "^4.0.0",
+    "estraverse": "^4.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.9",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "nightwatch": "^0.9.12",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.10",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "style-loader": "^0.19.1",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-markdown-loader": "^2.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.9.1",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/website/src/App.vue
+++ b/website/src/App.vue
@ -0,0 +1,44 @@
+<template>
+  <div id="app">
+    <doc-header :config="config.header" active="移动端" />
+    <section class="doc-body">
+      <div class="doc-menus">
+        <side-menu :menus="config.routes || []" />
+      </div>
+      <router-view class="doc-content" />
+    </section>
+     <doc-footer :config="config.footer" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  computed: {
+    config () {
+      return this.$root.getConfig()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.doc-body {
+  display: flex;
+}
+
+@media (min-width: 1024px) {
+  .doc-body {
+    display: flex;
+    width: 1024px;
+    margin: 0 auto;
+  }
+}
+.doc-menus {
+  width: 200px;
+}
+.doc-content {
+  flex: 1;
+  padding: 15px;
+}
+</style>
--- a/website/src/assets/base.css
+++ b/website/src/assets/base.css
@ -0,0 +1,110 @@
+body, ul {
+  margin: 0;
+  padding: 0;
+}
+a {
+  text-decoration: none;
+}
+
+code {
+  display: block;
+  font-size: 13px;
+  overflow-x: auto;
+  font-weight: 400;
+  line-height: 22px;
+  border-radius: 6px;
+  margin-bottom: 25px;
+  position: relative;
+  word-break: break-all;
+  white-space: pre-wrap;
+  background-color: #f5f7fa;
+  color: #455a64;
+  padding: 18px 10px 18px 20px;
+  font-family: "Source Code Pro", "Monaco", "Inconsolata", monospace;
+}
+code::after {
+  top: 5px;
+  right: 10px;
+  position: absolute;
+  color: #ccc;
+  font-size: 12px;
+}
+
+pre {
+  margin: 0;
+}
+pre + pre {
+  margin-top: -10px;
+}
+code.language-html::after {
+  content: 'HTML';
+}
+
+code.language-javascript::after {
+  content: 'JS';
+}
+
+code.language-css::after {
+  content: 'CSS';
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+}
+
+.hljs-subst {
+  color: #455a64;
+}
+
+.hljs-string,
+.hljs-meta,
+.hljs-symbol,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-addition {
+  color: #756bb1;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #999;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-literal,
+.hljs-bullet,
+.hljs-link {
+  color: #31a354;
+}
+
+.hljs-deletion,
+.hljs-variable {
+  color: #88f;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title,
+.hljs-section,
+.hljs-built_in,
+.hljs-doctag,
+.hljs-type,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-strong {
+  color: #1976d2;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-attribute {
+  color: #e6550d;
+}
--- a/website/src/assets/logo.png
+++ b/website/src/assets/logo.png
--- a/website/src/boot/index.js
+++ b/website/src/boot/index.js
@ -0,0 +1,71 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import config from '../doc.config'
+import Documentation from '@/components/Documentation'
+Vue.use(Router)
+if (config.plugins && Array.isArray(config.plugins)) {
+  config.plugins.forEach(plugin => Vue.use(plugin.default || plugin))
+}
+function flatten (arr) {
+  while (arr.some(item => Array.isArray(item))) {
+    arr = [].concat(...arr)
+  }
+  return arr
+}
+
+function join (...rest) {
+  return ('/' + rest.join('/')).replace('//', '/')
+}
+
+function genRouter (docConf) {
+  let routes = []
+  let base = docConf.base || '/'
+
+  if (docConf.category && Array.isArray(docConf.category)) {
+    docConf.category.forEach((category) => {
+      let route = {}
+      route.path = join(base, category.base)
+      route.name = category.label
+      route.component = Documentation
+      route.children = genRouter(category).map(route => {
+        route.path = join(base, route.path)
+        return route
+      })
+      routes.push(route)
+    })
+  }
+  let keys = Object.keys(docConf.include)
+  keys.forEach(key => {
+    let route = {}
+    let isPromise = !!docConf.include[key].then
+    route.path = join(base, key)
+    route.name = key
+    Object.defineProperty(route, '__label', {value: isPromise ? key : docConf.include[key].label})
+    route.component = Documentation
+    routes.push(route)
+    Vue.component(
+      `x-${key}`,
+      () => isPromise ? docConf.include[key] : Promise.resolve(docConf.include[key])
+    )
+  })
+  return routes
+}
+
+let routes = []
+
+if (config.lang) {
+  routes = flatten(Object.keys(config.lang).map(key => {
+    config.lang[key].docs.base = join(key, config.lang[key].docs.base)
+    let routes = genRouter(config.lang[key].docs)
+    config.lang[key].routes = routes
+    return routes
+  }))
+} else {
+  routes = genRouter(config.docs)
+  config.routes = routes
+}
+
+export default {
+  config,
+  router: new Router({ routes })
+}
--- a/website/src/components/Documentation.vue
+++ b/website/src/components/Documentation.vue
@ -0,0 +1,32 @@
+<template>
+  <doc-container>
+    <doc-content>
+      <component :is="component"></component>
+    </doc-content>
+  </doc-container>
+</template>
+<script>
+import Vue from 'vue'
+export default {
+  data () {
+    return {
+      component: null
+    }
+  },
+  created () {
+    this.hasComponent(`x-${this.$route.name}`)
+  },
+  watch: {
+    '$route' ({name}) {
+      this.hasComponent(`x-${name}`)
+    }
+  },
+  methods: {
+    hasComponent (name) {
+      if (Vue.component(name)) {
+        this.component = name
+      }
+    }
+  }
+}
+</script>
--- a/website/src/components/MenuItem.vue
+++ b/website/src/components/MenuItem.vue
@ -0,0 +1,33 @@
+<template>
+  <nav class="menu-item" :class="{active: menu.name === $route.name}">
+    <router-link v-if="!menu.children" :to="{path: menu.path}">{{menu.__label || menu.name}}</router-link>
+    <a class="no-href" v-if="menu.children">{{menu.__label || menu.name}}</a>
+    <menu-item :menu="menu" :key="menu.path" v-for="menu in menu.children"></menu-item>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'menu-item',
+  props: ['menu']
+}
+</script>
+
+<style scoped>
+  .menu-item a {
+    margin: 0;
+    display: block;
+    color: #455a64;
+    font-size: 16px;
+    padding: 8px 20px;
+    line-height: 24px;
+    transition: all .3s;
+  }
+  .menu-item a.no-href {
+    color: #455a64bd;
+  }
+  .menu-item.active {
+    color: #38f;
+    background-color: #f5f7fa;
+  }
+</style>
--- a/website/src/components/SideMenu.vue
+++ b/website/src/components/SideMenu.vue
@ -0,0 +1,28 @@
+<template>
+  <aside class="side-menus" v-if="menus.length">
+    <menu-item :menu="menu" v-for="menu in menus" :key="menu.path"></menu-item>
+  </aside>
+</template>
+
+<script>
+import MenuItem from './MenuItem'
+export default {
+  name: 'SideMneu',
+  props: ['menus'],
+  components: {MenuItem}
+}
+</script>
+
+<style scoped>
+  .side-menus {
+    padding: 15px;
+    width: 200px;
+    padding: 20px 0;
+    min-width: 240px;
+    max-width: 240px;
+  }
+
+  .side-menus .side-menus {
+    padding-left: 15px;
+  }
+</style>
--- a/website/src/doc.config.js
+++ b/website/src/doc.config.js
@ -0,0 +1,90 @@
+module.exports = {
+  header: {
+    logo: {
+      image: 'https://img.yzcdn.cn/public_files/2017/12/18/fd78cf6bb5d12e2a119d0576bedfd230.png',
+      title: 'ZanUI 小程序',
+      href: 'http://www.youzanyun.com/zanui'
+    },
+    nav: {
+      lang: {
+        text: 'En',
+        from: 'zh-CN',
+        to: 'en-US'
+      },
+      github: 'https://github.com/youzan/zanui-weapp'
+    }
+  },
+  footer: {
+    github: 'https://github.com/youzan/zanui-weapp',
+    nav: {
+      'React 组件库': 'https://www.youzanyun.com/zanui/zent',
+      'Vue 组件库': 'https://www.youzanyun.com/zanui/vant',
+      意见反馈: 'https://github.com/youzan/zanui-weapp/issues',
+      开发指南: 'https://github.com/youzan/zanui-weapp/blob/dev/.github/CONTRIBUTING.zh-CN.md',
+      加入我们: 'https://job.youzan.com'
+    }
+  },
+  plugins: [
+    require('./plugins/wxapp-demo'),
+    require('./plugins/vant-doc')
+  ],
+  docs: {
+    base: 'zanui',
+    category: [
+      {
+        base: 'base',
+        label: '基础',
+        include: {
+          icon: require('../../packages/icon/README.md'),
+          btn: require('../../packages/btn/README.md'),
+          helper: require('../../packages/helper/README.md')
+        }
+      },
+      {
+        base: 'layout',
+        label: '布局',
+        include: {
+          row: require('../../packages/row/README.md'),
+          cell: require('../../packages/cell/README.md'),
+          card: require('../../packages/card/README.md'),
+          panel: require('../../packages/panel/README.md')
+        }
+      },
+      {
+        base: 'form',
+        label: '表单',
+        include: {
+          field: require('../../packages/field/README.md'),
+          switch: require('../../packages/switch/README.md'),
+          select: require('../../packages/select/README.md'),
+          stepper: require('../../packages/stepper/README.md')
+        }
+      },
+      {
+        base: 'view',
+        label: '展示',
+        include: {
+          tag: require('../../packages/tag/README.md'),
+          badge: require('../../packages/badge/README.md'),
+          capsule: require('../../packages/capsule/README.md'),
+          noticebar: require('../../packages/noticebar/README.md'),
+          steps: require('../../packages/steps/README.md')
+        }
+      },
+      {
+        base: 'interactive',
+        label: '交互',
+        include: {
+          toast: require('../../packages/toast/README.md'),
+          popup: require('../../packages/popup/README.md'),
+          dialog: require('../../packages/dialog/README.md'),
+          toptips: require('../../packages/toptips/README.md'),
+          tab: require('../../packages/tab/README.md'),
+          loadmore: require('../../packages/loadmore/README.md'),
+          actionsheet: require('../../packages/actionsheet/README.md')
+        }
+      }
+    ],
+    include: {}
+  }
+}
--- a/website/src/main.js
+++ b/website/src/main.js
@ -0,0 +1,26 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import boot from './boot'
+import SideMenu from '@/components/SideMenu'
+
+import '@/assets/base.css'
+Vue.config.productionTip = false
+Vue.component('side-menu', SideMenu)
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router: boot.router,
+  methods: {
+    getConfig (lang) {
+      if (!lang && !boot.config.lang) {
+        return boot.config
+      }
+      return boot.config.lang[lang]
+    }
+  },
+  components: { App },
+  template: '<App/>'
+})
--- a/website/src/plugins/components/WxappPage.vue
+++ b/website/src/plugins/components/WxappPage.vue
@ -0,0 +1,84 @@
+<template>
+  <div class="demo" :class="activeCodeType">
+    <h3 v-if="types.length">示例代码</h3>
+    <div class="demo-view-qrcode">
+      <img src="https://camo.githubusercontent.com/b3e6c0c62d421ef5df9d7e9b8366e6287c0464b7/68747470733a2f2f696d672e797a63646e2e636e2f7075626c69635f66696c65732f323031372f31302f33302f35353464643934306562316132363964346163393133336537386165333231662e6a70673f696d61676556696577322f322f772f3330302f682f333030" />
+      <div>微信扫一扫</div>
+    </div>
+    <!-- <div class="code-type-tabs">
+      <div class="code-type-tab" @click="activeCodeType = $type" v-for="$type in types" :key="$type">
+        {{$type}}
+      </div>
+    </div> -->
+    <div class="demo-code">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['demoTypes'],
+  data () {
+    return {
+      types: [],
+      activeCodeType: ''
+    }
+  },
+  created () {
+    this.types = this.demoTypes ? this.demoTypes.split(',') : []
+    this.activeCodeType = this.types ? this.types[0] : ''
+  }
+}
+</script>
+<style scoped>
+code.language-wxml::after {
+  content: 'WXML';
+}
+
+code.language-js::after {
+  content: 'JS';
+}
+
+code.language-wxss::after {
+  content: 'WXSS';
+}
+
+code.language-json::after {
+  content: 'JSON';
+}
+/* .demo {
+  margin-top: 15px;
+}
+.demo-code {
+  height: 500px;
+  overflow: auto;
+  background-color: #f5f7fa;
+}
+.code-type-tabs {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+.code-type-tab {
+  flex: 1;
+}
+.language-js, .language-wxml, .language-wxss, .language-json {
+  display: none;
+}
+.js .language-js {
+  display: block;
+}
+.json .language-json {
+  display: block;
+}
+.wxml .language-wxml {
+  display: block;
+}
+.wxss .language-wxss {
+  display: block;
+}
+pre + pre {
+  margin-top: 0;
+} */
+</style>
--- a/website/src/plugins/styles/main.css
+++ b/website/src/plugins/styles/main.css
@ -0,0 +1,32 @@
+.van-doc-header {
+  position: fixed;
+  background: #fff;
+  top: 0;
+  z-index: 2;
+}
+.van-doc-footer {
+  position: relative
+}
+.doc-body {
+  margin: 60px auto !important;
+  min-height: 100vh;
+}
+.side-menus {
+  position: fixed;
+  height: calc(100vh - 120px);
+  overflow: auto;
+}
+.demo-view-qrcode {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  padding: 10px;
+  border-radius: 5px;
+  text-align: center;
+  color: #999;
+}
+.demo-view-qrcode img {
+  width: 160px;
+  height: 160px;
+  margin-bottom: 10px;
+}
--- a/website/src/plugins/vant-doc.js
+++ b/website/src/plugins/vant-doc.js
@ -0,0 +1,14 @@
+import {
+  Header,
+  Footer,
+  Content,
+  Container
+} from 'vant-doc'
+export default {
+  install (vue) {
+    vue.component('doc-container', Container)
+    vue.component('doc-content', Content)
+    vue.component('doc-header', Header)
+    vue.component('doc-footer', Footer)
+  }
+}
--- a/website/src/plugins/wxapp-demo.js
+++ b/website/src/plugins/wxapp-demo.js
@ -0,0 +1,7 @@
+import WxappDemo from './components/WxappPage'
+import './styles/main.css'
+export default {
+  install (vue) {
+    vue.component('wxapp-demo', WxappDemo)
+  }
+}
--- a/website/static/.gitkeep
+++ b/website/static/.gitkeep
--- a/website/test/e2e/custom-assertions/elementCount.js
+++ b/website/test/e2e/custom-assertions/elementCount.js
@ -0,0 +1,27 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}
--- a/website/test/e2e/nightwatch.conf.js
+++ b/website/test/e2e/nightwatch.conf.js
@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}
--- a/website/test/e2e/runner.js
+++ b/website/test/e2e/runner.js
@ -0,0 +1,48 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer
+  const compiler = webpack(webpackConfig)
+  server = new DevServer(compiler, devServerOptions)
+  const port = devServerOptions.port
+  const host = devServerOptions.host
+  return server.listen(port, host)
+})
+.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  let opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  const spawn = require('cross-spawn')
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})
--- a/website/test/e2e/specs/test.js
+++ b/website/test/e2e/specs/test.js
@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}
--- a/website/test/unit/.eslintrc
+++ b/website/test/unit/.eslintrc
@ -0,0 +1,7 @@
+{
+  "env": { 
+    "jest": true
+  },
+  "globals": { 
+  }
+}
--- a/website/test/unit/jest.conf.js
+++ b/website/test/unit/jest.conf.js
@ -0,0 +1,30 @@
+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/test/e2e'
+  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}
--- a/website/test/unit/setup.js
+++ b/website/test/unit/setup.js
@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
--- a/website/test/unit/specs/HelloWorld.spec.js
+++ b/website/test/unit/specs/HelloWorld.spec.js
@ -0,0 +1,11 @@
+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})
--- a/website/yarn.lock
+++ b/website/yarn.lock