# 蜂网

|`npm run <script>`|解释|
|------------------|-----------|
|`serve`|服务启动在8088端口|
|`build`|编译程序到dist目录下（默认目录~/dist）。|
|`test`|开启Karma测试并生成覆盖率报告。|
|`lint`|Lints and fixes files|

## 二、目录结构

这个项目的结构使用的是 **fractal(不规则碎片形：适合大型项目)***，方法的分组主要是依照特性而不是文件类型。注意，这个目录结构只是一个指引，并不一定要按这个来。这种结构谐在让程序更容易扩展，想了解更多请[点击这里](https://github.com/justingreenberg)。


```
.
├── public                   # 静态资源 （不经过webpack,只会被简单的复制）
│   └── index.html           # 项目页面模板
├──────────────────────────────────────────────────────────────────────────
├── src                      # 程序源文件
│   ├── main.js              # 程序启动和渲染入口文件
│   ├── components           # 全局可复用的组件(最好是 Presentational Components)
│   ├── views                # 主页结构 （页面）
│   │
│   ├── assert               # 静态文件 （会被打包处理）
│   ├── styles               # 全局通用样式
│   ├── https                 # 网络请求
│   ├── config               # 全局通用配置项
│   ├── utils                # 全局通用工具库
│   │
│   ├── store
│   │   ├── index.js         # 我们组装模块并导出 store 的地方, 可能还有根级别的代码
│   │   ├── modules          # 使用模块将单一状态树进行分割
│   └── routes               # 主路由和异步分割点
│       ├── index.js         # 路由入口
│       └── routes           # 路由定义
├── tests                    # 单元测试
└── vue.config               # 项目配置文件：所有打包配置项以及webpack配置
```

### 静态资源
1. 使用相对路径引入的静态资源文件，会被webpack处理解析为模块依赖。
例如，在` <img src="./logo.png">和 background: url(./logo.png)`以及`CSS@import,"./logo.png"`  是相对的资源路径,
`<img src="../image.png">` 会被编译成
 `createElement('img', { attrs: { src: require('../image.png') }})`

2. public文件的内容并不会被 webpack 处理：它们会直接被复制到最终的打包目录下。必须使用绝对路径引用这些文件。
参考： https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

## 三、打包优化

## 四、代码规范

### 协同规范
1. **除了组件使用 PascalCase 命名， 其他使用 camelCase 命名**
2. 不要使用自创的英文，缩写请使用大家都懂的缩写，如`desc`,`fnc`,`num`,`conf`等。如果不确定请使用全称
3. **提交代码时，必须清理所有的eslint报错，以及程序运行错误**
4. **提交代码的时候请认真看好每个文件的difference**
5. **拉取代码的时候也请看清楚每个文件的difference**

### 代码组织
1. 当我们这写原型，写demo的时候，将多个功能，多个模块的代码放在一个地方是合理的，但是一旦你的应用增长，你应该考虑将这些*code*放到合适的模块中去，只有这种方式你的应用才能扩展。

2. **组件（页面）必须以文件夹的形式出现**
例子： 在`src/components/`文件中，存放一个GoTop组件，我们期望这样的代码组织形式
入口文件： `src/components/GoTop/index.js`
主文件：   `src/components/GoTop/GoTop.vue`
常量配置： `src/components/GoTop/constant.js`
图片：     `src/components/GoTop/image/*.png`
*其中，入口文件和主文件为必须*

3. 文件中的`index.js`表示它是这个文件夹的入口文件，这是来自Node社区的命名共识。`index`文件是一个模块的公共入口。它描述了一个模块的公共API。外部模块只允许通过`index.js`文件导入模块中的共享代码。
在这个模块结构中，一个组件被 `.Vue`组件声明,常量配置，图片资源共同定义

4. **不要把你没有用的代码复制粘贴进项目。如果有，请不要提交，谢谢**
5. **代码只有两种形式，`src`目录下的源码，`node_Modules`下的插件库。对于`src`目录内的源码，无论是手写，还是复制粘贴得来的。对于该项目内的其他成员来说，都是硬编码。所以即使是复制粘贴而来的代码，也要一行一行看清，清理干净不需要的。对于node_Modules内的插件，请区分"dependencies"与"devDependencies"。**

### 组件规范
1. 非Element组件，必须采用PascalCase命名
2. 组件必须使用为Props定义，**且禁止使用数组定义**
3. 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
4. 完整单词的组件名
5. 组件选项按顺序写
6. 每个组件必须有 name 选项
7. **单个文件除去注释不要超过 250行**

## 五、Setting 组件配置模块的约定
1. 组件配置模块命名为 `Modal${componentName}`

2. 统一引入 src/views/modalMixin.js
组件配置组件有强约束，必须先认真看modalMixin.js的内容

## 六、代码部署
测试:

sh deploy.sh development (发布到开发环境)

域名：

服务器：

目录：

## 七、git操作相关
多人合作流程：
**先commit,再pull,再push**
1. commit 是为了告诉git,我这次提交了哪些东西，不然你只是改了，但是git不知道你改了，也就无从判断比较。
2. pull 是为了本地 commit 和 远程 commit的对比记录，git是按照文件的行数操作进行对比的，如果同时操作了某文件的一行，那么就会产生冲突，git也会把这个冲突给标记出来，这个时候就需要先把你和冲突的那个人（本人）拉过来问问保留谁的代码，然后在 `git add && git commit && git pull`这三连，再次pull一次是为了防止再你们协商的时候另外一个人又给提交了一版东西，如果真发生了，那流程重复一遍，通常没有冲突的时候直接就给你合并了，不会把你的代码覆盖掉
3. 出现代码覆盖或者丢失的情况，比如A B两人的代码 pull 时候的版本都是1，A在本地提交2,3并且推送到远程了，B 进行修改的时候没有 commit 操作，它先自己写了东西，然后git pull 这个时候 B本地版本已经到了3了，B在本地版本3的时候改了 A 写过的代码，再进行 `git commit && git push`那么在远程版本中就是4，而且A 的代码被覆盖了，所以说所有人都要commit 再 pull, 不然真的会覆盖代码的

<!-- 创建人： 吴晴浩 -->
<!-- 修改时间： 2018.8.9 -->
<!-- 修改时间： 2018.8.16 -->