Skip to content

Commit 30aec7b

Browse files
tkverntkvern
committed
更新文档
1 parent 3414300 commit 30aec7b

File tree

3 files changed

+42
-195
lines changed

3 files changed

+42
-195
lines changed

‎index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,9 @@
5151
<script src="//unpkg.com/docsify-copy-code"></script>
5252
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
5353
<script src="//unpkg.com/docsify-pagination/dist/docsify-pagination.min.js"></script>
54-
<script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
55-
<script src="//unpkg.com/prismjs/components/prism-powershell.js"></script>
54+
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
55+
<script src="//unpkg.com/prismjs/components/prism-powershell.min.js"></script>
56+
<script src="//unpkg.com/prismjs/components/prism-typescript.min.js"></script>
5657

5758
</body>
5859
</html>

‎工程规范-前端.md

+37-189
Original file line numberDiff line numberDiff line change
@@ -22,32 +22,6 @@
2222
* 视频播放：[MPlayerX](http://mplayerx.org/)
2323
* @todo zsh 的配置信息统一，Alias 等信息。
2424

25-
![RMBP](https://dev-vr-static.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E7%89%8733.png)
26-
27-
### 开发插件(效率辅助)
28-
| 名称 | |
29-
| ------------------------------------------------------------ | ---------------------- |
30-
| [Ant Design Snippets](<https://marketplace.visualstudio.com/itemdetails?itemName=bang.antd-snippets>) | Ant Design开发必备 |
31-
| [Color Highlight](<https://marketplace.visualstudio.com/itemdetails?itemName=naumovs.color-highlight>) | 高亮显示web颜色 |
32-
| [Document This](<https://marketplace.visualstudio.com/itemdetails?itemName=joelday.docthis>) | 自动生成注释格式 |
33-
| [ES7 React/Redux/GraphQL/React-Native snippets](<https://marketplace.visualstudio.com/itemdetails?itemName=dsznajder.es7-react-js-snippets>) | React最新的ES7语法必备 |
34-
| [ESLint](<https://marketplace.visualstudio.com/itemdetails?itemName=dbaeumer.vscode-eslint>) | 前端代码检验必备 |
35-
| [GitLens](<https://marketplace.visualstudio.com/itemdetails?itemName=eamodio.gitlens>) | git管理工具 |
36-
| [JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/itemdetails?itemName=eamodio.gitlens) | ES6语法必备 |
37-
| [Live Server](<https://marketplace.visualstudio.com/itemdetails?itemName=ritwickdey.LiveServer>) | 静态文件服务 |
38-
| [Material Icon Theme](<https://marketplace.visualstudio.com/itemdetails?itemName=PKief.material-icon-theme>) | 非常好看的文件icon |
39-
| [Material Theme](https://marketplace.visualstudio.com/itemdetails?itemName=Equinusocio.vsc-material-theme) | 非常好看的主题 |
40-
| [SonarLint](https://marketplace.visualstudio.com/itemdetails?itemName=SonarSource.sonarlint-vscode) | 代码质量检测，必备 |
41-
| [TODO Highlight](https://marketplace.visualstudio.com/itemdetails?itemName=wayou.vscode-todo-highlight) | 效率工具，高亮todo任务 |
42-
| [Vetur](<https://marketplace.visualstudio.com/itemdetails?itemName=octref.vetur>) | Vue开发必备 |
43-
| [Vue 2 Snippets](<https://marketplace.visualstudio.com/itemdetails?itemName=hollowtree.vue-snippets>) | Vue语法提示 |
44-
| [Vue](<https://marketplace.visualstudio.com/itemdetails?itemName=jcbuisson.vue>) | Vue文件解析 |
45-
| [StandardJS - JavaScript Standard Style](<https://marketplace.visualstudio.com/itemdetails?itemName=chenxsan.vscode-standardjs>) | Nodejs后端开发必备 |
46-
| [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) | 格式化必备 |
47-
| [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory) | git可视化提交记录 |
48-
49-
50-
5125
## 代码风格(必须)
5226
我们对代码格式做了统一风格配置，减少重复配置差异问题。分为以下几块
5327
```bash
@@ -135,7 +109,6 @@ git hook 代码commit时
135109
- 前端代码使用自动构建脚本+ CI
136110
实现自动部署
137111

138-
- shell_build https://git.jiatuiyun.net/vernzhang/shell_build
139112

140113
## 组件(必须)
141114

@@ -184,38 +157,49 @@ const codeMessage = {
184157
185158
### response
186159

160+
- 默认接口格式
161+
162+
```javascript
163+
export interface response {
164+
success: boolean; // if request is success
165+
data?: any; // response data
166+
errorCode?: string; // code for errorType
167+
errorMessage?: string; // message display to user
168+
showType?: number; // error display type： 0 silent; 1 message.warn; 2 message.error; 4 notification; 9 page
169+
traceId?: string; // Convenient for back-end Troubleshooting: unique request ID
170+
host?: string; // onvenient for backend Troubleshooting: host of current access server
171+
}
172+
```
173+
174+
175+
187176
- 普通数据
188-
```json
177+
```javascript
189178
{
190-
data: {},
191-
msg: "",
192-
code: 200,
193-
t: 1518631646,
179+
"success": true,
180+
"data": {},
181+
"errorCode": "1001",
182+
"errorMessage": "error message",
183+
"showType": 2,
184+
"traceId": "someId",
185+
"host": "10.1.1.1"
194186
}
195187
```
196-
- 列表数据
197-
```json
188+
- 列表数据(所有分页下标从1开始)
189+
```javascript
198190
{
199-
data: {
200-
list: [],
201-
page: 1,
202-
pageSize: 10,
203-
total: 100,
204-
more: true
191+
.
192+
.
193+
.
194+
"data": {
195+
"list": [],
196+
"current"?: 1,
197+
"pageSize"?: 10,
198+
"total"?: 100
205199
}
206-
msg: "",
207-
code: 200,
208-
t: 1518631646,
209-
}
210-
```
211-
- 请求错误
212-
213-
```json
214-
{
215-
data: null, // 特殊情况，批量操作返回成功和失败的元素和原因
216-
msg: "",
217-
code: number, // 按正常的错误码返回
218-
t: 1518631646,
200+
.
201+
.
202+
.
219203
}
220204
```
221205

@@ -275,142 +259,6 @@ UI 组件交互操作；
275259
![rmps](https://gw.alipayobjects.com/zos/rmsportal/NKsqmTAttwTzYVMJMcnB.png)
276260

277261

278-
279-
## Vue
280-
### 项目目录结构了解一下
281-
#### 0.1.0版
282-
```bash
283-
.
284-
├── build # 项目构建配置
285-
│ ├── webpack.base.config.js # webpack 基础配置
286-
│ ├── webpack.dev.config.js # 本地开发环境配置
287-
│ ├── webpack.pre.config.js # pre 环境配置
288-
│ ├── webpack.prod.config.js # 测试(test|checkout)环境配置
289-
│ └── webpack.test.config.js # 生产环境配置
290-
├── cli # 命令工具
291-
├── config # 环境变量配置
292-
├── dist # 构建后文件
293-
├── docs # 自动生成文档
294-
├── src
295-
│ ├── api # 请求接口
296-
│ │ ├── api.js # 所有接口汇总输出文件
297-
│ │ ├── commons.js # 通用 api(如获取用户信息，发验证码等与模块无关接口)
298-
│ │ └── toAxios.js # 基于 axios 封装的请求方法
299-
│ ├── assets # 静态资源
300-
│ │ ├── images
301-
│ │ ├── less
302-
│ │ └── svg
303-
│ ├── components # 组件
304-
│ │ ├── commons # 通用组件
305-
│ │ └── layout # 布局组件
306-
│ ├── directive # 指令
307-
│ ├── mock # mock数据
308-
│ ├── router # 路由
309-
│ ├── store # vuex
310-
│ ├── styles # 样式
311-
│ ├── tools # 工具函数集合
312-
│ ├── views # 视图
313-
│ ├── app.js # 入口文件
314-
│ ├── App.vue
315-
│ └── index.html
316-
├── jsconfig.json
317-
├── package.json
318-
├── README.md
319-
└── webpack.config.js
320-
```
321-
322-
323-
### 技术栈简介
324-
325-
- 该项目技术栈为 Vue(V2.5.16)+Vuex，
326-
- 构建工具为 Webpack4.x
327-
328-
### 代码风格
329-
330-
> 绝大部分的内容都可以有`eslint`插件来检查并约束，下面简单列举一些插件可能不会强调的命名相关的规范。
331-
332-
- JavaScript 命名规范：
333-
- 全局大写英文中间用下划线'\_'连接
334-
- 普通变量小驼峰
335-
- class 类或者构造函数大驼峰
336-
- css 类名规范(很少用 id)：
337-
- 小写英文用中横线'-'连接
338-
- 如果是 id 小驼峰形式
339-
340-
#### 关于 JavaScript
341-
342-
- JavaScript 语法检查默认使用`eslint`规范
343-
- JavaScript 解释器为 babel，默认引入 babel-polyfill，兼容某些浏览器，若不需要可自行删除
344-
- 最大程度解释最新语法即 stage-0，所有同步操作均为 async-await 方式，Promise 自行封装
345-
- 所有项目用到的工具类方法统一提取放到 `./src/tools` 目录下，可根据功能创建对应文件归类
346-
347-
#### 关于 VUE
348-
349-
- 页面级 vue 文件全部放在 `./src/views`文件下，若有子页面新建页面目录放子页面视图组件
350-
- 组件级 vue 文件分俩种:
351-
- 第一种全局通用(可能会被多次使用的)命名方式为 `AppFunctionName.vue`(App 功能名.vue)，统一放置在 `./src/components` 目录下
352-
- 第二种组成页面组件(有且只会被引用一次)命名方式为 `ThePageNameDesc.vue`(The 页面名内容描述.vue)，统一放置在 `./src/components/pageName/` 目录下
353-
354-
#### 关于 VUEX
355-
356-
- Vuex 相关代码全部集中在 `./src/store` 目录
357-
- `./src/store/index.js`为主输出文件，
358-
- 转态管理原则，除了组件内部自己消化的数据外其他的都可以用 vuex 管理。为避免状态管理混乱分模块管理，一个模块包含一个页面及其子页面状态数据:
359-
- `./src/store/mutation-types.js` 存放所有会用到的类型命名 规则：`PAGE_DATADESC_ACTION` 页面*状态描述*动作(actions 对应 get,mutation 对应 update)
360-
- `./src/store/mutations.js` 存放全局 mutation 比如通用弹层显示标识状态更新
361-
- `./src/store/actions.js` 存放全局 actions 比如登录，获取更新用户信息啥的
362-
- `./src/store/getters.js` 快捷取同时格式化数据方法，貌似有 bug 有时并不实时，很少使用
363-
- `./src/store/modules` 目录存放各模块的转态管理，子页面状态都集中到父页面 具体写法参考 `./src/store/modules/tpl.js`
364-
365-
#### 关于外部数据请求
366-
367-
- 所有 ajax 数据请求全部封装并集中到 `./src/api` 目录下 （不管是做什么更新数据也好，还是做单一操作也好）
368-
- `./src/api/toAxios.js` 基于 `axios` 封装的请求方法，内部有不同情况的拦截器设计，可根据不同配置执行相应操作
369-
- `./src/api/api.js` 所有接口集中统一输出地方
370-
- `./src/api/page.js` 对应所有页面会用到的接口请求
371-
- `./src/api/sys.js|commons.js` 对用系统级通用级接口 自行安排 唯一的原则就是不能乱，要让别人很快找到某个功能接口写在哪
372-
373-
#### 关于 CSS 样式
374-
375-
- CSS 预处理为 less
376-
- CSS 后处理器为 PostCss
377-
- 默认使用 rem(postcss-px2rem)，即移动端项目，若是 PC 项目可以注释掉引用 rem 插件的处理器
378-
- 通用样式，可以 minixs 样式，可复用样式全部提取放到 `./src/assets/less` 目录下，根据自身功能分别安排
379-
- 组件私有样式放置在 vue 文件内默认使用 scoped 模式
380-
381-
#### 关于图片
382-
383-
- 统一放置到 `./src/images/`目录下
384-
- 多次使用图片 `./src/images/commons`
385-
- 某个页面独有 `./src/images/pageName`
386-
387-
#### 其他项目目录
388-
389-
- `./src/router` vue 路由配置，关于路由跳转 默认原则是先拿到数据在跳转，若获取数据失败会提示，不会跳转 避免有时 vuex 数据在页面更新后才获得数据无法同步的问题
390-
- `./src/socket` 基于 `socket.io` 的 socket 启动处
391-
- `./src/cli` 一个扫描指定目录生成文档的工具
392-
- `./src/doc` 扫描完自动生成的文档内容
393-
- `./src/docs` docsify 文档比较好看
394-
395-
#### 关于 Webpack
396-
397-
- `webpack.base.config.js` 默认基础配置，
398-
- `webpack.dev.config.js` 开发环境配置
399-
- `webpack.test.config.js` 测试环境配置
400-
- `webpack.pro.config.js` 生产环境配置
401-
402-
### 关于 vscode 相关插件
403-
404-
- `vscode-fileheader`
405-
- 插件fileheader及相关配置
406-
407-
`"fileheader.Author": "Firmiana",`
408-
409-
`"fileheader.LastModifiedBy": "Firmiana",`
410-
411-
`"fileheader.tpl": "/**\r\n * @Author: {author}\r\n * @Date: {createTime}\r\n * @Desc: \r\n */\r\n",`
412-
- 添加至 `setting.json`
413-
414262
### 注意事项
415263

416264
- ubuntu 下使用 webpack 的热重载无效，是因为 ubuntu 的文件权限问题。

‎项目规范.md

+2-4
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ Nodejs 社区提倡使用 Linux 系统，开发环境 *`Nodejs Vagrant`* 中默
2323

2424

2525

26-
#### Nodejs 10.x
26+
#### Nodejs 10.x+
2727

2828
Node 版本 **应该** 优先考虑 Nodejs 10.x。
2929

30-
#### MySQL 5.7
30+
#### MySQL 5.7+
3131

3232
数据库软件 **应该** 优先选择 MySQL，因为其使用率最高。MySQL 5.7 已经是大势所趋，选择版本时 **应该** 优先考虑 MySQL 5.7。
3333

@@ -138,5 +138,3 @@ $ npm install pacakge_name --dev
138138
* 设计工具：[Sketch 3](https://www.sketchapp.com/)
139139
* 视频播放：[MPlayerX](http://mplayerx.org/)
140140
* @todo zsh 的配置信息统一，Alias 等信息。
141-
142-
![RMBP](https://dev-vr-static.oss-cn-shenzhen.aliyuncs.com/%E5%9B%BE%E7%89%8733.png)

0 commit comments

Comments
 (0)