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