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