資訊專欄INFORMATION COLUMN
摘要：的代碼如下狀態管理使用的是官方推薦的項目結構里面是各模塊的文件。結構如下模塊頁面頁面組件的靜態資源這次對項目結構重新整理后，開發的體驗好了很多，也避免了多人修改同一份文件，經常覆蓋的問題，也大大提高了可維護性。
上個項目第一次用到vue+webpack，也是我第一次嘗試自動化、模塊化的開發方式，總的來說就是結構太爛，開發體驗差，效率低，難維護。細數的罪狀有如下幾條
沒有servies層，全部ajax接口都和邏輯混合在一起寫
只有公眾組件和頁面，頁面沒有組件化，造成每個頁面的.vue文件相當長
沒有將路由按模塊劃分，所有路由都寫在一個文件中，多人合作代碼經常被覆蓋
所有的靜態資源都放在一起，沒有按模塊區別，靜態資源管理很不方便
針對上面的問題，這次做項目的時候，重新對項目結構進行了調整，調整后的項目結構如下：
上面的截圖中，build是編譯后的文件，node_modules是依賴包，webpack.config.js是webpack的配置，index.html是入口模板，這些不是本文關注的重點，本文主要是討論src里面的結構。
公眾靜態資料目錄assertsassets的結構如下：
├── assets
├── css # 樣式
├── fonts # 字體
└── images # 圖片
主要用來放置樣式、字體文件和圖片等公共靜態資源。其實上一個項目中也有這個目錄，但是將整個項目的靜態資源都往里面放了，維護起來不方便。這個項目中，asserts只存放公共的靜態資源。
第三方插件目錄static在項目中，經常會用到一些沒有npm包的第三方插件。例如這次我們是做移動端的產品，用了淘寶自適應方案，我們會將flexible.js等所有插件都放在static中管理。
公共方法util可能會在多個地方調用到的公共方法，按照不同的功能歸類成多個js文件，放在util中
指令directivesdirectives文件夾中包含modules文件夾，和一個統一的入口index.js，modules里是不同指令的具體邏輯，index是所有指令的入口，方便在app.js中注冊。index.js的代碼如下：
import directive1 from ".modules/directive1";
import directive2 from ".modules/directive2";
export default {
...directive1,
...directive2
}
狀態管理vuex
vuex使用的是官方推薦的項目結構,modules里面是各模塊的js文件。
公共組件componentscomponents里放置的是公共組件，每個組件有自己獨立的文件夾，里面包含.vue文件和組件的images等靜態資源文件夾。這樣的好處是，可以在組件內部管理自己的html結構、樣式和邏輯和靜態資源。
components的結構如下：
├── components
├── com1 # 組件1
├── images # 靜態資源：圖片
└── com1.vue # template/style/script
├── com2 # 組件1
├── images # 靜態資源：圖片
└── com2.vue # template/style/script
路由routes
路由中包含map文件夾和入口文件index.js，map文件夾中根據模塊來劃分，每個模塊多帶帶一個路由配置文件，再在index.js中匯總，app.js中引入入口文件index.js就可以實現路由的注冊。index.js中的代碼大概如下：
// 加載不同的模塊
import order from "./order"; // 訂單
import log from "./log";// 登陸
export default {
...order,
...log,
};
服務層services
在上一個項目中，沒有路由層這個概念，都是在和頁面的方法中直接調用后端提供的api，這個api很分散，不方便管理，后來看到vue-demo對services的劃分，覺得很好，就搬了過來。
services里面有個lib的文件夾，里面存放的是各種ajax類庫，如jquery的ajax、vueResource等，并且對各種類庫進行了統一接口的封裝和錯誤處理，暴露給外面的是統一的ajax接口，這樣很方便不同項目，不同類庫之間的切換。services下面根據模塊，將所有API封裝成方法，返回的是promise對象，在要用的地方直接調用方法就可以了。
頁面viewsviews按模塊劃分，模塊下面有頁面，頁面里面有靜態資源和組件。上一個項目中，頁面沒有拆分組件，頁面和組件的靜態資源也都放到了asserts文件夾中。這次都放到了自身的對應文件夾下，管理起來方便了很多。結構如下:
├── views
├── module1 # 模塊1
│ ├── page1 # 頁面
│ ├── components # 頁面
│ ├── com1
│ ├── images // 組件1的靜態資源
│ └── com1.vue # template/style/script
└── page1.vue # template/style/script
這次對項目結構重新整理后，開發的體驗好了很多，也避免了多人修改同一份文件，經常覆蓋的問題，也大大提高了可維護性。搞項目結構可能不需要很高深的技術，但是一個好的結構真的是項目邁向成功的一大步。
文章也會同步發布到公眾號上，歡迎關注，歡迎提意見：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80572.html
摘要：后來經過排查你會發現是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創建腳手架的原因此文的受眾是想要進階中級的初級前端人員。 最近在知乎看到一個問題，原問題如下： 很奇怪，為什么現在能找到自己手動創建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...
摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...
摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...
摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...
摘要：放置在目錄下或通過絕對路徑被引用。對于相關來說，我們推薦使用而不是直接鏈式指定。在不更改配置文件的情況下，前端頁面迭代發布，不需要重啟服務。 作者：gauseen 0. 關于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，易用、靈活、高效。 生態系統 項目 介紹 awesome-vue Vue.js 相關很棒的...
閱讀 578·2023-04-25 21:29
閱讀 1104·2023-04-25 21:27
閱讀 1044·2021-11-25 09:43
閱讀 1077·2021-09-29 09:43
閱讀 3614·2021-09-03 10:30
閱讀 2854·2019-08-29 15:26
閱讀 2803·2019-08-29 12:52
閱讀 1741·2019-08-29 11:10
