Vue项目优化方案

经过对项目结构 / 开发方式 / 技术架构的研究，再次提出部分可以优化的点。

刚加入新公司之后，在学习来新公司的开发技术之后，就迫不及待的想要将自己过往的开发方式和技巧融合到现在的项目中，下面是针对目前项目的中一些技术点的改进思路

此方案主要由如下几点组成：

代码编写规范
Api层抽离
Request工具更高效封装
路由分离配置方案
目录结构整理
数据请求优化
Mock数据配置
方案在不断的编写过程中，其他内容还需大家共同努力发现，整理。

代码编写规范
良好的代码编写规范可以大幅度提高项目开发效率，增加代码的可读性/可维护性/可测试性，减少开发/重构等场景的复杂耗时程度。

代码规范可以划分为构建规范/编写规范等方面，例如项目结构的搭建，说明文档的维护/模块的构建与命名/代码中注释与业务代码编写方式等方面都应该考虑到并设立统一的/较优的规则来进行约束，下面就进行简单说明：

项目结构重构
项目结构构建过程中，应该不断维护《目录结构说明文档》，并且建立项目结构版本，如：1.0.0，并且应该标注如下几点：

结构中新建与改动过程的动作说明
项目结构版本信息
目录与模块文件命名
根据目前已经处于开发过程中的项目，整理部分规则如下：

一般目录命名采用lowercase方式，，目录由多个单词组件则利用"-"连接，如：

router,

store,

components,

store/modules,

utils/dygraph-plugin

views中路由视图目录采用大驼峰形式命名，如：

views/Algorithms

views/Events

views/Monitor

工具模块， 基础业务模块文件采用lowercase方式，目录由多个单词组件则利用"-"连接，如：

bin/babel-external-helpers.js (babel中的命名方式)

store/modules/event.js

组件命名采用大驼峰方式命名，如：

AlgorithmsCenter.vue

AlgorithmsDdetail.vue

具体命名方式可以参考Vue.js风格指南 。

代码编写规范
代码编写过程中应遵守基本的开发规范准则，在这里只是给出部分建议。

BEM（Block-Element-Modifier）结构命名方式

HTML编写DOM结构并标时尽量遵守BEM命名方式，具体请参考文献：BEM–前端命名规范介绍，BEM —— 源自Yandex的CSS 命名方法论。

注意：没必要真的在每个地方都用上它，当某个节点不属于任何一个BEM范畴的时候，按照常规命名方式就可以。

OOCSS（Object Oriented CSS）编写方式

OOCSS（面向对象CSS编写）并不是什么新奇的技术，它想表明的其实就是我们可以将样式与固定的dom解耦，将一个或多个细小的css样式添加到需要它们的dom节点身上，目的其实还是为了提高代码的复用率，并且代码可读性也会有很大的提高，在项目中特别推荐使用BEM + OOCSS的开发方式，网上有很多结合使用指南，这里给大家提供一个非常简洁的CSS的组件化方案：OOCSS + BEM。

Javascript规范可以参考Eslint中更多详细的规则，Google Javascript规范也是不错的选择，比如：

1. 拒绝var
2. 使用空格代替tab
3. 优先使用箭头函数
4. 使用模版字符串代替连接字符串
5. …
   复制代码
   这里提供给大家来自阿里的Kissy 最佳编码实践。

<