关于项目目录结构

Question

公司的项目比较杂乱，都是常规的css js html 各放在一个地方，最近看了react基于组件的就近依赖，想把公司的项目改成如下这种方式，不知道会不会有什么未知的问题，有人做过类似的吗？

common
    js
        sss.js
    css
        xxx.css
    images
        xxx.png
page
    home
        index.html
        index.css
        index.js
        /images/sss.png
    about
        index.html
        index.css
        index.js
        /images/ccc.png
    login
        index.html
        index.css
        index.js
        /images/ddd.png
        

贴一个react的结构，简直不要太爽

Answer 1

react用过一次，感觉没有Vue组件化更彻底。Vue里面可以把html,css,js都放到一个.vue文件里，这样就只有图片资源是在外面了，如果用vue，你的目录可以简化成这样：
common

image/xxx.png

page

home
    home.vue
    images/xxx.png

....
结构大概就长这样：

vue文件大概长这样：

Answer 2

react 的结构一般如下：

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
│── src
│   │── assets
│   │   └── logo.png
│   │── i18n
│   │   └── zh_CN.js
│   │── routers
│   │   └── index.js
│   │── utils
│   │   └── request.js
│   │── components
│   │   └── yourcomponent
│   │       └── index.less
│   │       └── Index.js
│   │── sevices
│   │   └── fetch.js
│   └── App.css
│   └── App.js
│   └── App.test.js
│   └── index.css
│   └── index.js
│   └── logo.svg
│   └── registerServiceWorker.js
└── tests

我做了一个基于Dva的initial项目，你可以参考一下。这个项目几乎包含了一个web项目中所有的使用配置
DvaInitial

Answer 3

项目结构划分跟用什么框架毫无关系

我个人是推崇按功能划分html,css,image的，就是你所说的第一种：

common
    js
        sss.js
    css
        xxx.css
    images
        xxx.png
page
    home
        index.html
        index.css
        index.js
        /images/sss.png
    about
        index.html
        index.css
        index.js
        /images/ccc.png
    login
        index.html
        index.css
        index.js
        /images/ddd.png

跟你的区别是，我可能会把功能相似的页面放在同1个文件夹，因为当你项目大了，按你那种可能文件夹会太多。比如：

page
    order
        order.html
        order.css
        order.js
        order-confirm.html
        order-confirm.js

虽然vue可以把style也写在单个文件中，但是当你js逻辑复杂了或者样式多了，肯定还是得拿出去，1个file最多300行，不然阅读性要差很多。

最重要的是，目录划分是为了阅读、分治，没有什么完美的方案，根据需求和团队选择一个最合适的就好。

Answer 4

你可以github找一个vue或者react的开源项目，尤其是关注度比较高的项目看一看它们的目录结构就行了，如果是你们公司的团队人员比较多，你们就商量个方案，如果是人说比较少，你就找一个大点的项目参考一下，然后，根据自己的使用习惯就行了。