对于传统前端项目文件结构的思考
最近我们公司前端整体向 Vue
迁移,Vue
最大的开发便利就是组件。
Vue
的组件可以在一个 .vue
文件中同时写 css
html
js
。
这与传统的 “样式分离” 有偏差。
传统项目结构
传统项目中一般都是 css
html
css
分别独立成单独文件夹。
这是为了 web
刚兴起的时候 css
和 html
、js
能够分离,由不同的人负责。
但是现在随着对前端体验要求的提高,css
和 js
的相关性越来越高。一些复杂效果必须由 css
和 js
同时完成。
下面是我们原来某个项目的前端结构。
根目录下分为 css
html
img
js
,四个文件夹,每个文件夹内部又分为不同的模块。
项目初期这样安排还没什么问题。
但是后期,项目越来越大,有时候需要在几个页面同时添加一样的功能,不得不复制同样的代码,在 css
html
js
文件夹中来回切换。
为什么不把 css
html
js
放在一个文件夹呢?
vue 项目结构
我们现在用的主要是 vue
。
项目结构如下。
这里基础组件全都放在 components
文件夹下面。
这是传统项目没有的一层。
每个页面,都在 views
中进行分类,最后进行组合。
这一层,就相当于传统项目中 css
或 js
这一级文件夹。
对比
对比上面两种文件结构,可以发现 vue
所采用的结构更加适合模块的开发,在调试一个 view
的时候,不需要来回切换。
所以传统的项目结构,我们可以这样优化。