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
前端開發的文件非常零碎而且會隨着項目增多，組件化程度的增加使得文件越來越多，如果從一開始就沒有約定目錄與文件的使用與命名規范，項目越往后發展，要找到某個文件就越困難，各種古怪的名字也會隨之顯現，所以從項目一開始就確立工程的命名規范與使用約定是很有必要的。