docs/

Ken Berkeley · Ken Berkeley · commit da0d0058f9e5 · 2017-06-04T23:54:33.000+08:00
diff --git a/docs/LANGS.md b/docs/LANGS.md
@@ -0,0 +1,3 @@
+# Languages
+
+* [中文](zh-cn/)
diff --git a/docs/zh-cn/GettingStarted.md b/docs/zh-cn/GettingStarted.md
@@ -0,0 +1,43 @@
+# § 开始
+
+我们以 [`example/Basic/index.vue`](https://github.com/kenberkeley/vue2-datatable/blob/master/example/Basic/index.vue) 为例，效果见 [demo](https://kenberkeley.github.io/vue2-datatable/example-dist)
+
+```html
+<template>
+  <div>
+    <code>query: {{ query }}</code>
+    <datatable v-bind="$data" />
+  </div>
+</template>
+<script>
+import Datatable from 'vue2-datatable'
+import mockData from '../_mockData'
+
+export default {
+  components: { Datatable },
+  data: () => ({
+    columns: [
+      { title: 'User ID', field: 'uid', sort: true },
+      { title: 'Username', field: 'name' },
+      { title: 'Age', field: 'age', sort: true },
+      { title: 'Email', field: 'email' },
+      { title: 'Country', field: 'country' }
+    ],
+    data: [],
+    total: 0,
+    query: {}
+  }),
+  watch: {
+    query: {
+      handler (query) {
+        mockData(query).then(({ rows, total }) => {
+          this.data = rows
+          this.total = total
+        })
+      },
+      deep: true
+    }
+  }
+}
+</script>
+```
diff --git a/docs/zh-cn/Preface.md b/docs/zh-cn/Preface.md
@@ -0,0 +1,14 @@
+# § 前言
+
+> 本 Datatable 仅支持 Vue 2.x
+
+任何开源的 Datatable 都未必能满足所有的业务需求（否则也不会有这个项目了）  
+本文档致力于让您在理解组件设计以及源码的基础上，可自行定制出最适合的 Datatable 
+
+本 Datatable 的依赖如下：
+
+* BootStrap 3.x + Font Awesome 4.x（全局引入）
+* [lodash.orderBy](https://lodash.com/docs/4.17.4#orderBy)
+* [replace-with](https://github.com/kenberkeley/replace-with)
+
+注：BootStrap 以及 Font Awesome 的可替换性极强，您完全可以使用其他库替代（一般就是改一下类名即可）
diff --git a/docs/zh-cn/README.md b/docs/zh-cn/README.md
@@ -0,0 +1 @@
+{% include "./SUMMARY.md" %}
diff --git a/docs/zh-cn/SUMMARY.md b/docs/zh-cn/SUMMARY.md
@@ -0,0 +1,16 @@
+# § 总览
+
+* [总览](README.md)
+* [前言](Preface.md)
+* [源码技巧](Tricks.md)
+* [开始](GettingStarted.md)
+* [深入了解](development/README.md)
+  * [谈状态管理](development/State-management.md)
+  * [URL 是单页应用的精华](development/URL-is-soul-of-SPA.md)
+  * [引入服务层](development/Service-layer.md)
+  * [Ajax 接口化](development/Ajax-interface.md)
+  * [配置](development/Configuration.md)
+  * [跨域与代理](development/CORS-and-Proxy.md)
+  * [最佳实践](development/Best-practice.md)
+* [问题反馈（issues）](https://github.com/kenberkeley/vue2-datatable/issues)
+* [版本迭代（releases）](https://github.com/kenberkeley/vue2-datatable/releases)
diff --git a/docs/zh-cn/Tricks.md b/docs/zh-cn/Tricks.md
@@ -0,0 +1,72 @@
+# § 源码技巧
+
+> 在开始前，最好先来做一下预备功课
+
+***
+
+#### ⊙ 了解动态组件的用法
+详情请参考文档：[Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
+
+#### ⊙ 巧用 [`v-bind`](https://cn.vuejs.org/v2/api/#v-bind) 实现类似 JSX 中的 spread operator (`...`)
+> 本技巧参考自 [vuejs/vue#4962](https://github.com/vuejs/vue/issues/4962)
+
+```html
+<template>
+  <div>
+  
+    <hello-world
+      :a="a"
+      :b="b"
+      :c="c"
+      :d="d">
+    </hello-world>
+  
+    <!-- 两种写法作用一致，但显然后者更优雅简洁 -->
+  
+    <hello-world v-bind="$data" />
+  
+  </div>
+</template>
+<script>
+export default {
+  data: () => ({
+    a: 1,
+    b: 2,
+    c: 3,
+    d: 4
+  })
+}
+</script>
+```
+
+#### ⊙ `propType: Boolean` 的模板简写
+
+若 `HelloWorld` 组件中定义：
+
+```js
+props: {
+  test: Boolean
+}
+```
+
+那么下面两种写法是等价的，但显然后者更优雅简洁
+
+```html
+<hello-world
+  :test="true">
+</hello-world>
+
+<hello-world test />
+```
+
+#### ⊙ 巧用逗号运算符
+
+```js
+cols.map(col => {
+  if (!col.weight) col.weight = 0
+  return col
+})
+
+// 利用逗号运算符，可以把上面的代码缩写为一行：
+cols.map(col => ((col.weight = col.weight || 0), col))
+```
diff --git a/example-dist/client.b5d31013.js b/example-dist/client.b5d31013.js
diff --git a/example-dist/client.ed009e18.css b/example-dist/client.ed009e18.css
diff --git a/example-dist/index.html b/example-dist/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Vue 2 Datatable Examples</title>
+  <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+<link href="client.ed009e18.css" rel="stylesheet"></head>
+<body>
+  
+  <div id="app"></div>
+
+  <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
+  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="client.b5d31013.js"></script></body>
+</html>
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "main": "lib/index.vue",
   "scripts": {
     "start": "vue build example/App.vue --config vue-build.config.js",
-    "build": "vue build example/App.vue --prod --config vue-build.config.js"
+    "build": "vue build example/App.vue --prod --config vue-build.config.js",
+    "build:docs": "gitbook build docs/"
   },
   "repository": {
     "type": "git",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "clean-webpack-plugin": "^0.1.16",
     "es6-shim": "^0.35.3",
+    "gitbook-cli": "^2.3.0",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.18.1",
     "vue-cli": "^2.8.2"
diff --git a/vue-build.config.js b/vue-build.config.js
@@ -11,8 +11,8 @@ module.exports = {
       path: exampleDist,
       publicPath: ''
     },
-    plugins: [
+    plugins: process.env.NODE_ENV === 'production' ? [
       new CleanWebpackPlugin([exampleDist])
-    ]
+    ] : []
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Languages`
	`2`	`+`
	`3`	`+* [中文](zh-cn/)`