我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前言
算是一篇水文吧，准备的不足，涉及的比较浅。
相信很多人都是这样的吧，进入项目的时候已经有大佬帮忙把项目搭建起来了，而我们只是做一些业务方面的开发，看到很多大佬写的关于源码的解读以及底层方法的实现的文章也只是用来应付面试的。我就是这样的。
正文
本文可能很多都是大家日常工作中每天都在用的，更多的人觉得都是废话，不强求学到什么，我只是想自己梳理一下。
本文将从几个方面进行准备：
- 项目架构
- 技术选型
- UI风格管理
- 开发风格
- 自动化
其次，本文更多的是以 vue 为默认语言进行举例子的。
项目架构
项目架构可能有点吹了，只是脑子里词穷了，只想到了这一个词，所以就大胆的使用了。
我接触了一些项目，有些项目很大，大到包含26个子应用，有些项目很小，小到只有一个 jsp 文件，而大部分的项目并没有这么极端，都是一个项目中包含几个模块，模块之间有不同程度的耦合，我想大多数项目都是这一类的吧！
回到正题，所谓项目架构就是要对项目的体积有一个明确的认知：
- 项目中包含多少模块？
- 各个模块之间耦合程度？
- 模块是否可以继续拆解？
- 组件库对各个模块的覆盖程度？
- 具体业务在各个模块之间的重复情况？
可能项目伊始不会有很明确的认知，但是进行分析以后就会得到如下的集中架构思路：
- html+js+css 为主的原生开发思路，包含 php/jsp 类似的混编方案：这个方案可大可小，基于可维护性的原则还是建议在业务比较简单且单一的项目中进行选用。
- vue/react 全家桶开发的前后端分离项目：这个是最常用的方案，但是如果只做一个单点登录的登录页面，就很没有必要了不是？
- vue/react 构建的多入口前后端分离项目：这种方案主要是为了将业务板块进行简单分离，在需要定制化部署某几个业务的时候快速拔插，同时方便团队协作与统一管理。
- qiankun 同类型的 single-spa 构建的微前端项目：这个方案算是比较新的部署方案了，相较于多入口架构，更加方便的进行拔插子应用，适用于子应用多的场景。
分析到这一步，就能进行下面的准备了。
技术选型
技术选型这块其实并没有太多的选择性：
- 原生html+js+css，直接上，干就完了！
- webpack/taro 等工程化工具的使用，在原生的基础上对开发人员更加友好一点。
- vue/react 脚手架的使用，使用模板进行开发。
- vue/react 通过 webpack 配置多入口，将模块进行分离。
同时需要考虑好插件管理：
- 原生方案需要考虑 commonjs、requirejs、AMD 等解决方案。
- 框架的话现在应该都在用 npm 吧！
UI风格管理
这一块，我最原来的想法其实就是我要用那个组件库，或者更早的时候要用哪套 UI 库(框架)，但是随着接触的项目越来越多，遇到的问题也千奇百怪，对于UI风格管理我是从以下几个方向去分析的：
-
UI库的选择
这个东西其实在一定程度上提高了我们的开发效率，但是同时也束缚了我们对css的钻研，但不得不说，真香！
-
兼容范围的确定
兼容范围的确定分为两个维度：浏览器的兼容(IE)，设备的兼容(PC端VS移动端)。
-
一键换肤的管理
一键换肤并不是非得是说这个项目中要做一键换肤这个功能，只是为了应付这种场景：忽然有一天，我们老总不喜欢绿色了，要把项目主题颜色改成红色！
如果等到了老板提出这个问题再去改，一方面不说工作量的问题，另一方面还要考虑老板会不会交了一个喜欢粉色的女朋友嘞？
这个可以提前准备一下，或者用变量记录，或者笨一点记录在 README 中，总之这个想法要在脑子里面过一下的，最重要的是，他能保证项目的主题色是一致的！
-
全局字体
字体分为三类：iconfont为主的icon字体，浏览器支持的安全字体，自己安装的酷炫字体！
建议单独建一个文件，进行引用和统一配置。
-
单位
单位主要是 vw/vh、rem、px这三个了。
-
组件的提取以及全局样式修改
如果使用了组件库，不可避免的会需要改它。
每个人都去改或者每次遇到都去改，肯定不合适啊！做好提前量就显得很重要了。
开发风格
开发风格的话其实只是强迫心理的一种体验，但是整齐&&整洁的项目，谁不会喜欢呢？主要涉及到三个方面：
命名规则统一，缩写以及拼音什么的就不要了吧，除非 obj、arr、str 这些进行缩写，我不是崇洋媚外，其实我更喜欢用中文，但是有些时候中文真的不方便，而且有些英文和拼音的缩写第二天自己都忘了是什么了。
文件命名规则统一，中线连接符，大驼峰，小驼峰三个选择一个就好了，尤其是多人协作的项目，提前做一个约定会很舒服。
项目结构，该放 js 的地方放js，该放 css 地方放 css，不会真的还有人乱七八糟放在一块吧！
自动化、模块化
最简单的例子就是vuex对state的模块化管理，将各个模块进行拆分，提高内聚性！
这个是在我做了一个自研项目的时候深刻的体会到它的方便之处的，项目使用的是 vue2，具体场景如下：
该项目中有5个模块，多人协作开发。正常情况下， router、menu、store 这三个文件在不断的提交过程中会出现冲突的情况。我们当时在各个模块中都各自有一个 menu.js、router.js、store.js 在模块的根目录下，而全局的 router 、store、menu 中写了一个装配器，会根据项目结构，找到所有的配置文件，进行组装。
只是一个很简单的场景，但是确实是应该考虑在前面的！
后记
写的比较粗糙，有很多还没有涉及到的地方：
- git提交规范，以及分支管理规范。
- eslint 和 pretier 统一代码风格。
- . . .
