中小型项目前端架构.docx

整理文本
中小型项目前端架构
、为什么要有一个好的架构
首先明确一点，架构是为需求服务的。前端架构存在的目的，就我个人理解来说，有以下几点：
.提高代码的可读性
一个好的架构，代码的可读性一定是很强的。
简单来说，假整理文本
整理文本
首先有一个根html,用户需要通过访问它来加载我们的
js逻辑，
整理文本
整理文本
，我们的前端代码可以被划分为三部分:
?组件树
?功能模块
?各种资源
如下图:

html文件
夷源
（比扣谷歆宇惨文件）
整理文本
整理文本
功能插件
页面组件
资源
tt
JJJL.!
用户信息
玉际化
已登录页面
望用的组件
犷康方法
里争患、过避舞、时助
法犷原等）
行神主费页面、亘用的功能组
件、弹箭等
整理文本
整理文本
功能划分好之后，相同功能的放在同一个文件夹下，命名风格应该类似。
具体来说，组件树相关的东西，，放置在components文件夹下；资源，有图片或者国际化资
源等，，放置在resources文件夹下；而功能插件、服务等，因为可能被多处引用，因此为了方便引用，放在src文件夹下，并且该文件夹是components文件夹和resources文件夹的上级文件夹.
第四，细化功能模块:
功能、组件树以及资源，我们已经明确了有哪些东西，那么接下来，我们要明确这些东西该如何以文件的形式来划分。
如下图:
整理文本
整理文本
项目文件结构
配重别码以及兼
客设置
字体文fL以及通
亚ON加速的资源
ma
App,vue
四的根组件
Plug in^Se rvicejs
封登的服务插件
P9ugin-
国龌化插件
route r-
路由配置
PlMgin-AJAXJi
aja*插件
Plugin*
过滤器捕件
Plugin 'WhichType Js
类型判断播件
Vue-router
VUE的第由模块

引入Vue的实例
口他引用吊科，二
全局使用的）
善抑pdyfiH
为例引口客捏依*
客恒支持
项目构建相关
,也要使用es6语法，因此babel是必须的;
又因为要自动化混淆打包，因此webpack也是必须的；
npm
最后因为要方便多人协同，，方便不同人可以快速自动化通过
install来安装依赖，也是必须的。
整理文本
.CDN相关
CDN加速是必须的，该字体文件放在 html
而又因为我们要采用外部字体（需求要求引入非常见字体），因此中来配置引用即可。
.配置和插件
?我们需要直接引入一些插件和配置文件；
?为了使用vue,我们需要一个根组件，；
?使用vue-router,我们需要配置路由文件，因此router-；
?然后我们还需要以插件形式引入一些功能和服务，因此有了Plugin-开头的若干个vue插件，这些都是
根据需要封装好的低耦合高内聚方法；
.需要的npm依赖
当然，,类似的还有vue-
.抽离出的功能模块
除了直接引用的这些插件，我们还有一些和项目高度耦合的功能服务，我认为不能作为插件，但依然需要抽离出来封装好，方便使用和修改；
?,所有的ajax请求都放置其中，只对外暴露接口，方便管理和使用；
?§他需要引入国际化资源和管理国际化资源的加载;
?又例如实现跨组件通信的event-；
?
整理文本
总结：而这些划分，都体现在上图之中。这就是src目录下的功能模块文件，我们需要的绝大多数功能都可以包
括在其中，我们只需要按照实际开发中的需要，将对应的功能写入在这些文件中并引用即可。
第五，组件树:
之前谈了功能模块的划分，接下来是组件树
因为是中小型页面，因此组件树的层级无需太深，但该抽离出来的依然还是要抽离，尽量保证抽离