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

經過上一篇文章咱們瞭解了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 根組件。

總結

項目目錄設計能夠根據實際具體需求變更，可是咱們結構化去思考。那麼咱們設計的目錄確定會方便易用，利於維護拓展的。下一篇咱們將把組件按需拆分，還請持續關注。