bak

Author: Ken Berkeley

docs/zh-cn/Getting-started.md

@@ -6,7 +6,7 @@
 
 * [Vue.js 1.x Guide](http://v1.vuejs.org/guide/)
 * [Vue.js 1.x API](http://v1.vuejs.org/api/)
-* [`vue-router` docs for Vue 1.x](https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn)
+* [Vue Router docs for Vue 1.x](https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn)
 
 同时，您还需要熟悉 ES6。例如，请把如下代码转译成 ES5：
 ```
@@ -18,16 +18,18 @@ const foo = ({ hello: { world: bar } }) => ({ bar })
 ## ⊙ 安装
 
 > **强烈建议**升级到 `node ≥ 6.x / npm ≥ 3.x` 环境  
-> **强烈推荐**往后使用 `cnpm` 替代 `npm` 安装 pacakge  
-> （运行 `npm set registry https://registry.npm.taobao.org` 换源，并不能解决 `node-sass` 的二进制源码包下载极慢的问题）
+> **强烈推荐**往后使用 `cnpm` 替代 `npm` 安装依赖  
+> 
+> 运行 `npm set registry https://registry.npm.taobao.org` 换源  
+> 并不能解决 `node-sass` 的二进制源码包下载极慢的问题
 
 ```
-$ npm i cnpm -g // 全局安装 cnpm
+$ npm i cnpm -g       // 全局安装 cnpm
 $ cnpm i cross-env -g // 全局安装 跨平台环境变量配置器
 
 $ git clone https://github.com/kenberkeley/vue-demo.git
 $ cd vue-demo
-$ cnpm i // 安装本项目依赖
+$ cnpm i              // 安装本项目依赖
 ```
 
 ## ⊙ 命令

docs/zh-cn/Structure.md

@@ -10,7 +10,7 @@
 │   ├── filters/           # 过滤器（FILTER）
 │   ├── mixins/            # （MIXIN）
 │   ├── routes/            # 路由（ROUTE）
-│   ├── services/          # 服务（SERVICE）
+│   ├── services/          # 服务（SERVICE，统一管理 XHR 请求）
 │   ├── utils/             # 工具类（UTIL）
 │   ├── views/             # 路由页面组件（VIEW）
 │   ├── app.js             # 启动文件
@@ -24,7 +24,46 @@
 ```
 
 您可以根据业务需求改动目录结构  
-例如本 demo 就在根目录下新增了 `docs/`（文档）与 `mock/`（Mock 服务器）
+譬如本 demo 就在根目录下新增了 `docs/`（文档）与 `mock/`（Mock 服务器）
 
-从表面上看，本 demo 与 [`vue-cli`](https://github.com/vuejs/vue-cli) 生成的[结构](http://vuejs-templates.github.io/webpack/structure.html)并没有太大差异  
-但接下来的文档内容，会让您了解到更深入的设计
+上述目录结构中，需要注意的是 `src/components/` 与 `src/views/` 的区别  
+不妨把本 demo 中的这两个目录以树状形式展开：
+
+```
+src/components/                    # 组件
+    ├── App.vue                      # 根组件
+    ├── Breadcrumb.vue               # 面包屑
+    ├── Navbar.vue                   # 顶部导航栏
+    ├── Pagination.vue               # 分页
+    ├── Select/                      # 下拉框选择框组件
+    │   ├── LimitSelect.vue            # “每页显示多少条记录” 下拉选择框
+    │   └── Select2.vue                # 对 Select2 的封装
+    └── Sidebar/                     # 侧边栏组件
+        ├── index.vue                  # 侧边栏
+        └── Link.vue                   # 导航链接封装
+
+src/views/                         # 路由页面组件
+    ├── index.vue                    # 首页
+    ├── auth/                        # 用户认证模块
+    │   ├── login.vue                  # 登录页
+    │   └── logout.vue                 # 注销登录页
+    └── msg/                         # 留言板模块
+        ├── index.vue                  # /msg（留言板首页，alias => /msg/list）
+        ├── list.vue                   # /msg/list（留言板列表）
+        ├── add.vue                    # /msg/add（新增留言）
+        ├── detail.vue                 # /msg/detail/:msgId（查看留言）
+        ├── update.vue                 # /msg/update/:msgId（修改留言）
+        ├── _components/               # 留言板模块共用组件
+        │   ├── AuthorSelect.vue         # 留言发布者选择下拉框
+        │   ├── MsgForm.vue              # 留言表单
+        │   └── OptBtnGroup.vue          # 留言操作按钮组
+        └── _mixins/                   # 留言板模块共用 mixins
+            └── autoLoadByParams.js      # 根据 $route.params.msgId 自动加载
+```
+
+根据注释，我们大概知道了二者的差别：
+
+`src/components/`
+* 主要是全局性的，或通用性很强的组件（例如是对某些插件的封装）
+* 一般不会涉及到业务逻辑
+* 具备良好的封装性（根组件 `App.vue` 除外）

src/components/Sidebar/Vlink.vue renamed to src/components/Sidebar/Link.vue

@@ -10,29 +10,29 @@
           <span class="caret"></span>
         </a>
         <div :id="'panel'+$index" class="collapse w-90p m-0-auto">
-          <vlink v-for="subRoute in route.subRoutes"
+          <link v-for="subRoute in route.subRoutes"
             :path="subRoute.fullPath"
             :title="subRoute.title"
             :icon="subRoute.icon">
-          </vlink>
+          </link>
         </div><!-- .collapse -->
       </div><!-- v-if -->
-      <vlink v-else
+      <link v-else
         :path="route.path"
         :title="route.title"
         :icon="route.icon"
         :is-exact="true">
-      </vlink>
+      </link>
     </template>
   </div><!-- #sidebar -->
 </template>
 <script>
-import Vlink from './Vlink'
+import Link from './Link'
 import routesMap from 'ROUTE/map/'
 import _pickBy from 'lodash/pickBy'
 
 export default {
-  components: { Vlink },
+  components: { Link },
   computed: {
     routes: () => _pickBy(routesMap, route => route.showInSidebar)
   },