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

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

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

簡(jiǎn)介

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

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

使用

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

Fee.js 主要具備以下特點(diǎn)：

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

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

Fes.js 支持插件和插件集，通過(guò)插件集把插件收斂依賴然后支持不同的業(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)建項(xiàng)目：

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

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

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

安裝完成后，啟動(dòng)項(xiàng)目：

# 開(kāi)發(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       

啟動(dòng)完成后，訪問(wèn) 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 的項(xiàng)目目錄結(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 存儲(chǔ)臨時(shí)文件，pages 目錄存放路由文件，app.js 為運(yùn)行時(shí)配置文件。

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

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 實(shí)現(xiàn)其路由，通過(guò)在配置文件 .fee.js 中通過(guò) router 進(jìn)行配置即可：

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

Fee.js 通過(guò)添加插件的方法來(lái)為項(xiàng)目添加額外的功能，包括：

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

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

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

總結(jié)

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

[[392271]]