这是微博秀地方
KUYH

webpack工程目录结构与文件组织规范

webpack-simple模板

以下为webpack-simple模板构建的项目的工程目录结构:

├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js

webpack-simple只配置了Babel和Vue的编译器,其他的一无所有。
这个模板值得一提的就是src目录,所有的Vue代码源程序都放置在这个目录中,五个模板构建出来的这个src目录都是一样的,只是在webpack模板中多了components目录用于存放公用组件。这个目录的结构与文件的组织应在开发前就进行约定,对于多人协作式项目,目录的使用与文件的命名都显得尤为重要。

具体约定如下:
(1)公共组件、指令、过滤器(多于三个文件以上的引用)将分别存放于src目录下的

● components
● directives
● filters

(2)以使用场景命名Vue的页面文件。
(3)当页面文件具有私有组件、指令和过滤器时,则建立一个与页面同名的目录,页面文件更名为index.vue,将页面与相关的依赖文件放在一起。
(4)目录由全小写的名词、动名词或分词命名,由两个以上的词组成,以“-”进行分隔。
(5)Vue文件统一以大驼峰命名法命名,仅入口文件index.vue采用小写。
(6)测试文件一律以测试目标文件名.spec.js命名。
(7)资源文件一律以小写字符命名,由两个以上的词组成,以“-”进行分隔。

例如:

src
├── README.md
├── assets // 全局资源目录
│ ├── images // 图片
│ ├── less // less 样式表
│ ├── css // CSS 样式表
│ └── fonts // 自定义字体文件
├── components // 公共组件目录
│ ├── ImageInput.vue
│ ├── Slider.vue
│ └── ...
├── directives.js // 公共指令
├── filters.js // 公共过滤器
├── login // 场景:登录
│ ├── index.vue // 入口文件
│ ├── LoginForm.vue // 登录场景私有表单组件
│ └── SocialLogin.vue
├── cart
│ ├── index.vue
│ ├── ItemList.vue
│ └── CheckoutForm.vue
├── Discover.vue // 场景入口文件
├── App.vue // 默认程序入口
└── main.js

前端开发的文件非常零碎而且会随着项目增多,组件化程度的增加使得文件越来越多,如果从一开始就没有约定目录与文件的使用与命名规范,项目越往后发展,要找到某个文件就越困难,各种古怪的名字也会随之显现,所以从项目一开始就确立工程的命名规范与使用约定是很有必要的。

码字很辛苦,转载请注明来自KUYH《webpack工程目录结构与文件组织规范》

评论