中小型项目前端架构.docx

中小型项目前端架构
2
中小型项目前端架构
3
4
一个好的架构，一定是易于维护的，例如在新增需求、更改需求、修正bug，都不会造成意料之外的变化我们已经明确了有哪些东西，那么接下来，我们要明确这些东西该如何以文件的形式来划分。
如下图：
14
1. 项目构建相关
，也要使用es6语法，因此babel是必须的；
15
又因为要自动化混淆打包，因此webpack也是必须的；
最后因为要方便多人协同，，方便不同人可以快速自动化通过npm install来安装依赖，也是必须的。
2. CDN相关
而又因为我们要采用外部字体（需求要求引入非常见字体），因此CDN加速是必须的，该字体文件放在html中来配置引用即可。
3. 配置和插件
我们需要直接引入一些插件和配置文件；
为了使用vue，我们需要一个根组件，；
使用vue-router，我们需要配置路由文件，因此router-；
然后我们还需要以插件形式引入一些功能和服务，因此有了Plugin-开头的若干个vue插件，这些都是根据需要封装好的低耦合高内聚方法；
16
4. 需要的npm依赖
当然，，类似的还有vue-。
5. 抽离出的功能模块
除了直接引用的这些插件，我们还有一些和项目高度耦合的功能服务，我认为不能作为插件，但依然需要抽离出来封装好，方便使用和修改；
，所有的ajax请求都放置其中，只对外暴露接口，方便管理和使用；
，他需要引入国际化资源和管理国际化资源的加载；
又例如实现跨组件通信的event-；
。
总结：而这些划分，都体现在上图之中。这就是src目录下的功能模块文件，我们需要的绝大多数功能都可以包括在其中，我们只需要按照实际开发中的需要，将对应的功能写入在这些文件中并引用即可。
17
第五，组件树：
之前谈了功能模块的划分，接下来是组件树。
因为是中小型页面，因此组件树的层级无需太深，但该抽离出来的依然还是要抽离，尽量保证抽离出来的组件解耦以及一个页面组件的逻辑不要太多。如下图：
18
19
0. 根组件
所有组件最终往上找，，根组件只负责管理他的直接子组件。
每个组件都只负责管理自己的直接子组件，不跨级管理，并且不依赖于自己的子组件（否则可能因为子组件的未加载或错误而导致父组件错误），做到解耦和内聚。
1. 弹窗dialog和弹窗tips
因为弹窗dialog和弹窗提示tips可能同时存在，因此将其划分为2个组件，方便管理。
2. 未登录页面和登录页面
因为页面存在登录和未登录状态，而为了加载速度考虑，当未登录时，不加载已登录页面，因此需要划分出来，并进行异步加载处理。
20
3. 未登录页面
未登录页面又分为三种情况： 
初始页面：毫无疑问要直接加载
登录弹窗：点击登录时加载（异步）
注册弹窗：点击注册时加载（异步）
之所以分拆开，是因为根据需求，已登录用户刷新页面，可以直接进入登录后页面，因此无需登录和注册，这种处理可以减少流量消耗，提升加载页面加载速度（特别是注册弹窗需要加载的内容还比较多）。
4. 已登录页面
已登录页面有较多页面，采用默认加载初始页，然后异步加载其他页面（访问时）。
21
5. 弹窗dialog
由于逻辑较少，代码量不多，因此为了方便管理，统一将其合并在一个vue文件中，共同相同的打开逻辑，根据传递的key决定打开哪一个。这样在新增弹窗时，无需再去写弹窗的打开、关闭逻辑。
假如有较复杂的弹窗，可以以子组件的形式引入到当前vue文件中，如此也方便管理；
6. 国际化管理
和页面高耦合，负责加载对应的国际化资源，并进行切换管理。
7. 页面组件
可能有子页面和复用的组件，按照正常方式引用即可。
22
8. 样式文件
，但因为我的公共样式文件比较少，，