Vue實(shí)戰(zhàn)—如何細(xì)化Vue項(xiàng)目目錄設(shè)計(jì)（2）

thekingisalwaysluc 發(fā)布于2019-08-23 17:05 / 565人閱讀

摘要：接下來(lái)我們進(jìn)一步細(xì)化項(xiàng)目的目錄設(shè)計(jì)在開發(fā)項(xiàng)目的時(shí)候前端避免不了請(qǐng)求后端接口。項(xiàng)目的核心文件目錄中的文件會(huì)被處理解析為模塊依賴，更換頻率不高的菜單背景圖片，按鈕等可放置在內(nèi)?？偨Y(jié)項(xiàng)目目錄設(shè)計(jì)可以根據(jù)實(shí)際具體需求變動(dòng)，但是我們結(jié)構(gòu)化去思考。

通過(guò)上一篇文章我們了解了Vue項(xiàng)目核心文件（src）以及在內(nèi)的各個(gè)文件的職能。

接下來(lái)我們進(jìn)一步細(xì)化Vue項(xiàng)目的目錄設(shè)計(jì)：

在開發(fā)項(xiàng)目的時(shí)候前端避免不了請(qǐng)求后端接口。為了同時(shí)開發(fā)，我們知道的通常會(huì)用到mock.js。data文件夾內(nèi)新建一些json格式的數(shù)據(jù)，這樣更省時(shí)間，更方便；

項(xiàng)目中我們會(huì)對(duì)靜態(tài)資源統(tǒng)一管理；

項(xiàng)目中需要有引入的字體，自定義，等項(xiàng)目插件，工具；

組件的設(shè)計(jì)考慮到以后可能會(huì)引用圖片，拓展的因素，所以我們最后將組件用文件夾包裹一層。

綜合以上，我們將目錄設(shè)計(jì)為：

如圖所示，

data：用來(lái)模擬我們請(qǐng)求的數(shù)據(jù)內(nèi)部主要存放json數(shù)據(jù)格式的數(shù)據(jù)，比如評(píng)價(jià)，商品等。

resource：統(tǒng)一管理圖片、文檔、圖標(biāo)這三種資源。

src：項(xiàng)目的核心文件

assets：assets目錄中的文件會(huì)被webpack處理解析為模塊依賴，更換頻率不高的菜單背景圖片，按鈕icon等可放置在內(nèi)。

common：公共工具

    fonts：用來(lái)存放字體。

    js：用來(lái)存放我們使用js插件。

    style：存放樣式，less，sass等。

components：Vue組件。

    header：注意這里是一個(gè)文件夾。

        Hearder.Vue： 頭部組件。

router：路由配置文件夾。

app.Vue 根組件。

總結(jié)

項(xiàng)目目錄設(shè)計(jì)可以根據(jù)實(shí)際具體需求變動(dòng)，但是我們結(jié)構(gòu)化去思考。那么我們?cè)O(shè)計(jì)的目錄肯定會(huì)方便易用，利于維護(hù)拓展的。下一篇我們將把組件按需拆分，還請(qǐng)持續(xù)關(guān)注。

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

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

相關(guān)文章

Vue實(shí)戰(zhàn)-商品展示切圖（7）

摘要：本篇我們將繼續(xù)推進(jìn)外賣項(xiàng)目商品頁(yè)的展示。如圖所示，我們可以把商品也面分為兩大部分左側(cè)菜單欄右側(cè)商品展示為當(dāng)前商品頁(yè)面的根元素。下一篇文章我們開始為左側(cè)菜單欄，右側(cè)商品展示加入數(shù)據(jù)。上次我們通過(guò)設(shè)計(jì)評(píng)價(jià)組件這個(gè)過(guò)程，了解到了組件設(shè)計(jì)中的良好的習(xí)慣，比如，文件夾如何支撐組件，圖片，組件路徑的存放于設(shè)置。本篇我們將繼續(xù)推進(jìn)外賣項(xiàng)目—商品頁(yè)的展示。 showImg(https://segm...

DirtyMind 2019-08-23 18:15 評(píng)論0 收藏0
Vue實(shí)戰(zhàn)—評(píng)價(jià)組件的設(shè)計(jì)與實(shí)現(xiàn)（6）

摘要：本篇文章我們進(jìn)一步深入項(xiàng)目設(shè)計(jì)評(píng)價(jià)組件。使得組件更加便于維護(hù)。路徑配置內(nèi)自動(dòng)補(bǔ)全設(shè)置通過(guò)重命名設(shè)置對(duì)組件導(dǎo)入模塊時(shí)進(jìn)行了重命名。全部有圖點(diǎn)評(píng)使用引入的組件組件就是上圖標(biāo)記的分隔線。在上篇文章我們將項(xiàng)目頭部模塊進(jìn)行了編寫與數(shù)據(jù)渲染。本篇文章我們進(jìn)一步深入項(xiàng)目設(shè)計(jì)評(píng)價(jià)組件。 showImg(https://segmentfault.com/img/bVbt6IP?w=374&h=417...

cocopeak 2019-08-23 18:13 評(píng)論0 收藏0
webpack+vue項(xiàng)目實(shí)戰(zhàn)（五，監(jiān)聽路由，實(shí)現(xiàn)同個(gè)頁(yè)面不同狀態(tài)的切換）

摘要：好了，閑話不多說(shuō)今天要說(shuō)的時(shí)利用監(jiān)聽路由的方式，實(shí)現(xiàn)同個(gè)頁(yè)面不同狀態(tài)的切換。只要等于，那么頁(yè)面就是待確認(rèn)回款頁(yè)面進(jìn)入待確認(rèn)回款頁(yè)面中，回款狀態(tài)的篩選標(biāo)簽要加上。 1.前言今天發(fā)完這一篇，就要這個(gè)系列告一段落了！以后如果有什么要補(bǔ)充的會(huì)繼續(xù)補(bǔ)充！因?yàn)樵诤笈_(tái)管理項(xiàng)目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個(gè)是要根據(jù)后端的需求，來(lái)進(jìn)來(lái)比較細(xì)化的工作，我在這里就不說(shuō)了！...

guyan0319 2019-08-20 17:47 評(píng)論0 收藏0
Vue實(shí)戰(zhàn)—從目錄結(jié)構(gòu)談可擴(kuò)展項(xiàng)目架構(gòu)設(shè)計(jì)

摘要：好的項(xiàng)目代碼結(jié)構(gòu)會(huì)大大提升項(xiàng)目的維護(hù)性和可擴(kuò)展性。多說(shuō)無(wú)益，我這里直接給大家一個(gè)示意圖，大家可以按照我給的這個(gè)項(xiàng)目結(jié)構(gòu)組織項(xiàng)目。你連文件目錄都設(shè)計(jì)不好，我拿什么相信你能設(shè)計(jì)出來(lái)可擴(kuò)展的程序很多人都會(huì)用項(xiàng)目腳手架，也會(huì)跑hello world，然后再寫寫簡(jiǎn)單的todolist。但是再往下深入就難了。比如很多教程和老師都會(huì)說(shuō)，大家要多問一個(gè)為什么。其實(shí)我想說(shuō)多問你妹啊。我都不知道問為什么...

yankeys 2019-08-23 16:54 評(píng)論0 收藏0
Vue實(shí)戰(zhàn)—路由輕松設(shè)置vue-router（3）

摘要：決定將組建渲染在哪，打開，添加配置路由打開文件夾下引入各個(gè)組件配置路由路徑組件路由重定向我們?cè)跀?shù)組設(shè)定為。官方文檔注意，當(dāng)前激活導(dǎo)航設(shè)置方法固定屬性值。所以使用保留組件狀態(tài)，避免重新渲染購(gòu)物車的數(shù)據(jù)丟失。上篇我們說(shuō)了vue項(xiàng)目的目錄設(shè)計(jì)，本篇我們來(lái)學(xué)習(xí)一下vue路由。路由的作用：在web端路由（route）就是URL到函數(shù)的映射，vue的router就像一個(gè)容器，分配，處理每一個(gè)...

timger 2019-08-23 18:08 評(píng)論0 收藏0