如何使用Fes.js

本篇內(nèi)容介紹了“如何使用Fes.js ”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在開發(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

簡介

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

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

Fee.js

使用

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

• 可擴(kuò)展 ，借鑒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% 的日常工作。

Fee.js

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

Fee.js

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 的基本界面：

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,     }); }

“如何使用Fes.js ”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！