Vue实战—从目录结构谈可扩展项目架构设计

不少人都会用项目脚手架，也会跑hello world，而后再写写简单的todolist。可是再往下深刻就难了。好比不少教程和老师都会说，你们要多问一个为何。其实我想说多问你妹啊。我都不知道问为何怎么多问？！好比若是我不说，不多有人会去思考和研究为何vue的项目目录要如此设计，这么作好处。

先不说说别的，咱们先看看vue的目录，一图抵万言，不墨迹。

好的项目代码结构会大大提高项目的维护性和可扩展性。同时咱们能够提供友好的说明，以便其余成员理解项目和快速定位。

其实有一点比较重要，就是公共组件、工具等同类的文件，放置一块儿维护会比较好。并且还有个小 技巧，咱们能够在搭建项目的时候，在 README.md 里面描述下该项目下的代码和文件结构。

多说无益，我这里直接给你们一个示意图，你们能够按照我给的这个项目结构组织项目。

这里我强调两点，

1.第一点注意每个组件的大小写。

2.注意每一个组件所用到的图片的位置。

不少人写组件的时候被命名或者大小写或者分隔符弄的晕头转向，这里我就说说代码规范。

代码规范实际上是团队合做中最重要的地方，使用相同的代码规范，会大大减小咱们接手别人代码时候卧槽的次数。

好的写码习惯很重要，命名习惯、适当的注释，会对代码的可读性有很大的提高。可是习惯是每一个人都不同，因此在此之上，咱们须要有这样统一的代码规范。

一些工具能够很好地协助咱们，像 Eslint、Tslint等，加上代码的打包工具协助，能够把一些规范强行标准化，来获取代码的统一性。还有像 prettier 这样的工具，能自动在打包的时候帮咱们进行代码规范化。

除了这些简单的什么驼峰啊、全等啊、单引双引等基础的规范，其实更重要的是流程规范。最基础的是改动公共库或是公共组件的时候，须要进行 code review。一般咱们使用 Git 维护代码，这样在合并或是版本控制上有更好的体验。

但其实最重要的仍是沟通，沟通是一个团队里必不可少同时很容易出问题的地方，要学会沟通方式、表达方式。

不少人以为命名了或者项目目录了这些不重要，非得把复杂的功能实现出来才牛逼，这才是技术大牛或者脑壳上闪耀着光环的架构师的范儿。其实，项目的维护全部程序员都须要，并且要想成为一个架构师，你写的代码别人是否能看得，用着舒服，架构是否健壮可扩展，这些是基本功。你连文件目录都设计很差，我拿什么相信你能设计出来可扩展的程序？