对于传统前端项目文件结构的思考
最近我们公司前端整体向 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 的时候，不需要来回切换。
所以传统的项目结构，我们可以这样优化。
