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

Fes.js功能特性大略,基于Vue.js 3.0,上手简单。
贯彻 “约定优于配置” 思想,在设计插件上尽可能用约定替代配置,依然供应统一的插件配置入口,大略简洁又不失落灵巧。
供应同等性的API入口,同等化的体验,学习起来更轻松。
快速,Fes.js 内置路由、构建、插件管理,供应测试、布局、权限、国际化、状态管理、要求、数据字典、Svg等插件,可以知足大部分日常开拓需求。
健壮,仅仅须要关心页面内容,减少犯错的机会!
供应单元测试、覆盖测试的能力保障项目质量。
可扩展,借鉴 UMI 实现完全的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中折衷有序地运行。
面向未来,在知足需求的同时,我们也不会停滞对新技能的探索。
利用Vue3.0来提升运用性能,已利用webpack5提升构建性能和实现微做事,未来会探索vite等新技能。
社区生态,Fes.js的紧张重点是开拓职员体验,我们会不断改进框架。
如果您有问题或疑问,Fes.js的社区将为您供应帮助。
Fes.js架构

快速上手

1. 依赖环境

html管理系统开源精选  基于Vue30的中后台前端解决计划 Java

首先得有 Node.js,并确保 node 版本是 10.13 或以上

# 打印 node 版本node -vv10.13.0

推举利用 yarn 管理 npm 依赖

# 全局安装 yarnnpm i yarn -g

2. 创建项目

步骤1 创建事情空间

如果事情空间不存在,则先创建:

# 创建目录 workspacemkdir workspace# 进入目录 workspacecd workspace

如果事情空间已存在,则直接进入

# 进入目录 workspacecd workspace

步骤2 在事情空间创建项目

利用yarn创建

yarn create @fesjs/fes-app myapp

或者利用NPM

npx @fesjs/create-fes-app myapp

如果项目文件夹 workspace/myapp 已经存在,会提示目录已存在:

你可以选择:

Overwrite 删除项目文件夹,重新创建项目。
Merge 保留原项目文件夹,存在相同文件则用模板文件覆盖当前目录文件。

当选择 Overwrite 或者 Merge 或者项目目录 workspace/myapp 不存在,会提示选取一个 template:

你可以选默认适用于中后台前端运用的 PC 类型,也可以选择适用于移动真个 H5 类型。

步骤3 安装依赖

利用yarn安装

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

或者利用NPM

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

3. 启动项目

利用yarn启动

# 开拓调试yarn devyarn run v1.22.4$ fes devStarting the development server http://localhost:8080 ...✔ Webpack Compiled successfully in 15.91s DONE Compiled successfully in 15917ms 11:17:08 AM

或者利用NPM

# 开拓调试npm run dev> fes devStarting the development server http://localhost:8080 ...✔ Webpack Compiled successfully in 3.66s DONE Compiled successfully in 3662ms 11:17:46 AM

Fes.js 会在 http://localhost:8080 启动一个热重载的开拓做事器。
当你修正你的 .vue 文件时,浏览器中的内容也会自动更新。

4. 支配发布

利用yarn构建

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

或者利用NPM

# 构建npm run build> fes build✔ Webpack Compiled successfully in 45.37s

构建产物默认天生到 ./dist 下,然后通过 tree 命令查看

tree ./distdist├── chunk-vendors.27cd4686.js├── chunk-vendors.a5f5de67.css├── index.11411d43.css├── index.d72f1ba2.js├── index.html├── logo.png└── static └── logo.0f85bba0.png

5. 本地验证

发布之前,可以通过 serve 做本地验证,验证结果该当跟实行 fes dev 的结果一样。

6. 支配

本地验证完,就可以支配了。
你须要把 dist 目录支配到做事器上。

Fes.js插件

插件

先容

@fesjs/plugin-access

供应对页面资源的权限掌握能力

@fesjs/plugin-enums

供应统一的列举存取及丰富的函数来处理列举

@fesjs/plugin-icon

svg 文件自动注册为组件

@fesjs/plugin-jest

基于 Jest,供应单元测试、覆盖测试能力

@fesjs/plugin-layout

大略的配置即可拥有布局,包括导航以及侧边栏

@fesjs/plugin-locale

基于 Vue I18n,供应国际化能力

@fesjs/plugin-model

大略单纯的数据管理方案

@fesjs/plugin-request

基于 Axios 封装的 request,内置防止重复要求、要求节流、缺点处理等功能

@fesjs/plugin-vuex

基于 Vuex, 供应状态管理能力

@fesjs/plugin-qiankun

基于 qiankun,供应微做事能力

@fesjs/plugin-sass

样式支持sass

@fesjs/plugin-monaco-editor

供应代码编辑器的能力, 基于monaco-editor(VS Code利用的代码编辑器)

更多内容大家可自行前往阅读。

开源地址:https://gitee.com/WeBank/fes.js