Vue實戰(zhàn)—如何細化Vue項目目錄設(shè)計（2）

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

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

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

接下來我們進一步細化Vue項目的目錄設(shè)計：

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

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

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

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

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

如圖所示，

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

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

src：項目的核心文件

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

common：公共工具

    fonts：用來存放字體。

    js：用來存放我們使用js插件。

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

components：Vue組件。

    header：注意這里是一個文件夾。

        Hearder.Vue： 頭部組件。

router：路由配置文件夾。

app.Vue 根組件。

總結(jié)

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/103792.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

timger 2019-08-23 18:08 評論0 收藏0