From 98bae6d141de6a7b88fbaf625c6a6593d6edbc85 Mon Sep 17 00:00:00 2001 From: harrywan <445436867@qq.com> Date: Mon, 18 Apr 2022 13:31:47 +0800 Subject: [PATCH] feat: watermark (#112) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 基础功能 * feat: 支持时间戳 * refactor(plugin-watermark): 优化实现 * feat(plugin-watermark): 提供开关 * docs: 添加文档 * docs: 优化文档 --- README.en-US.md | 29 ++-- README.md | 32 +++-- build.config.js | 1 + docs/.vuepress/configs/sidebar/zh.ts | 1 + docs/guide/directory-structure.md | 2 +- docs/reference/plugin/README.md | 1 + docs/reference/plugin/plugins/access.md | 12 +- docs/reference/plugin/plugins/editor.md | 9 +- docs/reference/plugin/plugins/watermark.md | 70 +++++++++ packages/create-fes-app/README.md | 93 +++++++++--- packages/fes-compiler/README.md | 93 +++++++++--- packages/fes-plugin-access/README.md | 93 +++++++++--- packages/fes-plugin-enums/README.md | 93 +++++++++--- packages/fes-plugin-icon/README.md | 93 +++++++++--- packages/fes-plugin-jest/README.md | 93 +++++++++--- packages/fes-plugin-layout/README.md | 93 +++++++++--- packages/fes-plugin-locale/README.md | 93 +++++++++--- packages/fes-plugin-model/README.md | 93 +++++++++--- packages/fes-plugin-monaco-editor/README.md | 93 +++++++++--- packages/fes-plugin-pinia/README.md | 93 +++++++++--- packages/fes-plugin-qiankun/README.md | 93 +++++++++--- packages/fes-plugin-request/README.md | 100 +++++++++---- packages/fes-plugin-sass/README.md | 93 +++++++++--- packages/fes-plugin-vuex/README.md | 93 +++++++++--- packages/fes-plugin-watermark/LICENSE | 21 +++ packages/fes-plugin-watermark/README.md | 125 ++++++++++++++++ packages/fes-plugin-watermark/build.config.js | 4 + packages/fes-plugin-watermark/package.json | 37 +++++ packages/fes-plugin-watermark/src/index.js | 45 ++++++ .../fes-plugin-watermark/src/runtime/core.js | 136 ++++++++++++++++++ packages/fes-plugin-windicss/README.md | 93 +++++++++--- packages/fes-preset-built-in/README.md | 93 +++++++++--- packages/fes-runtime/README.md | 93 +++++++++--- packages/fes-template/.fes.js | 3 + packages/fes-template/src/app.js | 3 +- packages/fes-utils/README.md | 93 +++++++++--- packages/fes/README.md | 93 +++++++++--- 37 files changed, 2025 insertions(+), 373 deletions(-) create mode 100644 docs/reference/plugin/plugins/watermark.md create mode 100644 packages/fes-plugin-watermark/LICENSE create mode 100644 packages/fes-plugin-watermark/README.md create mode 100644 packages/fes-plugin-watermark/build.config.js create mode 100644 packages/fes-plugin-watermark/package.json create mode 100644 packages/fes-plugin-watermark/src/index.js create mode 100644 packages/fes-plugin-watermark/src/runtime/core.js diff --git a/README.en-US.md b/README.en-US.md index 60b20a70..36033479 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -17,7 +17,7 @@ An excellent front-end solution -- document - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/) +- document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) - changelog - [CHANGELOG.md](./CHANGELOG.md) # Pain points @@ -52,19 +52,20 @@ It mainly has the following functions: | plugin | introduce | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | Provides the ability to control the permissions of page resources | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | Provide unified enumeration access and rich functions to handle enumeration | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg file is automatically registered as a component | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Jest`, provide unit testing and coverage testing capabilities | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | Simple configuration to have a layout, including navigation and sidebar | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | Based on `Vue I18n`, providing internationalization capabilities | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | Simple data management solution | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Vuex`, provide state management capabilities | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | Based on `qiankun`, provide microservice capabilities | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | Style support sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | Provides the ability to control the permissions of page resources | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | Provide unified enumeration access and rich functions to handle enumeration | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg file is automatically registered as a component | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Jest`, provide unit testing and coverage testing capabilities | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | Simple configuration to have a layout, including navigation and sidebar | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | Based on `Vue I18n`, providing internationalization capabilities | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | Simple data management solution | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on `Vuex`, provide state management capabilities | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | Based on `qiankun`, provide microservice capabilities | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | Style support sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | Provide code editor capability, based on `monaco-editor` (code editor used by VS Code) | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | state manager | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | watermark | ## As easy as counting 1, 2, 3 use `yarn`: diff --git a/README.md b/README.md index d307be75..365d3a63 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ -- 使用文档 - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/) +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) - 更新日志 - [CHANGELOG.md](./CHANGELOG.md) # 痛点 @@ -51,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: diff --git a/build.config.js b/build.config.js index 09da5329..d2063d50 100644 --- a/build.config.js +++ b/build.config.js @@ -20,6 +20,7 @@ module.exports = { 'fes-plugin-pinia', 'fes-preset-built-in', 'fes-plugin-windicss', + 'fes-plugin-watermark', 'fes-runtime', 'fes-utils' ], diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index a2a4838d..e8f5793f 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -62,6 +62,7 @@ export const zh: SidebarConfig = { '/reference/plugin/plugins/sass.md', '/reference/plugin/plugins/editor.md', '/reference/plugin/plugins/pinia.md', + '/reference/plugin/plugins/watermark.md', ], }, { diff --git a/docs/guide/directory-structure.md b/docs/guide/directory-structure.md index dc28cf9f..17954475 100644 --- a/docs/guide/directory-structure.md +++ b/docs/guide/directory-structure.md @@ -81,7 +81,7 @@ fes-template "@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0", "@fesjs/plugin-windicss": "^2.0.0", - "@fesjs/fes-design": "^0.1.10", + "@fesjs/fes-design": "^0.4.0", "vue": "^3.0.5", "vuex": "^4.0.0" }, diff --git a/docs/reference/plugin/README.md b/docs/reference/plugin/README.md index afa61438..a9cccbfb 100644 --- a/docs/reference/plugin/README.md +++ b/docs/reference/plugin/README.md @@ -17,6 +17,7 @@ | [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | | [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`,提供原子化 CSS 能力 | | [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`,提供状态管理 | +| [@fesjs/plugin-watermark](./plugins/watermark.md) | 水印 | ## 架构 diff --git a/docs/reference/plugin/plugins/access.md b/docs/reference/plugin/plugins/access.md index 1300cb9d..e7f02981 100644 --- a/docs/reference/plugin/plugins/access.md +++ b/docs/reference/plugin/plugins/access.md @@ -69,9 +69,7 @@ export default { } ``` -## 配置 - -### 编译时配置 +## 编译时配置 在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置: ```js export default { @@ -83,7 +81,7 @@ export default { } ``` -#### roles +### roles - **类型**:对象 - **默认值**:`{}` @@ -93,10 +91,10 @@ export default { 角色预定义列表。`key` 是角色 Id ,`value`是角色 Id 对应的资源列表。 -### 运行时配置 +## 运行时配置 在 `app.js` 中配置 -#### unAccessHandler +### unAccessHandler - **类型**:`Function` - **默认值**:`null` @@ -128,7 +126,7 @@ export const access = { ``` -#### noFoundHandler +### noFoundHandler - **类型**:`Function` - **默认值**:`null` diff --git a/docs/reference/plugin/plugins/editor.md b/docs/reference/plugin/plugins/editor.md index 97b63399..baaaaf14 100644 --- a/docs/reference/plugin/plugins/editor.md +++ b/docs/reference/plugin/plugins/editor.md @@ -15,9 +15,8 @@ } ``` -## 配置 -### 编译时配置 +## 编译时配置 在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置: ```js export default { @@ -29,17 +28,17 @@ export default { 我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本,所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置,具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。 -#### filename +### filename - **类型**:自定义worker脚本名称 - **默认值**:`'[name].worker.js'` -#### publicPath +### publicPath - **类型**:自定义worker脚本的路径 - **默认值**:`''` -#### languages +### languages - **类型**:需要支持的语言类型 - **默认值**:`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']` diff --git a/docs/reference/plugin/plugins/watermark.md b/docs/reference/plugin/plugins/watermark.md new file mode 100644 index 00000000..8ed0d2f3 --- /dev/null +++ b/docs/reference/plugin/plugins/watermark.md @@ -0,0 +1,70 @@ +# @fesjs/plugin-watermark + +## 介绍 +给页面添加水印效果 + +## 启用方式 +在 `package.json` 中引入依赖: +```json +{ + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/plugin-watermark": "^2.0.0" + } +} +``` + +## 编译时配置 + +```js +export default { + watermark: { + disabled: false + }, +} +``` + +### disabled + +是否禁用水印,默认是`false`。 + +可以在开发环境关闭水印: + +```js +export default { + watermark: { + disabled: true + }, +} +``` + +## API + +### createWatermark + +创建水印功能,通过 `@fesjs/fes` 导入 API: +```js +import { createWatermark } from '@fesjs/fes' + +createWatermark({ content: '我是水印' }); +``` + + +默认参数是: +```js +{ + container = document.body, + width = '300px', + height = '300px', + textAlign = 'center', + textBaseline = 'middle', + font = '16px Microsoft Yahei', + fillStyle = 'rgba(184, 184, 184, 0.2)', + content = '请勿外传', + rotate = '45', + zIndex = 99999, + timestamp = 'YYYY-MM-DD hh:mm' +} +``` + +如果不需要时间戳,则可以设置`timestamp`为`false`。 \ No newline at end of file diff --git a/packages/create-fes-app/README.md b/packages/create-fes-app/README.md index d0539a7c..365d3a63 100644 --- a/packages/create-fes-app/README.md +++ b/packages/create-fes-app/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-compiler/README.md b/packages/fes-compiler/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-compiler/README.md +++ b/packages/fes-compiler/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-access/README.md b/packages/fes-plugin-access/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-access/README.md +++ b/packages/fes-plugin-access/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-enums/README.md b/packages/fes-plugin-enums/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-enums/README.md +++ b/packages/fes-plugin-enums/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-icon/README.md b/packages/fes-plugin-icon/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-icon/README.md +++ b/packages/fes-plugin-icon/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-jest/README.md b/packages/fes-plugin-jest/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-jest/README.md +++ b/packages/fes-plugin-jest/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-layout/README.md b/packages/fes-plugin-layout/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-layout/README.md +++ b/packages/fes-plugin-layout/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-locale/README.md b/packages/fes-plugin-locale/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-locale/README.md +++ b/packages/fes-plugin-locale/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-model/README.md b/packages/fes-plugin-model/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-model/README.md +++ b/packages/fes-plugin-model/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-monaco-editor/README.md b/packages/fes-plugin-monaco-editor/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-monaco-editor/README.md +++ b/packages/fes-plugin-monaco-editor/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-pinia/README.md b/packages/fes-plugin-pinia/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-pinia/README.md +++ b/packages/fes-plugin-pinia/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-qiankun/README.md b/packages/fes-plugin-qiankun/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-qiankun/README.md +++ b/packages/fes-plugin-qiankun/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-request/README.md b/packages/fes-plugin-request/README.md index 87f372cf..365d3a63 100644 --- a/packages/fes-plugin-request/README.md +++ b/packages/fes-plugin-request/README.md @@ -1,4 +1,37 @@ -## Fes.js +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -18,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -60,18 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: - - +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | -# plugin-request +## 参与共建 -## TODO +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + -* formData 控制 -* 轮询 -* 并行请求 >> 通过定义 key 区分 -* 防抖 & 节流 -* 缓存 & SWR & 预加载 -* loadingDelay diff --git a/packages/fes-plugin-sass/README.md b/packages/fes-plugin-sass/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-sass/README.md +++ b/packages/fes-plugin-sass/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-vuex/README.md b/packages/fes-plugin-vuex/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-vuex/README.md +++ b/packages/fes-plugin-vuex/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-plugin-watermark/LICENSE b/packages/fes-plugin-watermark/LICENSE new file mode 100644 index 00000000..0978fbf7 --- /dev/null +++ b/packages/fes-plugin-watermark/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2020-present webank + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/packages/fes-plugin-watermark/README.md b/packages/fes-plugin-watermark/README.md new file mode 100644 index 00000000..365d3a63 --- /dev/null +++ b/packages/fes-plugin-watermark/README.md @@ -0,0 +1,125 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + + +## Fes.js 是什么? +Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 + +它主要具备以下功能: +- 🚀 __快速__ ,内置了路由、开发、构建等,并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件,可以满足大部分日常开发需求。 + +- 🧨 __简单__ ,基于Vue.js 3.0,上手简单。贯彻“约定优于配置”思想,设计插件上尽可能用约定替代配置,同时提供统一的插件配置入口,简单简洁又不失灵活。提供一致性的API入口,一致化的体验,学习起来更轻松。 + +- 💪 __健壮__ ,只需要关心页面内容,减少写BUG的机会!提供单元测试、覆盖测试能力保障项目质量。 + +- 📦 __可扩展__ ,借鉴Umi实现了完整的生命周期和插件化机制,插件可以管理项目的编译时和运行时,能力均可以通过插件封装进来,在 Fes.js 中协调有序的运行。 + +- 📡 __面向未来__ ,在满足需求的同时,我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能,已使用webpack5提升构建性能和实现微服务,未来会探索vite等新技术。 + +## 插件 + +| 插件 | 介绍 | +| ---- | ---- | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + + +## 像数 1, 2, 3 一样容易 +使用 `yarn`: +```bash +# 创建模板 +yarn create @fesjs/fes-app myapp + +# 安装依赖 +yarn + +# 运行 +yarn dev +``` + +使用 `npm`: +```bash +# 创建模板 +npx @fesjs/create-fes-app myapp + +# 安装依赖 +npm install + +# 运行 +npm run dev +``` + +## 反馈 + +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + + diff --git a/packages/fes-plugin-watermark/build.config.js b/packages/fes-plugin-watermark/build.config.js new file mode 100644 index 00000000..828db044 --- /dev/null +++ b/packages/fes-plugin-watermark/build.config.js @@ -0,0 +1,4 @@ + +module.exports = { + copy: ['runtime'] +}; diff --git a/packages/fes-plugin-watermark/package.json b/packages/fes-plugin-watermark/package.json new file mode 100644 index 00000000..986b7958 --- /dev/null +++ b/packages/fes-plugin-watermark/package.json @@ -0,0 +1,37 @@ +{ + "name": "@fesjs/plugin-watermark", + "version": "2.0.0", + "description": "@fesjs/plugin-watermark", + "main": "lib/index.js", + "files": [ + "lib" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-plugin-watermark" + }, + "keywords": [ + "fes" + ], + "author": "harrywan", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@fesjs/utils": "^2.0.4", + "lodash-es": "^4.17.15" + }, + "peerDependencies": { + "@fesjs/fes": "^2.0.0", + "vue": "^3.0.5" + } +} diff --git a/packages/fes-plugin-watermark/src/index.js b/packages/fes-plugin-watermark/src/index.js new file mode 100644 index 00000000..a0f96ba4 --- /dev/null +++ b/packages/fes-plugin-watermark/src/index.js @@ -0,0 +1,45 @@ +import { join } from 'path'; + +const namespace = 'plugin-watermark'; + +export default (api) => { + api.describe({ + key: 'watermark', + config: { + schema(joi) { + return joi.object({ + disabled: joi.boolean() + }); + }, + default: {} + } + }); + + const absoluteFilePath = join(namespace, 'core.js'); + + // 当配置为disabled时不显示水印 + api.modifyConfig((memo) => { + const defineConfig = memo.define; + defineConfig.WATERMARK_DISABLED = memo.watermark.disabled ?? false; + return { + ...memo, + define: defineConfig + }; + }); + + + api.onGenerateFiles(() => { + api.copyTmpFiles({ + namespace, + path: join(__dirname, 'runtime'), + ignore: ['.tpl'] + }); + }); + + api.addPluginExports(() => [ + { + specifiers: ['createWatermark'], + source: absoluteFilePath + } + ]); +}; diff --git a/packages/fes-plugin-watermark/src/runtime/core.js b/packages/fes-plugin-watermark/src/runtime/core.js new file mode 100644 index 00000000..79b1da10 --- /dev/null +++ b/packages/fes-plugin-watermark/src/runtime/core.js @@ -0,0 +1,136 @@ +function timeFormat(date, format = 'YYYY-MM-DD') { + if (!date) return null; + if (typeof date === 'number') { + date = new Date(date); + } + const year = date.getFullYear(); + const month = date.getMonth(); + const day = date.getDate(); + const hours24 = date.getHours(); + const hours = hours24 % 12 === 0 ? 12 : hours24 % 12; + const minutes = date.getMinutes(); + const seconds = date.getSeconds(); + const dd = t => `0${t}`.slice(-2); + const map = { + YYYY: year, + MM: dd(month + 1), + MMMM: `${month + 1}月`, + M: month + 1, + DD: dd(day), + D: day, + HH: dd(hours24), + H: hours24, + hh: dd(hours), + h: hours, + mm: dd(minutes), + m: minutes, + ss: dd(seconds), + s: seconds + }; + return format.replace(/Y+|M+|D+|H+|h+|m+|s+|S+|Q/g, str => String(map[str])); +} + +// canvas 实现 watermark +export function createWatermark({ + container = document.body, + width = '300px', + height = '300px', + textAlign = 'center', + textBaseline = 'middle', + font = '16px Microsoft Yahei', + fillStyle = 'rgba(184, 184, 184, 0.2)', + content = '请勿外传', + rotate = '45', + zIndex = 99999, + timestamp = 'YYYY-MM-DD hh:mm' +} = {}) { + // eslint-disable-next-line no-undef + if (WATERMARK_DISABLED) { + return; + } + const param = { + container, + width, + height, + textAlign, + textBaseline, + font, + fillStyle, + content, + rotate, + zIndex, + timestamp + }; + const canvas = document.createElement('canvas'); + canvas.setAttribute('width', width); + canvas.setAttribute('height', height); + + const ctx = canvas.getContext('2d'); + ctx.textAlign = textAlign; + ctx.textBaseline = textBaseline; + ctx.font = font; + ctx.fillStyle = fillStyle; + ctx.translate(parseFloat(width) / 2, parseFloat(height) / 2); + ctx.rotate(-(Math.PI / 180) * rotate); + ctx.fillText( + `${content}${timestamp ? ` ${timeFormat(new Date(), timestamp)}` : ''}`, + 0, + 0 + ); + + let __wm = document.querySelector('.__wm'); + const watermarkDiv = __wm || document.createElement('div'); + const styleStr = ` + position: fixed; + user-select: none; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: ${zIndex}; + pointer-events: none !important; + background-repeat: repeat; + background-image: url('${canvas.toDataURL()}')`; + + watermarkDiv.setAttribute('style', styleStr); + watermarkDiv.classList.add('__wm'); + + if (!__wm) { + container.insertBefore(watermarkDiv, container.firstChild); + } + + const MutationObserver = window.MutationObserver || window.WebKitMutationObserver; + if (MutationObserver) { + let mo = new MutationObserver(() => { + __wm = document.querySelector('.__wm'); + if ((__wm && __wm.getAttribute('style') !== styleStr) || !__wm) { + // 避免一直触发 + mo.disconnect(); + mo = null; + createWatermark(param); + } + }); + + mo.observe(container, { + attributes: true, + subtree: true, + childList: true + }); + } + + if (timestamp) { + let timeout = 1000 * 60 * 60 * 24; + if (timestamp.includes('s')) { + timeout = 1000; + } else if (timestamp.includes('m')) { + timeout = 1000 * 60; + } else if (timestamp.includes('h') || timestamp.includes('H')) { + timeout = 1000 * 60 * 60; + } + + setTimeout(() => { + // 触发MutationObserver + watermarkDiv.style.bottom = '0'; + }, timeout); + } +} diff --git a/packages/fes-plugin-windicss/README.md b/packages/fes-plugin-windicss/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-plugin-windicss/README.md +++ b/packages/fes-plugin-windicss/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-preset-built-in/README.md b/packages/fes-preset-built-in/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-preset-built-in/README.md +++ b/packages/fes-preset-built-in/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-runtime/README.md b/packages/fes-runtime/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-runtime/README.md +++ b/packages/fes-runtime/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js index 43dfcb4b..0ac088fa 100644 --- a/packages/fes-template/.fes.js +++ b/packages/fes-template/.fes.js @@ -12,6 +12,9 @@ export default { router: { mode: 'hash' }, + watermark: { + disabled: false + }, access: { roles: { admin: ['*'], diff --git a/packages/fes-template/src/app.js b/packages/fes-template/src/app.js index c93adcad..0a121885 100644 --- a/packages/fes-template/src/app.js +++ b/packages/fes-template/src/app.js @@ -1,6 +1,6 @@ -import { access as accessApi, pinia } from '@fesjs/fes'; +import { access as accessApi, pinia, createWatermark } from '@fesjs/fes'; import PageLoading from '@/components/PageLoading'; import UserCenter from '@/components/UserCenter'; import { useStore } from '@/store/main'; @@ -20,6 +20,7 @@ export const beforeRender = { resolve({ userName: '李雷' }); + createWatermark({ content: '万纯(harrywan)' }); }, 1000); }); } diff --git a/packages/fes-utils/README.md b/packages/fes-utils/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes-utils/README.md +++ b/packages/fes-utils/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file diff --git a/packages/fes/README.md b/packages/fes/README.md index d0539a7c..365d3a63 100644 --- a/packages/fes/README.md +++ b/packages/fes/README.md @@ -1,3 +1,37 @@ +简体中文 | [English](./README.en-US.md) + +

+ + fes.js + +

+ +
+ +一个优秀的前端解决方案 + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](../../pulls) + +
+ +- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/) +- 更新日志 - [CHANGELOG.md](./CHANGELOG.md) + +# 痛点 +在开发一个前端项目之前,我们可能需要做如下准备工作: +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外,还会遇到很多相似的业务类型,比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍,不仅耗费时间,久而久之可能会存在多种技术栈、开发规范,导致开发流程不统一,历史项目越来越难维护。所以我们需要一套完整的解决方案,管理开发到部署整个流程。 + ## Fes.js 是什么? Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系,支持各种功能扩展和业务需求。以 路由为基础,同时支持配置式路由和约定式路由,保证路由的功能完备。整体上以约定、配置化、组件化的设计思想,让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0,充分利用Vue丰富的生态。技术曲线平缓,上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +51,22 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到 | 插件 | 介绍 | | ---- | ---- | -| [@fesjs/plugin-access](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | -| [@fesjs/plugin-enums](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | -| [@fesjs/plugin-icon](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | -| [@fesjs/plugin-jest](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | -| [ @fesjs/plugin-layout](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | -| [@fesjs/plugin-locale](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | -| [@fesjs/plugin-model](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | -| [@fesjs/plugin-request](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | -| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | -| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | -| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | -| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | -| [@fesjs/plugin-windicss](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | -| [@fesjs/plugin-pinia](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-access](http://fesjs.mumblefe.cn/reference/plugin/plugins/access.html) | 提供对页面资源的权限控制能力 | +| [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D) | 提供统一的枚举存取及丰富的函数来处理枚举 | +| [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D) | svg 文件自动注册为组件 | +| [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Jest`,提供单元测试、覆盖测试能力 | +| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html) | 简单的配置即可拥有布局,包括导航以及侧边栏 | +| [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D) | 基于 `Vue I18n`,提供国际化能力 | +| [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D) | 简易的数据管理方案 | +| [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request,内置防止重复请求、请求节流、错误处理等功能 | +| [@fesjs/plugin-vuex](http://fesjs.mumblefe.cn/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 | +| [@fesjs/plugin-qiankun](http://fesjs.mumblefe.cn/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`,提供微服务能力 | +| [@fesjs/plugin-sass](http://fesjs.mumblefe.cn/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass | +| [@fesjs/plugin-monaco-editor](http://fesjs.mumblefe.cn/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力, 基于`monaco-editor`(VS Code使用的代码编辑器) | +| [@fesjs/plugin-windicss](http://fesjs.mumblefe.cn/reference/plugin/plugins/windicss.html) | 基于 `windicss`,提供原子化 CSS 能力 | +| [@fesjs/plugin-pinia](http://fesjs.mumblefe.cn/reference/plugin/plugins/pinia.html) | pinia,状态处理 | +| [@fesjs/plugin-watermark](http://fesjs.mumblefe.cn/reference/plugin/plugins/watermark.html) | 水印 | + ## 像数 1, 2, 3 一样容易 使用 `yarn`: @@ -59,6 +95,31 @@ npm run dev ## 反馈 -请联系开源助手加入微信群: +| Github Issue | 微信群 | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](../../issues) | | | + + +## 参与共建 + +我们非常欢迎社区同学能提交PR: + +1. fork项目! +2. 创建你的功能分支: `git checkout -b my-new-feature` +3. 本地提交新代码: `git commit -am 'Add some feature'` +4. 推送本地到服务器分支: `git push origin my-new-feature` +5. 创建一个PR + +如果是发现Bug或者期望添加新功能,请提交[issue](../../issues)。 + +## 社区活动 + +### Fesjs 社区有奖征文活动 + +为了 Fes.js 开源项目更好的运转,同时回馈开源社区,社区推出有奖征文活动!欢迎大家投递实践经验,给社区用户,更广泛的开发者提供借鉴。 + +经验输出也可以帮助到你系统沉淀自有项目,梳理工作思路,也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享,赶快来参与吧。 +请戳:https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + - \ No newline at end of file