上一章我們講到了編碼規范和關於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
存放的是開發中自行編寫的工具類。
目前我們開發的后台管理系統暫定現在的目錄，后續如果應用到需求變化，肯定是可以自行添加的，只是需要記住，一定要做到高內聚、低耦合，遵循面向對象的開發方法，只有什么是高內聚、面向對象這些，相信讀書的時候老師應該都教過了，我就不重復了。
好了，這章內容就講到這里吧，下一章我們將學習如何封裝接口請求方法。