diff --git a/README.md b/README.md
index 3a572fc2..c409481e 100755
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Solution of management system front-end based on `vue.js` and `ElementUI`
 
 Welcome everyone to maintain
 
-[Documentation (English)](https://fairyever.github.io/d2admin-vue-element-doc/) / [中文文档](https://fairyever.github.io/d2admin-vue-element-doc/zh/)
+[Documentation (English)](https://fairyever.github.io/d2admin-vue-element/) / [中文文档](https://fairyever.github.io/d2admin-vue-element/zh/)
 
 [Online preview / 在线预览](http://d2admin.fairyever.com/)
 
@@ -128,91 +128,4 @@ v8.11.1
   edunpm - http://registry.enpmjs.org/
 ```
 
-> Not recommended for use `cnpm`
-      
-## preview
-
-login
-
-![Snip20180526_1](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_1.png)
-
-dashboard
-
-![Snip20180526_2](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_2.png)
-
-mock data demo
-
-![Snip20180526_3](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_3.png)
-
-dragable and modified size card
-
-![Snip20180526_4](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_4.png)
-
-dragable layout
-
-![Snip20180526_5](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_5.png)
-
-multi-language support
-
-![Snip20180526_6](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_6.png)
-
-import `csv` `xlsx`
-export `csv` `xlsx` and text
-
-![Snip20180526_7](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_7.png)
-
-![Snip20180526_8](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_8.png)
-
-three modes page container component
-
-![Snip20180526_9](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_9.png)
-
-integrated rich text editor
-
-![Snip20180526_10](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_10.png)
-
-integrated markdown editor
-
-![Snip20180526_11](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_11.png)
-
-integrated icon font
-
-![Snip20180526_12](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_12.png)
-
-encapsulation icon component
-
-![Snip20180526_13](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_13.png)
-
-support automatically import SVG folder icon, and through the use of components
-
-![Snip20180526_14](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_14.png)
-
-icon selector component
-
-![Snip20180526_15](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_15.png)
-
-Integrated markdown rendering function and optimized the Baidu cloud sharing link in the rendering result display
-
-![Snip20180526_16](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_16.png)
-
-integrated digital animation plug-in
-
-![Snip20180526_17](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_17.png)
-
-hightLight in source code viewer
-
-![Snip20180526_18](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_18.png)
-
-integrated chart
-
-![Snip20180526_19](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_19.png)
-
-support chart drag and resize and drag and drop locations
-
-![Snip20180526_20](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_20.png)
-
-separate chart example
-
-![Snip20180526_21](https://raw.githubusercontent.com/FairyEver/d2admin-vue-element/master/doc/image/Snip20180526_21.png)
-
-
+> Not recommended for use `cnpm`
\ No newline at end of file
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 00000000..91de84cd
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# 确保脚本抛出遇到的错误
+set -e
+
+# 生成静态文件
+npm run doc:build
+
+# 进入生成的文件夹
+cd docs/.vuepress/dist
+
+# 如果是发布到自定义域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# 如果发布到 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# 如果发布到 https://<USERNAME>.github.io/<REPO>
+git push -f git@github.com:FairyEver/d2admin-vue-element.git master:gh-pages
+
+cd -
\ No newline at end of file
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
new file mode 100644
index 00000000..071e74dd
--- /dev/null
+++ b/docs/.vuepress/config.js
@@ -0,0 +1,94 @@
+module.exports = {
+  base: '/d2admin-vue-element/',
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'D2 Admin',
+      description: 'An elegant template for management system'
+    },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'D2 Admin',
+      description: '做一个优雅的管理系统模板'
+    }
+  },
+  themeConfig: {
+    // 项目仓库地址
+    repo: 'https://github.com/FairyEver/d2admin-vue-element',
+    // 自定义仓库链接文字
+    repoLabel: '查看源码',
+    // 文档不是放在仓库的根目录下
+    docsDir: 'docs',
+    // 默认是 false, 设置为 true 来启用
+    editLinks: true,
+    // 多国语言
+    locales: {
+      '/': {
+        selectText: 'Languages',
+        label: 'English',
+        editLinkText: 'Edit this page on GitHub',
+        lastUpdated: 'Last update'
+      },
+      '/zh/': {
+        selectText: '选择语言',
+        label: '简体中文',
+        editLinkText: '在 GitHub 上编辑此页',
+        lastUpdated: '最后更新',
+        nav: [
+          { text: '指南', link: '/zh/guide/' },
+          { text: '插件', link: '/zh/plugins/' },
+          { text: '组件', link: '/zh/components/' },
+          { text: '下载', link: 'https://github.com/FairyEver/d2admin-vue-element/releases' }
+        ],
+        sidebar: {
+          '/zh/guide/': sideBarGuide('指南'),
+          '/zh/plugins/': sideBarPlugins('插件'),
+          '/zh/components/': sideBarComponents('组件')
+        }
+      }
+    }
+  }
+}
+
+function sideBarGuide (title) {
+  return [
+    {
+      title,
+      collapsable: false,
+      children: [
+        '',
+        'q-a',
+        'change-log'
+      ]
+    }
+  ]
+}
+
+function sideBarPlugins () {
+  return [
+    'data-export',
+    'data-import',
+    'i18n',
+    'mock',
+    'timeago'
+  ]
+}
+
+function sideBarComponents (title) {
+  return [
+    {
+      title,
+      collapsable: false,
+      children: [
+        'charts',
+        'container',
+        'count-up',
+        'highlight',
+        'icon-select',
+        'icon-svg',
+        'icon',
+        'markdown'
+      ]
+    }
+  ]
+}
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
new file mode 100644
index 00000000..daf6b999
--- /dev/null
+++ b/docs/.vuepress/override.styl
@@ -0,0 +1 @@
+$accentColor = #409EFF
\ No newline at end of file
diff --git a/docs/.vuepress/public/logo@2x.png.REMOVED.git-id b/docs/.vuepress/public/logo@2x.png.REMOVED.git-id
new file mode 100644
index 00000000..c43aa1d8
--- /dev/null
+++ b/docs/.vuepress/public/logo@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+d9ade30cf874de657275755e4783fde51f2f6ffc
\ No newline at end of file
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..429cf782
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,29 @@
+---
+home: true
+heroImage: /logo@2x.png
+actionText: Get Started →
+actionLink: /zh/guide/
+features:
+- title: Advocate succinct
+  details: On the visual basis of element UI, we have added some customization.
+- title: Vue-Powered
+  details: Enjoy the dev experience of Vue + webpack, Ultra fast virtual DOM and the most economical optimization.
+- title: ElementUI component library
+  details: Integrated and robust ElementUI, and use any ElementUI component at will.
+footer: MIT Licensed | Copyright © 2018-present FairyEver
+---
+
+**The English document will be launched in the future. Please move to the Chinese document.**
+
+**英文文档会在稍后推出，现请移步右上角中文文档**
+
+```
+// chone
+git clone https://github.com/FairyEver/d2admin-vue-element.git
+// install package
+npm i
+// run
+npm run dev
+// build
+npm run build
+```
\ No newline at end of file
diff --git a/docs/zh/README.md b/docs/zh/README.md
new file mode 100644
index 00000000..2b69474c
--- /dev/null
+++ b/docs/zh/README.md
@@ -0,0 +1,25 @@
+---
+home: true
+heroImage: /logo@2x.png
+actionText: 快速上手 →
+actionLink: /zh/guide/
+features:
+- title: 简洁至上
+  details: 在 element UI 的视觉基础上稍加定制。
+- title: Vue驱动
+  details: 享受 Vue + webpack 的开发体验，超快虚拟 DOM 和最省心的优化。
+- title: ElementUI组件库
+  details: 集成完善且强大的 ElementUI，随意搭配使用任何 ElementUI 组件。
+footer: MIT Licensed | Copyright © 2018-present FairyEver
+---
+
+```
+// 克隆仓库
+git clone https://github.com/FairyEver/d2admin-vue-element.git
+// 安装依赖
+npm i
+// 运行
+npm run dev
+// 打包
+npm run build
+```
\ No newline at end of file
diff --git a/docs/zh/components/README.md b/docs/zh/components/README.md
new file mode 100644
index 00000000..a87c99eb
--- /dev/null
+++ b/docs/zh/components/README.md
@@ -0,0 +1,3 @@
+# 组件概述
+
+d2admin-vue-element（以下简称 d2admin）封装（或者集成第三方）了一些组件，方便开发者进行开发，具体组件文档请从左侧列表进入
\ No newline at end of file
diff --git a/docs/zh/components/charts.md b/docs/zh/components/charts.md
new file mode 100644
index 00000000..13e21434
--- /dev/null
+++ b/docs/zh/components/charts.md
@@ -0,0 +1,72 @@
+# 图表
+
+## 介绍
+
+D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
+
+## 实现方式
+
+`src/components/charts/register.js` 为注册图表组件的文件
+
+`src/components/charts/G2` 为图表组件存放位置
+
+`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
+
+ - 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
+ - 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
+ - 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
+ - 关闭 G2 的体验改进计划打点请求
+ - data 上的 chart 对象
+ - 自动初始化(或者不初始化)图表
+ - `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
+ - `resize` 方法
+
+在图表组件中使用这个 mixin 示例
+
+``` vue
+<template>
+  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
+  <div ref="chart" style="height: 100%;"></div>
+</template>
+
+<script>
+// 引入公用 mixin
+import G2 from '@/components/charts/G2/mixins/G2.js'
+export default {
+  mixins: [
+    G2
+  ],
+  methods: {
+    // 初始化图表
+    init () {
+      // mixin 中提供 creatChart 方法，这部分每个图表都一样
+      this.creatChart()
+      // 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
+      this.chart.source(this.data)
+      this.chart.coord().transpose()
+      this.chart.interval().position('x*y')
+      // 最后一步 渲染图表 这部分每个图表都一样
+      this.chart.render()
+    },
+    // 数据源改变 重新渲染新的数据
+    changeData () {
+      this.chart.changeData(this.data)
+    }
+  }
+}
+</script>
+```
+
+上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
+
+你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
+
+::: tip
+这只仅仅是作者个人对于图表封装的一个实现思路
+:::
+
+## 为什么没有选择其他产品
+
+G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
+
+如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
\ No newline at end of file
diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md
new file mode 100644
index 00000000..54190e06
--- /dev/null
+++ b/docs/zh/components/container.md
@@ -0,0 +1,89 @@
+# 页面容器
+
+页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| type | 容器类型 | 非 | String | card ghost card-full | card |
+| responsive | 响应式宽度 | 非 | Boolean |  | false |
+
+::: tip
+`responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
+:::
+
+## 使用方法
+
+一个基础单文件页面组件的示例
+
+``` vue
+<template>
+  <Container>
+    <template slot="header">
+      可选的 header 内容 ...
+    </template>
+    主体内容 ...
+  </Container>
+</template>
+
+<script>
+export default {
+  name: 'your-component-name'
+}
+</script>
+
+<style lang="scss">
+// 需要的话引入
+@import '~@/assets/style/public.scss';
+</style>
+```
+
+## 基础页面容器
+
+高度根据内容适应
+
+``` vue
+<Container>
+  主体内容
+</Container>
+```
+
+使用 `slot`
+
+``` vue
+<Container>
+  <template slot="header">我是插入到 header 中的内容</template>
+  主体内容
+</Container>
+```
+
+## 自适应填充页面容器
+
+无论内容高度多少，都会自动撑满页面，并有可选的 `header` 和 `footer` 插槽
+
+示例：
+
+``` vue
+<template>
+  <Container type="card-full">
+    <template slot="header">
+      可选的 header 内容 ...
+    </template>
+    主体内容 ...
+    <template slot="footer">
+      可选的 footer 内容 ...
+    </template>
+  </Container>
+</template>
+```
+
+## 隐形页面容器
+
+不显示任何背景色和边框
+
+``` vue
+<Container type="ghost">
+  主体内容
+</Container>
+```
\ No newline at end of file
diff --git a/docs/zh/components/count-up.md b/docs/zh/components/count-up.md
new file mode 100644
index 00000000..2f7172b2
--- /dev/null
+++ b/docs/zh/components/count-up.md
@@ -0,0 +1,29 @@
+# 数字动画
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| start | 起始值 | 非 | Number |  | 0 |
+| end | 结束值 | 是 | Number |  | 0 |
+| decimals | 小数位数 | 非 | Number |  | 0 |
+| duration | 持续时间 | 非 | Number |  | 2 |
+| options | 设置项 | 非 | Object |  | 空对象 |
+| callback | 回调函数 | 非 | Function |  | 空函数 |
+
+## 示例
+
+``` vue
+// 基本使用方法
+<CountUp :end="100"></CountUp>
+
+// 设置始末值
+<CountUp :start="14" :end="100"></CountUp>
+
+// 设置动画时间
+<CountUp :end="100" :decimals="2"></CountUp>
+```
+
+组件会在页面上渲染 `<span>` 标签
+
+组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
\ No newline at end of file
diff --git a/docs/zh/components/highlight.md b/docs/zh/components/highlight.md
new file mode 100644
index 00000000..e152650d
--- /dev/null
+++ b/docs/zh/components/highlight.md
@@ -0,0 +1,17 @@
+# 代码高亮
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| code | 代码字符串 | 非 | String |  | console.log('you lost code prop') |
+
+## 示例
+
+``` vue
+<Highlight code="alert('Hello')"></Highlight>
+```
+
+::: tip
+本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
+:::
\ No newline at end of file
diff --git a/docs/zh/components/icon-select.md b/docs/zh/components/icon-select.md
new file mode 100644
index 00000000..c44e6c8f
--- /dev/null
+++ b/docs/zh/components/icon-select.md
@@ -0,0 +1,12 @@
+# 图标 - 选择器
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| value | 绑定的值，可以使用 v-model | 非 | String |  |  |
+| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String |  | 请选择 |
+| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
+| clearable | 是否允许清空 | 非 | Boolean |  | true |
+| userInput | 是否允许用户自由输入 | 非 | Boolean |  | false |
+| autoClose | 是否在选择后自动关闭 | 非 | Boolean |  | true |
\ No newline at end of file
diff --git a/docs/zh/components/icon-svg.md b/docs/zh/components/icon-svg.md
new file mode 100644
index 00000000..f7e1e78c
--- /dev/null
+++ b/docs/zh/components/icon-svg.md
@@ -0,0 +1,34 @@
+# 图标 - SVG
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
+
+## 使用方法
+
+首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
+
+然后使用组件
+
+``` vue
+<IconSvg name="刚才的svg文件名"></IconSvg>
+```
+
+## 获取已经注册的所有图标
+
+你已经发现了，只需要将图标文件放入项目中就会自动注册
+
+这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
+
+所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
+
+``` vue
+// 在 vue 单文件组件中
+console.log(this.$IconSvg)
+```
+
+## 参考
+
+演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
\ No newline at end of file
diff --git a/docs/zh/components/icon.md b/docs/zh/components/icon.md
new file mode 100644
index 00000000..73636754
--- /dev/null
+++ b/docs/zh/components/icon.md
@@ -0,0 +1,41 @@
+# 图标
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
+
+## 使用方法
+
+基本
+
+``` vue
+// 这样用没有毛病 但是也没什么用
+<Icon></Icon>
+
+// 指定图标名称
+<Icon name="github"></Icon>
+
+// 设置行内样式
+<Icon name="github" style="font-size: 100px;"></Icon>
+
+// 设置 class
+<Icon name="github" class="icon-class-demo"></Icon>
+```
+
+这个组件只是简化了写法而已
+
+``` vue
+<Icon name="github"></Icon>
+// 等同于
+<i class="fa fa-github" aria-hidden="true"></i>
+```
+
+## 参考
+
+图标索引
+
+[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
+
+[fontawesome.com](https://fontawesome.com/icons?d=gallery)
\ No newline at end of file
diff --git a/docs/zh/components/markdown.md b/docs/zh/components/markdown.md
new file mode 100644
index 00000000..eb2cdb86
--- /dev/null
+++ b/docs/zh/components/markdown.md
@@ -0,0 +1,60 @@
+# markdown 渲染器
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| url | markdown文件地址 | 非 | String |  | 无 |
+| md | markdown内容 | 非 | String |  | 无 |
+| highlight | 代码高亮 | 非 | Boolean |  | false |
+| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean |  | true |
+
+## 使用方法
+
+加载一个.md文件
+
+``` vue
+<markdown url="/static/md/xxxx.md"></markdown>
+```
+
+加载资源
+
+``` vue
+const md = `# Header
+
+## title
+
+text`
+
+<markdown :md="md"></markdown>
+```
+
+## 百度网盘分享链接优化
+
+当书写类似下面的分享链接时
+
+::: tip
+需要 `baidupan = true`
+:::
+
+```
+普通分享链接
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+私密分享链接
+
+> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
+```
+
+markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
+
+就像这样
+
+> https://pan.baidu.com/s/1kW6uUwB
+
+上面的块会嵌套在你的 markdown 渲染结果中
+
+::: tip
+了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/plugin/baidupan.js)
+:::
\ No newline at end of file
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
new file mode 100644
index 00000000..bd4c1ccf
--- /dev/null
+++ b/docs/zh/guide/README.md
@@ -0,0 +1,151 @@
+# 介绍
+
+d2admin-vue-element（以下简称 d2admin）是一个管理系统前端模板
+
+[Github仓库](https://github.com/FairyEver/d2admin-vue-element) - [预览地址](http://d2admin.fairyever.com/)
+
+::: tip
+因为现在集成了很多的插件和组件，首次加载会占用较多的时间，虽然已经做了首屏加载动画，还是建议您在发布的时候一定要删除没有用到的代码。比如项目没有用到图表，最好将集成的图表库以及封装的图表组件删除。
+:::
+
+## 功能
+
+* 首屏加载等待动画 避免首次加载白屏尴尬
+* 简约主题
+* 每个插件和组件都配有介绍文档
+* 图片资源 sketch 源文件（ 可以在这个文件内重新生成所有图片资源 ）
+* 登陆和注销
+* 根据路由自动生成菜单
+* 可折叠侧边栏
+* 多国语言支持
+* 富文本编辑器
+* Markdown 编辑器
+* 全屏功能
+* [Fontawesome](https://fontawesome.com/) 图标库
+* [Fontawesome](https://fontawesome.com/) 图标选择器（组件）
+* 自动引入下载的 SVG 图标
+* 前端假数据支持（ mock ）
+* 集成 [G2](http://g2.alipay.com/) 图表
+* 图表自适应可拖拽大小的卡片容器（示例）
+* 简化剪贴板操作
+* 简化Cookie操作
+* 时间计算工具
+* 导入 Excel （ xlsx 格式 + CSV 格式 ）
+* 数据导出 Excel （ xlsx 格式 + CSV 格式 ）
+* 数据导出文本
+* 数字动画
+* 可拖拽调整大小的切分布局
+* 可拖拽调整大小和位置的网格布局
+* 提供三种页面容器组件（正常卡片，隐形容器，填满页面）
+* 代码高亮显示
+* 加载并解析 markdown 文件
+* GitHub 样式的 markdown 显示组件
+* markdown 内代码高亮
+* 为 markdown 扩展了百度云链接解析和优化显示
+
+## TODO
+
+d2admin 仍然处于开发中，这里有一些计划：
+
+* 抽离项目里的文档，集中存放在文档站点
+* 对主界面进行一次完善，调整整体布局和颜色
+* 切换主题功能
+* 使用自定义滚动条
+* 分离出简化版本
+* 推出基于 [ice](https://alibaba.github.io/ice) 平台的版本
+* 增加右上角通知中心
+* 增加一些实例页面以提供业务页面布局建议
+* 更换图表库
+
+欢迎你为 d2admin 的开发作出贡献。
+
+## 目录结构
+
+```
+├─ build // 打包设置
+├─ config // 发布设置
+├─ preview-image // github 介绍页面使用的插图 以后可能去掉
+├─ src
+│  ├─ assets
+│  │  ├─ icons // 存放 svg 图标
+│  │  ├─ image // 图片
+│  │  ├─ library // 库
+│  │  └─ style // 公用样式
+│  ├─ components
+│  │  ├─ charts // 封装图表组件
+│  │  ├─ core // 核心组件
+│  │  ├─ demo // 只会在示例页面中使用的组件
+│  ├─ i18n // 多国语言配置
+│  ├─ mock // mock 数据设置
+│  ├─ pages
+│  │  ├─ core // 系统页面
+│  │  └─ demo // 演示页面
+│  │     ├─ business // 业务页面示例
+│  │     ├─ chart // 图表
+│  │     ├─ components // 组件
+│  │     └─ plugins // 插件
+│  ├─ plugin // 插件
+│  ├─ router // 路由
+│  │  ├─ invisible
+│  │  └─ menu
+│  ├─ store // 全局状态
+│  ├─ utils // 通用工具
+│  ├─ App.vue
+│  └─ main.js // 入口文件
+├─ static
+├─ .babelrc
+├─ .editorconfig
+├─ .eslintignore
+├─ .eslintrc.js
+├─ .gitignore
+├─ .postcssrc.js
+├─ LICENSE
+├─ README.md
+├─ design.sketch
+├─ index.html
+├─ package-lock.json
+└─ package.json
+```
+
+## 使用
+
+首先下载模板 [d2admin-vue-element/releases](https://github.com/FairyEver/d2admin-vue-element/releases)
+
+::: tip
+不要直接克隆本项目，请选择已经发行的版本，尤其不要使用 dev 分支
+:::
+
+安装依赖
+
+```
+npm i
+```
+
+运行
+
+```
+npm run dev
+```
+
+在以下环境测试可用
+
+```
+➜  ~ npm -v
+5.6.0
+➜  ~ node -v
+v8.11.1
+➜  ~ nrm -V
+1.0.2
+➜  ~ nrm ls
+  npm ---- https://registry.npmjs.org/
+  cnpm --- http://r.cnpmjs.org/
+* taobao - https://registry.npm.taobao.org/
+  nj ----- https://registry.nodejitsu.com/
+  rednpm - http://registry.mirror.cqupt.edu.cn/
+  npmMirror  https://skimdb.npmjs.com/registry/
+  edunpm - http://registry.enpmjs.org/
+```
+
+::: tip
+推荐使用 [nrm](https://github.com/Pana/nrm) 管理 npm 源，不建议使用 cnpm
+:::
diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
new file mode 100644
index 00000000..445d28cd
--- /dev/null
+++ b/docs/zh/guide/change-log.md
@@ -0,0 +1,13 @@
+# 更新日志
+
+## dev
+
+::: tip
+这是正在开发的版本，还没有正式发布
+:::
+
+## v1.0.0
+
+[https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0](https://github.com/FairyEver/d2admin-vue-element/releases/tag/v1.0.0)
+
+这是第一个版本，还有一点小问题，但是已经可用
\ No newline at end of file
diff --git a/docs/zh/guide/q-a.md b/docs/zh/guide/q-a.md
new file mode 100644
index 00000000..50d55a54
--- /dev/null
+++ b/docs/zh/guide/q-a.md
@@ -0,0 +1,21 @@
+# 常见问题
+
+## 如何启动文档的开发环境
+
+这里目前还有一个小遗憾，d2admin 使用的 webpack 版本不能符合 vuepress 的要求，所以如果你想在本地启动文档站点的服务，需要按下述步骤
+
+首先将 vuepress 安装到全局
+
+```
+npm i -g vuepress
+```
+
+启动服务
+
+```
+npm run doc:dev
+```
+
+::: tip
+你可能会发现项目目录中有一个 deploy.sh 文件，这个文件是为了方便发布文档用的，你并不需要使用它
+:::
\ No newline at end of file
diff --git a/docs/zh/plugins/README.md b/docs/zh/plugins/README.md
new file mode 100644
index 00000000..77764c0e
--- /dev/null
+++ b/docs/zh/plugins/README.md
@@ -0,0 +1,3 @@
+# 插件概述
+
+d2admin-vue-element（以下简称 d2admin）封装（或者集成第三方）了一些插件，方便开发者进行开发，具体组件文档请从左侧列表进入
\ No newline at end of file
diff --git a/docs/zh/plugins/data-export.md b/docs/zh/plugins/data-export.md
new file mode 100644
index 00000000..2a4310f5
--- /dev/null
+++ b/docs/zh/plugins/data-export.md
@@ -0,0 +1,148 @@
+# 表格导出
+
+本框架集成了数据导出功能，并包装成插件
+
+## 注册插件
+
+``` js
+import pluginExport from '@/plugin/export'
+Vue.use(pluginExport)
+```
+
+之后就可以在组件中使用 `this.$export` 来调用导出功能
+
+::: tip
+d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
+:::
+
+## 导出 csv
+
+此方法将数据以 `csv` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+``` js
+this.$export.csv({
+  columns,
+  data
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| columns | 列 | 非 | Array |  | 空数组 |
+| data | 行数据 | 非 | Array |  | 空数组 |
+| table | 文件名 | 非 | String |  | table |
+| noHeader | 不导出表头 | 非 | Boolean |  | false |
+| separator | 数据分隔符 | 非 | String |  | , |
+| quoted | 每项数据是否加引号 | 非 | Boolean |  | false |
+
+示例
+
+``` js
+const columns = [
+  {
+    label: '姓名',
+    prop: 'name'
+  },
+  {
+    label: '年龄',
+    prop: 'age'
+  }
+]
+const data = [
+  {
+    name: 'lucy',
+    age: 24
+  },
+  {
+    name: 'bob',
+    age: 26
+  }
+]
+this.$export.csv({
+  columns,
+  data
+})
+```
+
+## 导出 xlsx
+
+此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+``` js
+this.$export.excel({
+  columns,
+  data
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| columns | 列 | 非 | Array |  | 空数组 |
+| data | 行数据 | 非 | Array |  | 空数组 |
+| table | 文件名 | 非 | String |  | table |
+
+示例
+
+``` js
+const columns = [
+  {
+    label: '姓名',
+    prop: 'name'
+  },
+  {
+    label: '年龄',
+    prop: 'age'
+  }
+]
+const data = [
+  {
+    name: 'lucy',
+    age: 24
+  },
+  {
+    name: 'bob',
+    age: 26
+  }
+]
+this.$export.excel({
+  columns,
+  data
+})
+```
+
+## 导出 txt
+
+此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
+
+使用
+
+``` js
+this.$export.txt({
+  text: '文本内容',
+  title: '文件名'
+})
+  .then(() => {
+    // ...可选回调
+  })
+```
+
+参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| text | 文件内容 | 非 | String |  | 空 |
+| title | 文件名 | 非 | String |  | 文本 |
\ No newline at end of file
diff --git a/docs/zh/plugins/data-import.md b/docs/zh/plugins/data-import.md
new file mode 100644
index 00000000..817abefe
--- /dev/null
+++ b/docs/zh/plugins/data-import.md
@@ -0,0 +1,64 @@
+# 表格导入
+
+本框架集成了数据导入功能，并包装成插件
+
+## 注册插件
+
+``` js
+import pluginImport from '@/plugin/import'
+Vue.use(pluginImport)
+```
+
+之后就可以在组件中使用 `this.$import` 来调用导出功能
+
+::: tip
+d2admin 已经帮你注册好，可以直接使用，无需写上面的代码
+:::
+
+## 导入 csv
+
+导入csv文件，并且返回一个 `Promise` 对象
+
+``` js
+// 在选择文件后调用
+handleUpload (file) {
+  this.$import.csv(file)
+    .then(res => {
+      this.table.columns = Object.keys(res.data[0]).map(e => ({
+        label: e,
+        prop: e
+      }))
+      this.table.data = res.data
+    })
+  // 阻止默认的上传
+  return false
+}
+```
+
+## 导入 xlsx
+
+导入xlsx文件，并且返回一个 `Promise` 对象
+
+**注意 导入的表格文件第一行应为表头**
+
+参考下述示例使用
+
+``` js
+// 在选择文件后调用
+handleUpload (file) {
+  this.$import.xlsx(file)
+    .then(({header, results}) => {
+      // header 为表头
+      // results 为内容
+      this.table.columns = header.map(e => {
+        return {
+          label: e,
+          prop: e
+        }
+      })
+      this.table.data = results
+    })
+  // 阻止默认的上传
+  return false
+}
+```
\ No newline at end of file
diff --git a/docs/zh/plugins/i18n.md b/docs/zh/plugins/i18n.md
new file mode 100644
index 00000000..424bfce1
--- /dev/null
+++ b/docs/zh/plugins/i18n.md
@@ -0,0 +1,124 @@
+# 多国语
+
+多国语插件
+
+::: tip
+此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
+:::
+
+公用的语言设置建议放在 `src/i18n` 下
+
+i18n 文件夹结构如下所示
+
+```
+|__index.js // 主文件
+|__lang // 语言配置文件夹
+| |__cn // 中文
+| | |__index.js // 中文 公用配置
+| |__ja // 日语
+| | |__index.js // 日语 公用配置
+| |__en // 英语
+| | |__index.js // 英语 公用配置
+```
+
+在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
+
+``` js
+import i18n from './i18n'
+new Vue({
+  el: '#app',
+  store,
+  i18n, // 使用 i18n
+  router,
+  template: '<App/>',
+  components: { App }
+})
+```
+
+## 使用
+
+使用 `$t('路径')`
+
+``` vue
+<PageHeader
+  slot="header"
+  :title="`${$t('pub.pageHeader.demo')} 1`"
+  url="http://kazupon.github.io/vue-i18n/en/">
+</PageHeader>
+```
+
+## 局部配置
+
+有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/src/i18n` 中会造成混乱，不易维护
+
+`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
+
+示例
+
+``` vue
+<i18n src="./lang.json"></i18n>
+
+<template>
+  <div>
+    <el-tag>{{$t('hello')}}</el-tag>
+    <p>{{$t('check.title')}}</p>
+    <el-checkbox-group v-model="check">
+      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
+      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
+      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
+    </el-checkbox-group>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      check: ['a', 'b']
+    }
+  }
+}
+</script>
+```
+
+在同一文件夹下的 `lang.json`
+
+``` json
+{
+  "cn": {
+    "hello": "你好",
+    "check": {
+      "title": "请选择",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "东京",
+        "NewYork": "纽约"
+      }
+    }
+  },
+  "en": {
+    "hello": "hello",
+    "check": {
+      "title": "Please choose",
+      "label": {
+        "Beijing": "Beijing",
+        "Tokyo": "Tokyo",
+        "NewYork": "NewYork"
+      }
+    }
+  },
+  "ja": {
+    "hello": "こんにちは",
+    "check": {
+      "title": "選択してください",
+      "label": {
+        "Beijing": "北京",
+        "Tokyo": "東京",
+        "NewYork": "ニューヨーク"
+      }
+    }
+  }
+}
+```
+
+详细教程请查看官方文档，见此页右上角的链接
\ No newline at end of file
diff --git a/docs/zh/plugins/mock.md b/docs/zh/plugins/mock.md
new file mode 100644
index 00000000..edb33169
--- /dev/null
+++ b/docs/zh/plugins/mock.md
@@ -0,0 +1,221 @@
+# 模拟数据
+
+在 `src/mock/demo/001.js` 配置拦截返回的数据
+
+## 使用
+
+``` js
+import Mock from 'mockjs'
+
+Mock.mock('/api/demo/001', {
+  'list|4-10': [{
+    'id|+1': 1,
+    'name': '@CNAME',
+    'star|1-5': '★',
+    'delFlag|1': [0, 1],
+    'creatDate': '@DATE',
+    'address': '@CITY',
+    'zip': '@ZIP'
+  }]
+})
+```
+
+请求数据
+
+``` js
+ajax () {
+  this.$axios.get('/api/demo/001')
+  .then(res => {
+    this.table.columns = Object.keys(res.data.list[0]).map(e => ({
+      label: e,
+      prop: e
+    }))
+    this.table.data = res.data.list
+  })
+}
+```
+
+## mock 语法规范
+
+Mock.js 的语法规范包括两部分：
+
+1. 数据模板定义规范（Data Template Definition，DTD）
+2. 数据占位符定义规范（Data Placeholder Definition，DPD）
+
+### 数据模板定义规范 DTD
+
+**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
+
+``` js
+// 属性名   name
+// 生成规则 rule
+// 属性值   value
+'name|rule': value
+```
+
+**注意：**
+
+* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
+* _生成规则_ 是可选的。
+* _生成规则_ 有 7 种格式：
+    1. `'name|min-max': value`
+    1. `'name|count': value`
+    1. `'name|min-max.dmin-dmax': value`
+    1. `'name|min-max.dcount': value`
+    1. `'name|count.dmin-dmax': value`
+    1. `'name|count.dcount': value`
+    1. `'name|+step': value`
+* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
+* _属性值_ 中可以含有 `@占位符`。
+* _属性值_ 还指定了最终值的初始值和类型。
+
+<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
+
+**生成规则和示例：**
+
+#### 1. 属性值是字符串 **String**
+
+1. `'name|min-max': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
+
+2. `'name|count': string` 
+
+    通过重复 `string` 生成一个字符串，重复次数等于 `count`。
+
+#### 2. 属性值是数字 **Number**
+
+1. `'name|+1': number` 
+
+    属性值自动加 1，初始值为 `number`。
+
+2. `'name|min-max': number` 
+
+    生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
+
+3. `'name|min-max.dmin-dmax': number` 
+
+    生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
+
+``` js
+Mock.mock({
+    'number1|1-100.1-10': 1,
+    'number2|123.1-10': 1,
+    'number3|123.3': 1,
+    'number4|123.10': 1.123
+})
+// =>
+{
+    "number1": 12.92,
+    "number2": 123.51,
+    "number3": 123.777,
+    "number4": 123.1231091814
+}
+```
+
+#### 3. 属性值是布尔型 **Boolean**
+
+1. `'name|1': boolean` 
+
+    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
+
+2. `'name|min-max': value` 
+
+    随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
+
+#### 4. 属性值是对象 **Object**
+
+1. `'name|count': object`
+
+    从属性值 `object` 中随机选取 `count` 个属性。
+
+2. `'name|min-max': object`
+
+    从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
+
+#### 5. 属性值是数组 **Array**
+
+1. `'name|1': array` 
+
+    从属性值 `array` 中随机选取 1 个元素，作为最终值。
+
+2. `'name|+1': array` 
+
+    从属性值 `array` 中顺序选取 1 个元素，作为最终值。
+
+3. `'name|min-max': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
+
+4. `'name|count': array` 
+
+    通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
+
+#### 6. 属性值是函数 **Function**
+
+1. `'name': function` 
+
+    执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
+
+#### 7. 属性值是正则表达式 **RegExp**
+
+1. `'name': regexp` 
+
+    根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
+
+    ``` js
+    Mock.mock({
+        'regexp1': /[a-z][A-Z][0-9]/,
+        'regexp2': /\w\W\s\S\d\D/,
+        'regexp3': /\d{5,10}/
+    })
+    // =>
+    {
+        "regexp1": "pJ7",
+        "regexp2": "F)\fp1G",
+        "regexp3": "561659409"
+    }
+    ```
+
+### 数据占位符定义规范 DPD
+
+_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
+
+_占位符_ 的格式为：
+
+```
+@占位符
+@占位符(参数 [, 参数])
+```
+
+**注意：**
+
+1. 用 `@` 来标识其后的字符串是 _占位符_。
+2. _占位符_ 引用的是 `Mock.Random` 中的方法。
+3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
+4. _占位符_ 也可以引用 _数据模板_ 中的属性。
+5. _占位符_ 会优先引用 _数据模板_ 中的属性。
+6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
+
+``` js
+Mock.mock({
+    name: {
+        first: '@FIRST',
+        middle: '@FIRST',
+        last: '@LAST',
+        full: '@first @middle @last'
+    }
+})
+// =>
+{
+    "name": {
+        "first": "Charles",
+        "middle": "Brenda",
+        "last": "Lopez",
+        "full": "Charles Brenda Lopez"
+    }
+}
+```
+
+
+
diff --git a/docs/zh/plugins/timeago.md b/docs/zh/plugins/timeago.md
new file mode 100644
index 00000000..6f80a927
--- /dev/null
+++ b/docs/zh/plugins/timeago.md
@@ -0,0 +1,49 @@
+# 时间差计算
+
+``` js
+import timeago from 'timeago.js'
+export default {
+  data () {
+    return {
+      // 打开页面时间
+      openPageDate: new Date(),
+      // 打开页面已经过去的时间
+      openPageDateAgo: '',
+      // 打开页面时间计时器
+      dateTimeRangeTimer: null,
+      // 起止时间
+      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
+      // 上面起止时间的计算结果
+      dateTimeRangeAgo: ''
+    }
+  },
+  mounted () {
+    // 刷新打开页面过去的时间
+    this.refreshOpenPageDateAgo()
+    this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
+    // 刷新起止时间的计算结果
+    this.refreshDateTimeRangeAgo()
+  },
+  beforeDestroy () {
+    // 清空计时器
+    clearInterval(this.dateTimeRangeTimer)
+  },
+  watch: {
+    dateTimeRange () {
+      // 刷新起止时间的计算结果
+      this.refreshDateTimeRangeAgo()
+    }
+  },
+  methods: {
+    // 计算打开页面过了多久
+    refreshOpenPageDateAgo () {
+      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
+    },
+    // 计算起止时间间隔
+    refreshDateTimeRangeAgo () {
+      const timeagoInstance = timeago(this.dateTimeRange[1])
+      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
+    }
+  }
+}
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 7b13cedf..d66deac3 100755
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
-    "build": "node build/build.js"
+    "build": "node build/build.js",
+    "doc:dev": "vuepress dev docs",
+    "doc:build": "vuepress build docs"
   },
   "dependencies": {
     "@antv/data-set": "^0.8.5",