前言

最近感觉之前所在的公司，代码过于随意，项目包括项目结构，项目代码像个玩具，封装性不好，代码耦合度也很高，注释什么的也是过于随意,与后端人员也没有一个很好的约定。样式看起来也不是正儿八经的，没有一个统一的管理。所以想在这里归纳总结一下，未来也会持续总结。

从项目框架搭建开始(以Vue搭建的项目为例)

初始化项目

可以直接用最新的脚手架搭建项目，当然如果公司有自己配置好的demo，也可以拿来用，因人而异。

项目模块(项目文件夹的分配)

如果做过一个大型的后端pc系统，必然包括很多功能模块，基本就是上导航栏，左边导航栏加上中间内容构成的页面总体布局，看起来简单，其实不然，复杂的大型的项目难就难在整体的架构设计，里面的内容反而是次要的，通常都是一个小组几个人在已经搭好的架构下填充内容(几年工作经验甚至刚毕业的都能干)。
初步表面架构:使得一个项目多人合作，各自负责自己的模块。提交代码到git时最大化避免冲突，相当于前后端分离的基础上，为了多人的合作，进一步的分离。
首先公司内部最好有自己得gitlab进行项目管理，然后配置好自动部署得功能，可使程序员专注眼前代码。
1.项目目录结构(以vue常见得后端管理系统为例)
脚手架搭建之后大致如此

2.内部目录
1）router文件夹，如果项目模块很多，该文件夹内部可以模块名称划分为多个文件夹名，各自分开，防止多人开发使路由文件混乱
2）components 组件文件夹

同理：该文件夹内部可以模块名称划分为多个文件夹名，各自分开，防止多人开发使组件文件混乱，各在各自己创建得符合命名规范得文件夹内部创建组件。

同理 store， views 文件夹也应如此，这样在项目目录层次上产生了分级，各干各得就好了
3.文件内部耦合分离与接口得统一管理等
我们开发项目，必然要有一个专门管理与后台接口所对应得api文件（夹）。
这样可以统一管理，例如图下，api文件夹里得index.js，这里要与后端进行沟通，然后设置统一公共请求参数，设置请求拦截器，设置响应拦截器，
值得说明得使:

看上图，与后端约定好状态码为200得的时候，返回数据，否者统一返回后端传来的错误，这里需要和后端商议好。这样在所有人调用接口的时候就不用在判端一次返回啥错误。

然后针对各个模块建立对应api文件，对ajax接口进行封装，方便vue文件里调用!

页面样式的统一化与正规化
对于公共样式可以放在styles文件夹里，然后在main.js里面引用。这里我结合了前端框架element-ui进行后端系统的开发已经足够了。
对于系统内部页面如 tabel,form等应采取统一风格样式，对tabel等进行处理，让其看起来是个符合大众的严谨的样式。
如:

可以看到我截图所展示的，风格基本统一，tabel样式也进行了处理