update doc and fix templdate

Author: Allenice

docs/book.json

@@ -7,7 +7,7 @@
     ],
     "pluginsConfig": {
         "github": {
-            "url": "https://github.com/MMF-FE/vue-typescript/tree/develop"
+            "url": "https://github.com/MMF-FE/vue-typescript"
         }
     },
     "links": {

docs/zh-cn/Api.md

@@ -0,0 +1,50 @@
+# 使用后端接口
+使用 [axios](https://github.com/mzabriskie/axios) 作为默认的 http client
+
+## http.ts
+
+**src/api/http.ts** 对 axios 进行了封装，目前只封装了 get, post 方法，需要其他 http 请求 method 可以自行封装。
+
+### get
+
+```typescript
+function get<T>(url, data?: Types.PlainObject): Promise<T> {
+}
+```
+**T** 是接口返回的数据类型
+
+```typescript
+// 这里 /list 的接口返回的数据格式是 {status: number,list: any[]}
+{
+    getList (params: any) {
+        return get<{
+            status: number
+            list: any[]
+        }>('/list', params)
+    }
+}
+```
+
+### post
+```typescript
+function post<T>(url, data?: Types.PlainObject): Promise<T> {
+}
+
+```
+
+## index.ts
+**src/api/index.ts** 是后端接口配置。可以将不同模块的接口拆分成几个文件。
+
+## 在组件中使用 Api
+每个组件默认都有 **api** 这个成员，**api** 就是来自 src/api/index.ts
+
+```typescript
+export default class Home extends Vue {
+    async created () {
+        // api example
+        let res = await this.api.getList({})
+        console.log(res.list)
+    }
+}
+
+```

docs/zh-cn/Build Command.md renamed to docs/zh-cn/Command.md

@@ -18,7 +18,8 @@ npm run svg
 ```
 
 ## 添加组件
-使用 **./tools/cli.js** 添加组件。
+使用 **./tools/cli.js** 添加组件。组件模板在 tools/tpl, 你可以根据需要修改模板文件。
+
 ```text
 选项：
   --version, -v  显示版本号                       [布尔]

docs/zh-cn/Component.md

@@ -0,0 +1,76 @@
+# 组件
+本模板没有使用单文件组件，每个组件由四个文件组成，这是因为目前编辑器对 *.vue 文件的支持性不是很强。
+
+## 组件结构
+
+```
+├── hello.scss
+├── hello.ts        
+├── hello.vue
+└── index.ts
+```
+
+## vue 文件
+可以看到，组件模板是使用 vue 文件的，而不是使用 html, 这是因为可以借助 vue-loader 将单文件组件的优势融入进来。
+
+```html
+<!-- vue 文件 -->
+<template>
+    <div>
+        <h1>Hello {{name}}</h1>
+    </div>
+</template>
+<style src="./hello.scss" lang="scss" scoped></style>
+```
+
+## ts 文件
+使用 typescript 编写组件，我们使用了 [vue-property-decorator](https://github.com/kaorun343/vue-property-decorator), 具体使用方式，请参考其文档。
+
+```typescript
+import Vue from 'components/base'
+import { Component, Prop } from 'vue-property-decorator'
+import template from './hello.vue'
+
+@Component({
+    name: 'tag-hello',
+    mixins: [template] // 使用 mixins 将 vue 文件的功能混合进来
+})
+export default class Hello extends Vue {
+    // 定义 prop
+    @Prop({ default: 'World' })
+    name: string
+    
+    // computed
+    get fullname () {
+        return `hello, ${this.name}`
+    }
+    
+    // method
+    say () {
+        console.log(this.fullname)
+    }
+}
+
+
+```
+> 注意：[vue-property-decorator](https://github.com/kaorun343/vue-property-decorator) 的 Component 装饰器来自 [vue-class-component](https://github.com/vuejs/vue-class-component), 需要看一下该文档
+
+## 样式
+请参考 [样式](/zh-cn/Style.md) 一节。
+
+## index.ts
+这个文件是组件的入口文件，方便其他组件导入。
+
+```typescript
+export * from './hello.ts'
+```
+
+为什么不直接将 hello.ts 命名为 index.ts 呢？这是因为考虑到编辑器打开文件的时候显示文件名的问题，不然显示 index.ts 你都不知道这个是哪个组件。如果你不想修改 cli 的组件模板。
+
+## 引入其他组件或模块
+引入其他组件或模块，默认以 src 目录开始查找的。
+
+```js
+// 引入 'src/components/tags/hello'
+import Hello from 'components/tags/hello'
+```

docs/zh-cn/Issues.md

@@ -0,0 +1,20 @@
+# 存在的问题
+升级到 vue-loader 13.x 和 webpack3.x 遇到不少兼容问题。目前还没解决的有以下问题
+
+### 修改 vue 文件或样式文件都会刷新浏览器
+这个目前定位到刷新的操作是在 build/dev-server.js 的一段代码。
+```js
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+        hotMiddleware.publish({ action: 'reload' })
+        cb()
+    })
+})
+```
+目前模板已经注释掉这段代码了，如果修改了 build/tpl 里面的 html, 需要手动刷新。
+
+### production 模式下没有将样式抽离到 css 文件
+当 build production 的时候，组件里面的样式没有抽离到 css 文件中，这个问题目前还没有找到解决办法。
+
+> 如果你找到了解决方法，麻烦提交一下 [issue](https://github.com/MMF-FE/vue-typescript/issues) 或 [PR](https://github.com/MMF-FE/vue-typescript/pulls)

docs/zh-cn/README.md

@@ -1,6 +1,14 @@
 # 简介
 vue-typescript 是在 [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) 的基础上修改的，主要是将开发语言从 ES6 改成 Typescript。使用本模板之前，建议看一下 [vuejs-templates/webpack 的文档](http://vuejs-templates.github.io/webpack/)
 
+## 版本
+```
+vue: 2.x
+vue-loader: 13.x
+webpack: 3.x
+typescript: 2.4+
+```
+
 ## 开始
 使用该模板，请先安装 [vue-cli](https://github.com/vuejs/vue-cli)
 

docs/zh-cn/SUMMARY.md

@@ -1,6 +1,13 @@
 # Summary
 
 * [简介](README.md)
-* [项目结构](Project Structure.md)
-* [命令](Build Command.md)
+* [项目结构](Structure.md)
+* [命令](Command.md)
+* [类型定义](/zh-cn/Types.md)
+* [组件](Component.md)
+* [使用后端接口](/zh-cn/Api.md)
+* [样式](/zh-cn/Style.md)
+* [Vuex](Vuex.md)
+* [测试](Test.md)
+* [存在的问题](Issues.md)
 

docs/zh-cn/Project Structure.md renamed to docs/zh-cn/Structure.md

@@ -0,0 +1,70 @@
+# 样式
+默认使用 sass(scss), 在 build/utils.js 配置如下：
+
+```js
+scss: generateLoaders('sass', {
+    includePaths: [
+        path.join(__dirname, '../src/style'),
+        path.join(__dirname, '../node_modules')
+    ]
+})
+```
+import sass 默认是从 src/style 目录或 node_modules 开始的, 所以即使你组件目录层次多深，引入样式都很方便。
+> 注意：如果是引入 node_modules 里面的模块，需要加上 **~**
+
+```scss
+@import "base/base"; // 引入 src/style/base/_base.scss
+
+@import "~normalize.css"; // 引入 node_modules/normalize.css
+```
+
+## base.scss
+src/style/base/_base.scss 只能引入不能生成代码的模块，比如 变量、mixins 等。 
+
+## 资源路径（assets）
+sass 中引用资源（assets）使用 [postcss-assets](https://github.com/borodean/postcss-assets) 提供的 reslove 方法。默认的资源根路径是 src/assets/images。你可以修改 .postcssrc.js 文件来修改或添加路径。
+
+```js
+// .postcssrc.js
+module.exports = {
+    "plugins": {
+        // to edit target browsers: use "browserlist" field in package.json
+        // 浏览器配置在 package.json 那里编辑
+        "autoprefixer": {},
+        "postcss-assets": {
+            relative: true,
+            loadPaths: ['./src/assets/images']
+        }
+    }
+}
+```
+
+```scss
+.logo {
+    // url("src/assets/images/logo.png")
+    // 页面显示的地址会被 webpack 处理过
+    background-image: resolve("logo.png");
+}
+```
+
+## scoped css
+创建组件的时候，默认样式开启 css scoped。
+
+```html
+<style src="./home.scss" lang="scss" scoped></style>
+```
+css scoped 的好处是组件样式不会影响到其他组件或全局样式，也不会被其他组件(其他组件也是 scoped 的)影响，又不像 css module 那样需要修改 html 模板代码。如果你需要覆盖子组件的样式，可以使用 ** /deep/ **。具体例子可以参考 [scoped example](https://github.com/MMF-FE/vue-typescript/blob/master/template/src/components/views/scoped/scoped.scss)。
+
+```scss
+.parent {
+    color: red;
+    
+    /deep/ {
+        .child {
+            color: green;
+        }
+    }
+}
+```
+> 如果不使用 sass, 可以用 **>>>** 代替 **/deep/**
+> 由于使用 scoped css, 所以不需要嵌套太多层选择器，尽量不要嵌套。

docs/zh-cn/Style.md

@@ -0,0 +1,2 @@
+# 测试
+目前还没有加入单元测试。如果需要单元测试，请参考 [vuejs-webpack](https://github.com/vuejs-templates/webpack)