0、前注
鉴于作者本人的能力有限（非常有限），并且依然在学习中，因此本文的高度和深度必然有所欠缺。
欢迎（并且非常欢迎）大家来批评指正，如果能详细的说明问题在哪里，如何解决和改正，那么就太感谢了！！！
我最喜欢听有理有据的批评了！！
本人：，邮箱：@.com，期待你的交流。
1、为什么要有一个好的架构
首先明确一点，架构是为需求服务的。
前端架构存在的目的，就我个人理解来说，有以下几点：
附图，以日历组件为例，是否考虑到扩展性的结果
未考虑到扩展性
考虑到扩展性：
2、我如何设计架构
我不敢说自己的架构是好的架构（显然不是啦），只能分享自己最近做的一个项目，它的架构的如何做的。
首先，确定需求：
其次开始决定：
第三，划分功能。
首先有一个根html，用户需要通过访问它来加载我们的js逻辑，因此js逻辑的代码被写在main.js之中。
在main.js之下，我们的前端代码可以被划分为三部分：
- 组件树；
- 功能模块；
- 各种资源；
功能划分好之后，相同功能的放在同一个文件夹下，命名风格应该类似。
第四、细化功能模块
功能、组件树以及资源，我们已经明确了有哪些东西，那么接下来，我们要明确这些东西该如何以文件的形式来划分。
如下图：
1、项目构建相关
因为要使用vue.js，也要使用es6语法，因此babel是必须的；
又因为要自动化混淆打包，因此webpack也是必须的；
最后因为要方便多人协同，因此npm的package.json的配置，方便不同人可以快速自动化通过npm install来安装依赖，也是必须的；
2、CDN相关
而又因为我们要采用外部字体（需求要求引入非常见字体），因此CDN加速是必须的，该字体文件放在html中来配置引用即可；
3、配置和插件
4、需要的npm依赖
当然，要使用vue肯定要引入vue.js；
类似的还有vue-router.js和各种兼容性polyfill和全局插件；
5、抽离出的功能模块
6、总结
而这些划分，都体现在上图之中。这就是src目录下的功能模块文件，我们需要的绝大多数功能都可以包括在其中，我们只需要按照实际开发中的需要，将对应的功能写入在这些文件中并引用即可；
第五、组件树
之前谈了功能模块的划分，接下来是组件树；
因此是中小型页面，因此组件树的层级无需太深，但该抽离出来的依然还是要抽离，尽量保证抽离出来的组件解耦以及一个页面组件的逻辑不要太多；
如下图：
0、根组件
1、弹窗dialog和弹窗tips
因为弹窗dialog和弹窗提示tips可能同时存在，因此将其划分为2个组件，方便管理；
2、未登录页面和登录页面
因为页面存在登录和未登录状态，而为了加载速度考虑，当未登录时，不加载已登录页面，因此需要划分出来，并进行异步加载处理；
3、未登录页面
4、已登录页面
已登录页面有较多页面，采用默认加载初始页，然后异步加载其他页面（访问时）；
5、弹窗dialog
6、国际化管理
和页面高耦合，负责加载对应的国际化资源，并进行切换管理；
7、页面组件
可能有子页面和复用的组件，按照正常方式引用即可。
8、样式文件
可以独立写为.css文件，但因为我的公共样式文件比较少，因此我还是将其放在一个.vue文件中，并在App.vue里来引用
8、页面组件起名
基础页面，如登录和未登录页面，公共组件（并且是header和footer这种），以base-开头；
弹窗统一以box-为开头；
可复用的组件以extend-开头；
引入的外部组件以import-开头；
普通页面组件以page-开头（这些页面往往是一个独立的页面，并且挂靠在登录或未登录页面下）；
注册弹窗因为逻辑比较复杂，并且同类较多，因此以register-为开头；
通过以文件名来划分，不同的页面组件之间的区分可以说是一目了然，同时也方便管理；
3、还没有谈到的内容
想了想，目前还没有谈到的内容有以下几点：
其他：
听说写原创内容可以获得打赏，我想试试~
觉得我文章不错的，欢迎支付宝打赏一发~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/221459.html原文链接：https://javaforall.net
