自動構建VUE前端項目的框架

前言

 

基於之前VUE數據模型設計思想指導的這篇博客，我構建了一個自動創建工程目錄的工具：genesis-tools。

此工具是基於Vue, vuex, vue-router來做的一個骨架自動生成工具，自帶模版文件，並且抽象了baseList和baseDetail頁面的大部分功能：

1. 初始化請求數據 
2. 去到詳情頁
3. 分頁功能

使用方法

安裝genesis-tools

npm i genesis-tools

然後配置genesis.json

{
    "name": "genesis",
    "sourceFolder": "src",
    "storeFolder": "store",
    "viewFolder": "screen",
    "routerFolder": "router",
    "hardCopyBase": false,
    "modules": [{
        "name": "school",
        "update": false
    }]
}

說明：

1. name: 說明此配置
2. sourceFolder: 源代碼文件目錄, 包含以下幾個目錄
3. storeFolder: store文件的目錄，vuex需要用來操作數據的
4. viewFolder: 頁面pages自動生成的目錄
5. routerFolder：vue-router的配置目錄，這裏會自動導入自動頁面生成的目錄
6. hardCopyBase： 如果base已經拷貝過了，這裏是否需要再次更新，建議是不要更新，如果每次更新，會丟掉你自己的擴展開發的內容
7. modules： 配置需要自動生成的模塊
   1. name: 模塊的名字
   2. update：如果已經存在了，是否需要更新，這裏同樣，推薦設置爲false

 配置好了以後，可以看出school是一個模塊名字，然後在package.json中配置腳本：

 "come": "node node_modules/genesis-tools/index.js"

在當前工程的命令行下面運行：

npm run come

這樣在對應的目錄下面就會自動生成school模塊相關的信息，列表頁面和詳情頁。

並且會把base和重用的內容放到源文件目錄下面去，頁面骨架就自動生成了。

接下來你需要做的：

1. 到模塊對應的store文件中調用api請求，獲取數據，寫回模塊，基礎方法已經放在裏面了
2. 到頁面的view目錄下面去豐富內容，模塊已經配置在store上面了，這裏也根據各個命名空間分別取出了對應的數據，顯示內容由你填充了哦，列表和編輯都如此
3. 配置頁面菜單並鏈接到router中配置的路由上。

以上完成了之後這塊功能就告一段落。

 

此框架不涉及到具體的樣式，只涉及的項目結構，因此適用於PC端和APP端。

例子可以參考https://github.com/lucia-super/genesis。

此例子接入了element-ui，如果在實際開發中你的ui庫不一樣，你可以替換掉此庫，我們的自動構建框架不包含ui庫的部分。

目前baseList 和baseDetail的功能還在進一步豐富中，如果你有更好的建議和想法，請加入我。

我的目標：儘可能減少重複勞動力，框架化前端開發，統一結構和思想。