为什么需要前端专属的项目结构

以下面这种为例[按职能划分]

├──src

    ├──view                    //页面

    ├──utils                  //JS工具库

    ├──api                    //api接口

    ├──style                  //style

    ├──config                  //配置

    ├──model                  //model层其实是vuex文件

    ├──component              //组件

    ├── App.vue                // 入口页面

    ├── main.js                // 入口 加载组件 初始化等

    ├── assets                // 主题 字体等静态资源

├── index.html                // html模板

└── package.json

这是大家都认同的 项目目录。

但是前端目录结构 认为应该对于页面和组件继续细分。

下面看一下我的项目目录

├──src│

      ├──view                    //页面

              ├──main           //我的页面

              ├──component //该页面专用组件

              ├──model.js      //该页面的数据层[vuex文件的细分] 

              ├──index.js       //该页面的布局文件    

              ├──service.js    //该页面用到的api 

              ├──index.scss  //该页面用到的scss 

      ├──utils              //JS工具库

      ├──api                //共用api接口【永不删除】

      ├──style             //共用style【永不删除】

      ├──config           //配置

      ├──model          //共用model层其实是vux文件【永不删除】

      ├──component  //共用组件

            ├──alert       //自定义弹窗

            ├──model.js //该组件的数据层[vuex文件的细分] 

            ├──service.js//该组件用到的api 

            ├──index.scss//该组件用到的scss 

       ├── App.vue   // 入口页面

       ├── main.js    // 入口 加载组件 初始化等

       ├── assets     // 主题 字体等静态资源【永不删除】

├── index.html      // html模板

└── package.json

这里分为三个级别共用级别,页面级别,组件级别

解决了什么问题

1.删除页面：你将删除pages/main[我的页面]里的某个模块,但是你不确定]哪些api才是不用的。

2.复制移动组件或页面: 比如你想复制组件,由于划分颗粒度不够细,你又一次面临该组件对应什么api和什么静态资源,这么移动复制时只能靠猜了

目的

删除钉子户：在按职能划分目录的基础上,再细分到按页面和组件划分目录，做到删除组件时不会牵连到其他组件和页面！不会出现页面删除后，资源还常驻于项目中成为钉子户.