init

README.md

@@ -0,0 +1,11 @@
+# 前端规范与开发文档
+
+内容具有一定参考性，但不具备普遍性。
+
+## 目标
+
+* 一致的代码风格
+* 开发问题索引
+* 新人快速上手
+
+> 此文档由 [docsify](https://github.com/QingWei-Li/docsify) 生成。

_sidebar.md

@@ -0,0 +1,19 @@
+- 代码规范
+    - [HTML](style/html)
+    - [CSS/LESS](style/less)
+    - [JavaScript/ES6](style/es6)
+    - [Vue](style/vue)
+    - [Image](style/image)
+
+- 开发指南
+    - [命名宝典](doc/naming)
+    - [样式管理](doc/css)
+    - [组件管理](doc/components)
+    - [图标集成](doc/icon)
+    - [Restful API](doc/api)
+    - [MockJs配置](doc/mockjs)
+    - [模拟文件上传](doc/upload)
+    - [Vue测试介绍](doc/vue-test)
+    - [编辑器](doc/editor)
+
+- [**贡献文档**](contribution)

contribution.md

@@ -0,0 +1,53 @@
+> 希望大家能一起参与到团队文档的建设中来。
+
+## 克隆仓库
+
+```bash
+$ git clone [email protected]:HYFE/Guide.git
+```
+
+## 创建文档
+
+文档均为 `Markdown` 格式，如果是一个新的分类内容可以直接放到仓库根目录，否则放入分类目录或新建目录。
+
+如果需要添加图片，把图片放入 `img` 目录，不管文档在什么位置，引入路径均为 `/img/xxx.ext`。
+
+```markdown
+![](/img/image.jpg)
+```
+
+## 设置导航
+
+编辑 `_sidebar.md` 为你新添加的文档按层级设置链接。
+
+```markdown
+- 规范
+    - [CSS/LESS](guide/less)
+    - [JavaScript](guide/js)
+    - [Vue](guide/vue)
+- 指南
+    - [统一命名](dev/naming)
+    - [样式管理](dev/css)
+    - [组件管理](dev/components)
+    - [图标集成](dev/icon)
+    - [axios集成与使用](dev/axios)
+    - [MockJs配置](dev/mockjs)
+    - [Vue测试介绍](dev/vue-test)
+- [贡献](contribution)
+```
+
+## 本地预览
+
+如果你想在本地预览文档，可以安装一个简单的 WebServer，如：[anywhere](https://github.com/JacksonTian/anywhere)。
+
+```bash
+# 全局安装 anywhere
+$ npm install anywhere -g
+
+# 在需要开启服务器的目录执行
+$ anywhere
+```
+
+## 在线编辑
+
+如果嫌以上步骤太麻烦，你也可以在[仓库](https://github.com/HYFE/Guide)内在线添加和编辑文档。

doc/api.md

@@ -0,0 +1,149 @@
+> 跟随社区的脚步，HTTP 库从 VueResource 换为 axios。
+
+项目中 `src/api/ajax.js` 文件中封装了 axios 的常用配置和一些工具函数。
+
+## 默认配置
+
+根据需要自行添加或修改。
+
+```js
+{
+    baseURL: '/api',
+    responseType: 'json'
+}
+```
+
+针对 `post` 和 `put` 请求把 `Content-Type` 设为 `application/x-www-form-urlencoded`。
+
+```js
+const FORM_CONTENT_TYPE = 'application/x-www-form-urlencoded'
+axios.defaults.headers.post['Content-Type'] = FORM_CONTENT_TYPE
+axios.defaults.headers.put['Content-Type'] = FORM_CONTENT_TYPE
+```
+
+## 工具函数
+
+* `GET(url[, params])`
+* `POST(url, body)`
+* `PUT(url, body)`
+* `DELETE (url[, params])`
+
+```js
+import { GET, POST, PUT, DELETE } from './api/ajax'
+
+GET('/url').then(data => console.log(data))
+POST('/url', params).then(data => console.log(data))
+PUT('/url', params).then(data => console.log(data))
+DELETE('/url').then(data => console.log(data))
+```
+
+> `data` 即为 `response.data`。
+
+## 工具类
+
+对常用 REST 请求格式的封装。以一个实体 User 为例，基础 URL 为 `/api/user`，则：
+
+ * 查询 **GET** `/api/user/:id`
+ * 添加 **POST** `/api/user`
+ * 修改 **PUT** `/api/user/:id`
+ * 删除 **DELETE** `/api/user/:id`
+
+**export default class Api**
+
+* `constructor(url)`
+* `add(model)`
+* `update(id, model)`
+* `delete(id[, params])`
+* `one(id[, params])`
+* `all([params])`
+
+```js
+// CityApi.js
+import Ajax, { GET } from './ajax'
+
+// 通过 Ajax 类实例化拥有基础的 QRUD 能力
+const CityApi = new Ajax('/city')
+
+// 如果需要额外的个性化请求，借助 GET、POST、PUT、DELETE 工具方法添加
+CityApi.paging = params => GET('/city2', params)
+
+export default CityApi
+```
+
+## 调用
+
+```js
+// actions.js
+import CityApi from 'api/city'
+
+export default {
+    getCitys(store) {
+        CityApi.all().then(data => {
+            store.commit('citys', data.citys)
+        })
+    }
+}
+```
+
+```vue
+// componet
+<template>...</template>
+<script>
+import CityApi from 'api/city'
+
+export default {
+    data() {
+        return {
+            cityData: []
+        }
+    },
+    created() {
+        CityApi.all().then(data => {
+            this.cityData = data.citys
+        })
+    }
+}
+</script>
+```
+
+## 多级资源请求
+
+路径模版约定为：`/api/资源名/:资源id/子资源名/:子资源id`。
+
+假如我们要请求用户的团队信息，则：
+
+* 添加 **POST** `/api/user/:userId/team`
+* 查询 **GET** `/api/user/:userId/team`
+* 查询单个 **GET** `/api/user/:userId/team/:teamId`
+* 修改 **PUT** `/api/user/:userId/team/:teamId`
+* 删除 **DELETE** `/api/user/:userId/team/:teamId`
+
+```js
+// teamApi.js
+import Ajax from './ajax'
+
+const TeamApi = new Api('/user/:userId/team')
+
+export default TeamApi
+```
+
+```js
+// 调用
+import TeamApi from 'api/teamApi'
+
+// 添加
+TeamApi.add(userId, team)
+// 查询用户所有团队
+TeamApi.all(userId)
+// 查询用户某个团队
+TeamApi.one(userId, teamId)
+// 修改
+TeamApi.update(userId, teamId, team)
+// 删除
+TeamApi.delete(userId, teamId)
+```
+
+总结来说：
+
+* `Ajax` 基础类只需要传一个 URL pattern，就可以实例化符合 RESTful 规范的接口调用。
+* 所有 URL pattern 上的占位符按顺序传入，`body` 或 `params` 永远作为最后一个参数传入。

doc/components.md

@@ -0,0 +1,46 @@
+## 可复用组件
+
+每个可复用组件（无状态、UI、端对端）在 `components` 中建立单独的文件目录，所有与该组件相关的资源均放入该目录中。
+
+```
+🗁 components
+  `--🗁 tree
+  |  |--🗎 index.js
+  |  |--🗎 tree.vue
+  |  `--🗎 treeItem.vue
+```
+
+组件目录以 `index.js` 为组件入口，导出可被调用的组件。
+
+```js
+// index.js
+import tree from './tree.vue'
+import treeItem from './treeItem.vue'
+
+export default tree
+export { treeItem }
+```
+
+然后就可以这样调用一个组件：
+
+```js
+import tree, { treeItem } from 'components/tree'
+
+export default {
+    components: {
+        tree,
+        treeItem
+    }
+}
+```
+
+## 视图/容器组件
+
+放入 `view` 目录，以目录提现模块或路由层级，`index.vue` 为组件入口。
+
+```
+🗁 view
+  `--🗁 project
+  |  |--🗎 index.vue
+  |  `--🗎 projectDetails.vue
+```

doc/css.md

@@ -0,0 +1,85 @@
+## 公共样式
+
+样式重置、图标、字体、工具类等样式样式，各自单独一个文件。
+
+```
+🗁 less
+  |--🗎 app.less
+  |--🗎 base.less
+  |--🗎 icons.less
+  |--🗎 mixins.less
+  |--🗎 reset.less
+  |--🗎 utils.less
+  `--🗎 variables.less
+```
+
+`app.less` 作为编译入口，引入 variables、mixins 和全部公共样式。
+
+```less
+@import "variables.less";
+@import "mixins.less";
+@import "reset.less";
+@import "base.less";
+@import "icons.less";
+@import "utils.less";
+```
+
+在项目入口文件引入 `app.less`。
+
+```js
+// main.js
+import './less/app.less'
+```
+
+## 组件样式
+
+可以把各个组件相关的样式写入组件内 `<style>...</style>` 中，组件样式引入公共依赖进行调用。
+
+```vue
+<template>...</template>
+<script>...</script>
+<style lang="less">
+@import "~less/variables";
+@import "~less/mixins";
+/*
+  ...
+*/
+</style>
+```
+
+也可以在组件目录中，添加同名 `less` 文件，并在组件内引入。
+
+```
+🗁 components
+  `--🗁 myComponent
+  |  |--🗎 index.vue
+  |  `--🗎 myComponent.less
+```
+
+```vue
+<template>...</template>
+<script>...</script>
+<style lang="less">
+@import "./myComponent";
+</style>
+```
+
+组件功能和样式内聚，在删除一个组件功能的同时，样式也被删除，不需要考虑废弃的样式被打包。
+
+## 变量管理
+
+变量按照全局和类别，分模块编写，类别样式引用全局样式。
+
+```less
+// global
+@primary-color: #20a0ff;
+
+// btn
+@btn-primary-background: #20a0ff;
+
+// link
+@link-color: #20a0ff;
+@link-hover-color: darken(#20a0ff, 10%);
+```
+
+> 示范文件：[bootstrapV3 - variable.less](https://github.com/twbs/bootstrap/blob/master/less/variables.less)