Vue實戰—如何細化Vue項目目錄設計（2）

thekingisalwaysluc 發布于2019-08-23 17:05 / 559人閱讀

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

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

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

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

項目中我們會對靜態資源統一管理；

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

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

綜合以上，我們將目錄設計為：

如圖所示，

data：用來模擬我們請求的數據內部主要存放json數據格式的數據，比如評價，商品等。

resource：統一管理圖片、文檔、圖標這三種資源。

src：項目的核心文件

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

common：公共工具

    fonts：用來存放字體。

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

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

components：Vue組件。

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

        Hearder.Vue： 頭部組件。

router：路由配置文件夾。

app.Vue 根組件。

總結

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103792.html

Vue實戰-商品展示切圖（7）

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

DirtyMind 2019-08-23 18:15 評論0 收藏0
Vue實戰—評價組件的設計與實現（6）

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

cocopeak 2019-08-23 18:13 評論0 收藏0
webpack+vue項目實戰（五，監聽路由，實現同個頁面不同狀態的切換）

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

guyan0319 2019-08-20 17:47 評論0 收藏0
Vue實戰—從目錄結構談可擴展項目架構設計

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

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

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

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