对于传统前端项目文件结构的思考

最近我们公司前端整体向 Vue 迁移,Vue 最大的开发便利就是组件。
Vue 的组件可以在一个 .vue 文件中同时写 css html js
这与传统的 “样式分离” 有偏差。

传统项目结构

传统项目中一般都是 css html css 分别独立成单独文件夹。
这是为了 web 刚兴起的时候 csshtmljs 能够分离,由不同的人负责。
但是现在随着对前端体验要求的提高,cssjs 的相关性越来越高。一些复杂效果必须由 cssjs 同时完成。

下面是我们原来某个项目的前端结构。
根目录下分为 css html img js,四个文件夹,每个文件夹内部又分为不同的模块。
项目初期这样安排还没什么问题。
但是后期,项目越来越大,有时候需要在几个页面同时添加一样的功能,不得不复制同样的代码,在 css html js 文件夹中来回切换。
为什么不把 css html js 放在一个文件夹呢?
-w120

vue 项目结构

我们现在用的主要是 vue
项目结构如下。
-w140

这里基础组件全都放在 components 文件夹下面。
这是传统项目没有的一层。

每个页面,都在 views 中进行分类,最后进行组合。
这一层,就相当于传统项目中 cssjs 这一级文件夹。

对比

对比上面两种文件结构,可以发现 vue 所采用的结构更加适合模块的开发,在调试一个 view 的时候,不需要来回切换。

所以传统的项目结构,我们可以这样优化。
-w200