如何使用Fes.js

发布时间:2021-10-14 13:38:31 作者:iii
来源:亿速云 阅读:360

本篇内容介绍了“如何使用Fes.js ”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

在开发一个前端项目之前,我们可能需要做如下准备工作:

除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,来管理开发到部署整个流程。

如何使用Fes.js

Fee.js

简介

Fee.js,是 WeBankFinTech 在 Github / Gitee 上开源的前端应用解决方案,目前版本为 0.4.5。

Fee.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于 Vue.js,上手简单。经过多个项目中打磨,趋于稳定。

如何使用Fes.js

Fee.js

使用

Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础,同时支持配置式路由和约定式路由,并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系,支持各种功能扩展和业务需求。

Fee.js 主要具备以下特点:

Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。

如何使用Fes.js

Fee.js

Fes.js 支持插件和插件集,通过插件集把插件收敛依赖然后支持不同的业务类型。

如何使用Fes.js

Fee.js

Fee.js 依赖 Node.js 10.13+,并推荐使用 yarn 进行依赖管理。首先,创建工作空间:

# 创建目录 workspace mkdir workspace # 进入目录 workspace cd workspace

然后在工作空间创建项目:

# 创建模板 yarn create @fesjs/fes-app myapp

项目结构创建完成后,安装依赖:

# 进入项目目录 cd myapp # 安装依赖 yarn

安装完成后,启动项目:

# 开发调试 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 的基本界面:

如何使用Fes.js

Fee.js

如果需要部署发布,可以进行构建,然后使用 dist/ 目录进行发布:

# 构建 yarn build  yarn run v1.22.4 $ fes build  ✔ Webpack   Compiled successfully in 45.37s  ✨  Done in 48.87s.

Fee.js 的项目目录结构如下:

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 文件为项目基础配置文件,一份常见的配置示例如下:

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'         }]     } }

在配置文件中,我们定义了包括:服务路径、代理、Mock 服务、菜单等。

Fee.js 基于 Vue Router 实现其路由,通过在配置文件 .fee.js 中通过 router 进行配置即可:

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

Fee.js 通过添加插件的方法来为项目添加额外的功能,包括:

插件的入口是一个函数,函数会以 API 对象作为第一个参数:

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

“如何使用Fes.js ”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. laravel 使用 phpword使用说明
  2. SpringBoot使用NoSQL——Redis的使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

上一篇:不同的数据分析领域语言有哪些优缺点

下一篇:定时任务的实现方法有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》