在開發(fā)一個前端項目之前，我們可能需要做如下準(zhǔn)備工作：

• 搭建開發(fā)環(huán)境
• 約定代碼規(guī)范
• 封裝API請求
• 配置路由
• 實現(xiàn)布局、菜單、導(dǎo)航
• 實現(xiàn)登錄
• 權(quán)限管理
• ...

除了準(zhǔn)備工作之外，還會遇到很多相似的業(yè)務(wù)類型，比如中后臺應(yīng)用大多都是工作臺、增刪改查、權(quán)限、圖表等。如果每次項目都完全手動處理一遍，不僅耗費時間，久而久之可能會存在多種技術(shù)棧、開發(fā)規(guī)范，導(dǎo)致開發(fā)流程不統(tǒng)一，歷史項目越來越難維護(hù)。所以我們需要一套完整的解決方案，來管理開發(fā)到部署整個流程。

簡介

Fee.js，是 WeBankFinTech 在 Github / Gitee 上開源的前端應(yīng)用解決方案，目前版本為 0.4.5。

Fee.js 以 Vue 3.0 和路由為基礎(chǔ)，同時支持配置式路由和約定式路由，并以此進(jìn)行功能擴展。配以覆蓋編譯時和運行時生命周期完善的插件體系，支持各種功能擴展和業(yè)務(wù)需求。以約定、配置化、組件化的設(shè)計思想，讓用戶僅僅關(guān)心用組件搭建頁面內(nèi)容?；?Vue.js，上手簡單。經(jīng)過多個項目中打磨，趨于穩(wěn)定。

使用

Fes.js 是一個好用的前端應(yīng)用解決方案。Fes.js 以 Vue 3.0 和路由為基礎(chǔ)，同時支持配置式路由和約定式路由，并以此進(jìn)行功能擴展。配以覆蓋編譯時和運行時生命周期完善的插件體系，支持各種功能擴展和業(yè)務(wù)需求。

Fee.js 主要具備以下特點：

• 快速 ，內(nèi)置了路由、開發(fā)、構(gòu)建等，并且提供測試、布局、權(quán)限、國際化、狀態(tài)管理、API請求、數(shù)據(jù)字典、SvgIcon等插件，可以滿足大部分日常開發(fā)需求。
• 簡單 ，基于Vue.js 3.0，上手簡單。貫徹“約定優(yōu)于配置”思想，設(shè)計插件上盡可能用約定替代配置，同時提供統(tǒng)一的插件配置入口，簡單簡潔又不失靈活。提供一致性的API入口，一致化的體驗，學(xué)習(xí)起來更輕松。
• 健壯 ，只需要關(guān)心頁面內(nèi)容，減少寫B(tài)UG的機會！提供單元測試、覆蓋測試能力保障項目質(zhì)量。
• 可擴展 ，借鑒Umi實現(xiàn)了完整的生命周期和插件化機制，插件可以管理項目的編譯時和運行時，能力均可以通過插件封裝進(jìn)來，在 Fes.js 中協(xié)調(diào)有序的運行。
• 面向未來 ，在滿足需求的同時，我們也不會停止對新技術(shù)的探索。已使用Vue3.0來提升應(yīng)用性能，已使用webpack5提升構(gòu)建性能和實現(xiàn)微服務(wù)，未來會探索vite等新技術(shù)。

Fes.js 把大家常用的技術(shù)棧封裝成一個個插件進(jìn)行整理，收斂到一起，讓大家只用 Fes.js 就可以完成 80% 的日常工作。

Fes.js 支持插件和插件集，通過插件集把插件收斂依賴然后支持不同的業(yè)務(wù)類型。

Fee.js 依賴 Node.js 10.13+，并推薦使用 yarn 進(jìn)行依賴管理。首先，創(chuàng)建工作空間：

# 創(chuàng)建目錄 workspace 
mkdir workspace 
# 進(jìn)入目錄 workspace 
cd workspace 

然后在工作空間創(chuàng)建項目：

# 創(chuàng)建模板 
yarn create @fesjs/fes-app myapp 

項目結(jié)構(gòu)創(chuàng)建完成后，安裝依賴：

# 進(jìn)入項目目錄 
cd myapp 
# 安裝依賴 
yarn  

安裝完成后，啟動項目：

# 開發(fā)調(diào)試 
yarn dev  
yarn run v1.22.4 
$ fes dev 
Starting the development server http://localhost:8080 ...  
✔ Webpack   
Compiled successfully in 15.91s   
DONE  Compiled successfully in 15917ms       

啟動完成后，訪問 http://localhost:8080，我們就能看到 Fee.js 的基本界面：

如果需要部署發(fā)布，可以進(jìn)行構(gòu)建，然后使用 dist/ 目錄進(jìn)行發(fā)布：

# 構(gòu)建 
yarn build  
yarn run v1.22.4 
$ fes build  
✔ Webpack   
Compiled successfully in 45.37s  
✨  Done in 48.87s.  

Fee.js 的項目目錄結(jié)構(gòu)如下：

fes-template 
├── package.json 
├── tsconfig.json 
├── mock.js 
├── .fes.js 
├── .env 
├── dist 
├── public 
│   └── index.html 
└── src 
    ├── .fes 
    └── pages 
    │    └── index.vue 
    └── app.js 

其中 src 包含核心邏輯代碼，.fes 存儲臨時文件，pages 目錄存放路由文件，app.js 為運行時配置文件。

Fes.js 約定 .fes.js 文件為項目基礎(chǔ)配置文件，一份常見的配置示例如下：

export default { 
    base: '/foo/', 
    publicPath: '/', 
    devServer: { 
        port: 8080 
    } 
    mock: { 
        prefix: '/v2' 
    }, 
    proxy: { 
        '/v2': { 
            'target': 'https://api.douban.com/', 
            'changeOrigin': true,  
        }, 
    }, 
    layout: { 
        title: "Fes.js", 
        footer: 'Created by MumbelFe', 
        multiTabs: false, 
        menus: [{ 
            name: 'index' 
        }, { 
            name: 'onepiece' 
        }, { 
            name: 'store' 
        }, { 
            name: 'simpleList' 
        }] 
    } 
} 

在配置文件中，我們定義了包括：服務(wù)路徑、代理、Mock 服務(wù)、菜單等。

Fee.js 基于 Vue Router 實現(xiàn)其路由，通過在配置文件 .fee.js 中通過 router 進(jìn)行配置即可：

export default { 
    router: { 
        routes: [], 
        mode: 'hash' 
    } 
}  

Fee.js 通過添加插件的方法來為項目添加額外的功能，包括：

• 項目的 webpack 配置。
• 修改項目的 babel 配置。
• 添加新的 fes 命令 - 例如 @fes/plugin-jest 添加了 fes test 命令，允許開發(fā)者運行單元測試。
• 集成 Vue 的插件。
• 修改路由配置。
• 提供運行時 API
• ...

插件的入口是一個函數(shù)，函數(shù)會以 API 對象作為第一個參數(shù)：

export default (api)=>{ 
    api.describe({ 
        key: 'esbuild', 
        config: { 
            schema(joi) { 
                return joi.object(); 
            }, 
            default: {} 
        }, 
        enableBy: api.EnableBy.config, 
    }); 
}  

總結(jié)

Fee.js 是一個優(yōu)秀的開源前端應(yīng)用解決方案，以 Vue 3.0 和路由為基礎(chǔ)，其具有快速、簡單、健壯、可擴展、面向未來的特性。相比于其他前端框架，F(xiàn)ee.js 內(nèi)置了各種基礎(chǔ)組件，開發(fā)效率高，上手簡單，使用統(tǒng)一配置，簡單靈活；使用插件化的方式，使得開發(fā)流程可擴展性高。

[[392271]]