vue項目結構

前言

我在 搭建vue項目環境 簡單說明了項目初始化完成後的目錄結構。
但在實際項目中，src目錄下的結構須要跟隨項目作一些小小的調整。

目錄結構

├── src                          項目源碼目錄
│   ├── api                      全部請求
│   ├── assets                 靜態資源
│   ├── components        全局公用組件
│   ├── filtres                   全局 filter
│   ├── router                  路由
│   ├── store                   全局 store管理
│   ├── styles                  全局樣式
│   ├── utils                    全局公用方法
│   ├── views                  views
│   ├── App.vue              入口頁面
│   ├── main.js                入口js文件

api 和 views

上圖是我在項目api文件下截的圖，只是衆多模塊中的一部分。隨着項目的逐漸完善，模塊可能會愈來愈多。
所以，根據業務模塊來劃分views，將views和api一一對應，更方便維護。

components

我在components裏面放置的是全局公用的組件，如收費組件，上傳組件等等。頁面級的組件放在各自views文件下。以下圖所示：

store

官網 Vuex 是什麼？ 詳細說明了Vuex的使用場景等。
使用場景說明：

1. 多組件依賴於同一個數據：例若有柱狀圖和條形圖兩個組件都是展現的同一數據；
2. 公用依賴的數據：一個組件的行爲→改變數據→影響另外一個組件的視圖；
   若是有個別的須要從父組件傳到子組件的數據或屬性，能夠使用Vue的props傳遞；使用Vue.$emit方法能夠從子組件傳值到父組件。
   我的建議不要爲了使用Vuex而使用Vuex。

關於目錄結構個說明，暫時只說到這裏吧，若是有額外須要注意的地方，我會再來補充的。