成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用vue+webpack搭建的前端項目結(jié)構(gòu)

qiangdada / 1555人閱讀

摘要：的代碼如下狀態(tài)管理使用的是官方推薦的項目結(jié)構(gòu)里面是各模塊的文件。結(jié)構(gòu)如下模塊頁面頁面組件的靜態(tài)資源這次對項目結(jié)構(gòu)重新整理后，開發(fā)的體驗好了很多，也避免了多人修改同一份文件，經(jīng)常覆蓋的問題，也大大提高了可維護(hù)性。

上個項目第一次用到vue+webpack，也是我第一次嘗試自動化、模塊化的開發(fā)方式，總的來說就是結(jié)構(gòu)太爛，開發(fā)體驗差，效率低，難維護(hù)。細(xì)數(shù)的罪狀有如下幾條

沒有servies層，全部ajax接口都和邏輯混合在一起寫

只有公眾組件和頁面，頁面沒有組件化，造成每個頁面的.vue文件相當(dāng)長

沒有將路由按模塊劃分，所有路由都寫在一個文件中，多人合作代碼經(jīng)常被覆蓋

所有的靜態(tài)資源都放在一起，沒有按模塊區(qū)別，靜態(tài)資源管理很不方便

針對上面的問題，這次做項目的時候，重新對項目結(jié)構(gòu)進(jìn)行了調(diào)整，調(diào)整后的項目結(jié)構(gòu)如下：


上面的截圖中，build是編譯后的文件，node_modules是依賴包，webpack.config.js是webpack的配置，index.html是入口模板，這些不是本文關(guān)注的重點，本文主要是討論src里面的結(jié)構(gòu)。

公眾靜態(tài)資料目錄asserts

assets的結(jié)構(gòu)如下：

├── assets
    ├── css  # 樣式
    ├── fonts  # 字體    
    └── images # 圖片

主要用來放置樣式、字體文件和圖片等公共靜態(tài)資源。其實上一個項目中也有這個目錄，但是將整個項目的靜態(tài)資源都往里面放了，維護(hù)起來不方便。這個項目中，asserts只存放公共的靜態(tài)資源。

第三方插件目錄static

在項目中，經(jīng)常會用到一些沒有npm包的第三方插件。例如這次我們是做移動端的產(chǎn)品，用了淘寶自適應(yīng)方案，我們會將flexible.js等所有插件都放在static中管理。

公共方法util

可能會在多個地方調(diào)用到的公共方法，按照不同的功能歸類成多個js文件，放在util中

指令directives

directives文件夾中包含modules文件夾，和一個統(tǒng)一的入口index.js，modules里是不同指令的具體邏輯，index是所有指令的入口，方便在app.js中注冊。index.js的代碼如下：

import directive1 from ".modules/directive1";
import directive2 from ".modules/directive2";
export default {
    ...directive1,
    ...directive2
}
狀態(tài)管理vuex

vuex使用的是官方推薦的項目結(jié)構(gòu),modules里面是各模塊的js文件。

公共組件components

components里放置的是公共組件，每個組件有自己獨(dú)立的文件夾，里面包含.vue文件和組件的images等靜態(tài)資源文件夾。這樣的好處是，可以在組件內(nèi)部管理自己的html結(jié)構(gòu)、樣式和邏輯和靜態(tài)資源。
components的結(jié)構(gòu)如下：

├── components
    ├── com1  # 組件1
        ├── images   # 靜態(tài)資源：圖片    
        └── com1.vue # template/style/script
    ├── com2  # 組件1
        ├── images   # 靜態(tài)資源：圖片    
        └── com2.vue # template/style/script
路由routes

路由中包含map文件夾和入口文件index.js，map文件夾中根據(jù)模塊來劃分，每個模塊多帶帶一個路由配置文件，再在index.js中匯總，app.js中引入入口文件index.js就可以實現(xiàn)路由的注冊。index.js中的代碼大概如下：

// 加載不同的模塊
import order from "./order"; // 訂單
import log from "./log";// 登陸
export default {
    ...order,
    ...log,
};
服務(wù)層services

在上一個項目中，沒有路由層這個概念，都是在和頁面的方法中直接調(diào)用后端提供的api，這個api很分散，不方便管理，后來看到vue-demo對services的劃分，覺得很好，就搬了過來。

services里面有個lib的文件夾，里面存放的是各種ajax類庫，如jquery的ajax、vueResource等，并且對各種類庫進(jìn)行了統(tǒng)一接口的封裝和錯誤處理，暴露給外面的是統(tǒng)一的ajax接口，這樣很方便不同項目，不同類庫之間的切換。services下面根據(jù)模塊，將所有API封裝成方法，返回的是promise對象，在要用的地方直接調(diào)用方法就可以了。

頁面views

views按模塊劃分，模塊下面有頁面，頁面里面有靜態(tài)資源和組件。上一個項目中，頁面沒有拆分組件，頁面和組件的靜態(tài)資源也都放到了asserts文件夾中。這次都放到了自身的對應(yīng)文件夾下，管理起來方便了很多。結(jié)構(gòu)如下:

├── views
    ├──  module1  # 模塊1
    │     ├── page1   # 頁面   
    │          ├── components   # 頁面 
               │   ├── com1
               │       ├── images // 組件1的靜態(tài)資源
               │       └── com1.vue # template/style/script
               └── page1.vue # template/style/script

這次對項目結(jié)構(gòu)重新整理后，開發(fā)的體驗好了很多，也避免了多人修改同一份文件，經(jīng)常覆蓋的問題，也大大提高了可維護(hù)性。搞項目結(jié)構(gòu)可能不需要很高深的技術(shù)，但是一個好的結(jié)構(gòu)真的是項目邁向成功的一大步。

文章也會同步發(fā)布到公眾號上，歡迎關(guān)注，歡迎提意見：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80572.html

相關(guān)文章

  • 為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

    摘要：后來經(jīng)過排查你會發(fā)現(xiàn)是由于目前還沒有版本?？梢允褂迷摲绞浇鉀Q。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級的初級前端人員。 最近在知乎看到一個問題，原問題如下： 很奇怪，為什么現(xiàn)在能找到自己手動創(chuàng)建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現(xiàn)在一般的做...

    trigkit4 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    call_me_R 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    wzyplus 評論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目

    摘要：從到再到搭建編寫構(gòu)建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后，需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種：選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    aristark 評論0 收藏0

  • Vue-項目從本地搭建到線上部署（wǒ shì biaō tí dǎng）

    摘要：放置在目錄下或通過絕對路徑被引用。對于相關(guān)來說，我們推薦使用而不是直接鏈?zhǔn)街付?。在不更改配置文件的情況下，前端頁面迭代發(fā)布，不需要重啟服務(wù)。 作者：gauseen 0. 關(guān)于 Vuejs 簡介：Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，易用、靈活、高效。 生態(tài)系統(tǒng) 項目 介紹 awesome-vue Vue.js 相關(guān)很棒的...

    Arno 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<