上一章我們講到了編碼規範和關於Vue的配置檔案，繼上一章的內容，我們繼續完善專案架構-src目錄。

系統程式碼的編寫都是src下進行，所以這個的目錄也一定是要清晰，這也是代表了整個專案開發流程和分工的清晰。

src目錄結構如下：

│  App.vue
│  main.js
│  
├─api
│      login-api.js
│      
├─assets
│  │  logo.png
│  │  
│  ├─css
│  ├─font
│  └─images
├─components
│  │  HelloWorld.vue
│  │  
│  └─sass-table
│          sass-table.vue
│          
├─config
│      config.index.js
│      
├─libs
│      qq-map.min.js
│      
├─request
│      index.js
│      
├─router
│      index.js
│      routers.js
│      
├─store
│  │  index.js
│  │  
│  └─modules
│          common.js
│          user.js
│          
├─utils
│      index.js
│      
└─views
    └─login
        └─home
                index.vue
 

一、建立api目錄

api顧名思義，介面嘛，那肯定就是用於存放請求伺服器端介面的方法，無論是在小型專案還是大型企業級專案，都應該把所有的介面請求統一起來，方便管理和維護。大大減少後期維護費用。介面少了怎麼寫都不影響，但是實際開發中介面太多，像你的那種寫法就得一個檔案一個檔案的改。麻煩。單頁面寫介面的話，要是你介面變動了，你還得一個一個頁面去找，或者全域性搜尋介面找，你想一哈，光是找介面就得花大半天時間，得不償失。具體實現看後續的篇章。

二、assets下子目錄

assets目錄用於存放的靜態資源，比如全域性的CSS樣式檔案、靜態資源圖片、字型檔案等。有的同學會疑惑，靜態檔案存放目錄不是static嗎？

其實assets目錄和根目錄下的static目錄都是存放靜態檔案的，那什麼樣的靜態檔案應該放在assets目錄，什麼樣的靜態檔案應該放在static目錄下呢？

assets裡的檔案編譯過程中會被webpack處理理解為模組依賴，只支援相對路徑的形式（也就是可以使用~@/assets/）。assets放可能會變動的檔案。
static裡的檔案不會被webpack解析，會直接被複制到最終的打包(預設是dist/static)下，必須使用絕對路徑引用這些檔案。static放不會變動的檔案。

三、components目錄

顧名思義-元件目錄。主要用於存放各式各樣的全域性元件，比如後臺管理系統常用到的表格、表單等。引用到其他模組可以通過"@/components/sass-table/sass-table.vue"的方式。

四、config目錄

config即配置檔案，同樣是為了方便統一管理。比如常用的伺服器域名、地圖key、城市靜態資料等。

/* eslint-disable no-undef */
const CONFIG = {
    //開發環境
    development: {
        url: 'https://getman.cn/mock',
    },
    //生產環境
    production: {
        url: 'https://getman.cn/mock'
    }
}

export default CONFIG[process.env.NODE_ENV]

一般的話，都有配套有開發環境和生產環境，在專案執行或者打包的過程中，通過process.env.NODE_ENV返回的命令來判斷用哪個環境的資料。

五、router

路由配置檔案存放目錄。

六、store

存放的是全域性狀態內容。

七、views

存放的是各模組頁面檔案，路由配置的也基本從這裡匯出的模組。

八、libs

存放的是外部庫檔案，主要是一些不支援npm安裝的庫。如：騰訊的地圖外掛。

九、request

存放的是請求介面的封裝方法，如何具體實現後面會講到。

十、utils

存放的是開發中自行編寫的工具類。

目前我們開發的後臺管理系統暫定現在的目錄，後續如果應用到需求變化，肯定是可以自行新增的，只是需要記住，一定要做到高內聚、低耦合，遵循面向物件的開發方法，只有什麼是高內聚、面向物件這些，相信讀書的時候老師應該都教過了，我就不重複了。

好了，這章內容就講到這裡吧，下一章我們將學習如何封裝介面請求方法。