为什么需要前端专属项目结构说到这里，说到目录结构，想必很多程序员都会想到按功能分类！下面提到的目录结构是单页目录结构。以下面为例【按功能】├──src│├──view//页面│├──utils//JS工具库│├──api//api接口│├──style//style│├──config//配置│├──model//model层其实就是一个redux或者vux文件│├──component//component│├──App.vue//入口页面│├──main.js//入口加载组件初始化等│├──assets//主题字体等静态资源├──index.html//HTML模板└──package.json其实目录结构完整没问题，分区按功能划分的结构很清晰，api放在api里，静态资源放在assets里等等。但是前端的目录结构，笔者认为页面和组件应该进一步细分。比如当项目比较大的时候，api目录下会有很多API。大体效果如下：这张图是笔者某项目的api结构图。虽然作者遵循了一定的约定，即api文件名==视图中对应的页面组名。但是在真正进行维护时，有时会出现两种常见的情况。1.删??除页面：你会删除pages/carts【购物车页面】中的某个页面，但是问题是你不确定api/carts【购物车api】的哪些API没有用到，其实有些它们没有被使用IDE会提示。2、复制移动端组件或页面：比如你要复制组件，因为划分的粒度不够细，你又要面临组件对应什么api和静态资源，只能靠移动和复制时的猜测==其实会出现上面的问题，就是这种按功能划分的方式不适合前端。仔细想想前端页面的删除逻辑就会知道，我们平时删除或者丢弃的单位是页面或者组件，所以笔者的前端目录应该继续细分页面和组件。看看关大师还记得MVC框架吗，一个从后端思维衍生出来的前端框架。为什么逐渐被MVVM框架取代？原因是MVC框架不适合前端频繁需要数据和页面组件联动的场景，因为前端不仅仅是管理数据和渲染那么简单，还要处理各种数据变化.相应的页面组件发生变化，MVVM框架正好可以解决这个痛点。因此，后端按功能划分的目录结构虽然好，但对于前端来说并不是最合适的方案。目标是按功能划分目录，再按页面和组件再细分目录，这样删除一个组件时就不会牵扯到其他组件和页面！页面删除后，该资源仍常驻项目，成为钉钉账号。方案示例结构├──src│├──view//页面│├──carts//购物车页面│├──component//本页面专用组件│├──model.js//数据层本页面【redux和vuex文件的细分】│├──index.js//本页面的布局文件│├──service.js//本页面使用的api│├──index.scss//使用的scss本页│├──utils//JS工具库│├──api//共享api接口[未删除]│├───style//共享样式[未删除]│├──config//配置│├──model//共享模型层其实就是一个redux或者vux文件[从未删除]│├──component//共享组件│├──map//Map组件│├──model.js//这个的数据层component[redux和vuex文件的细分]│├──index.js//本组件布局文件│├──service.js//本组件使用的Api│├──index.scss//本组件使用的Scsscomponent│├──App.vue//入口页面│├──main.js//入口加载组件初始化等│├──assets//主题字体等静态资源[永不删除]├──index.html//html模板└──package.json共享级别分为三层，pages级别和组件级别的通用级别很容易理解，这是项目经常共享的资源。基本上一旦设置，为了项目的稳定，页面层级永远不会被删除│├──view//页面│├──carts//购物车页面│├──component//本页面专用组件│├──model.js//本页面的数据层【redux和vuex文件的细分】│├──index.js//本页面的布局文件│├──service.js//本页面使用的apipage│├──index.scss//这个页面使用的scss可以看出，围绕这个页面的各个功能的文件是重新构建的，而且都是这个页面专用的，连组件都是页面专用的。组件层│├──component//普通组件│├──map//地图组件│├──assets//该组件的专用图片或图标│├──model.js//该组件的数据层[redux以及vuex文件的细分]│├──index.js//本组件的布局文件│├──service.js//本组件使用的api│├──index.scss//本组件使用的scsscomponent可以看出，围绕这个组件的各个功能的文件都是重新构建的，而且都是专门为这个组件服务的。综上所述，在按功能划分目录的基础上，又细分为页面目录和组件目录。这样，组件可以随意删除和修改，而且副作用更可控！！再也不怕给钉钉用户留下资源了！
