diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 71021677..710c5d40 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -2,7 +2,7 @@ name: Deploy Docs on: push: branches: - - master + - next paths: - 'docs/**/**' - 'package.json' @@ -14,11 +14,18 @@ jobs: uses: actions/checkout@v2.3.1 - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built. - run: npm install && npm run docs:build + run: yarn && yarn docs:build - - name: Build and Deploy - uses: JamesIves/github-pages-deploy-action@4.1.1 - with: - branch: master # The branch the action should deploy to. - folder: docs/.vuepress/dist # The folder the action should deploy. - token: ${{ secrets.QLIN_GITEE_TOKEN }} + - name: Deploy + uses: easingthemes/ssh-deploy@main + env: + # 本地.ssh文件下的私钥id_rsa，存在secrets的TOKEN中 + SSH_PRIVATE_KEY: ${{ secrets.HARRYWAN_PRIVATE_KEY }} + # 源目录，相对于$GITHUB_WORKSPACE根目录的路径 + SOURCE: docs/.vuepress/dist/ + # 服务器域名 + REMOTE_HOST: ${{ secrets.TX_IP }} + # 腾讯云默认用户名为root + REMOTE_USER: root + # 目标目录 + TARGET: /data/web-packages/p/fesjs/next 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 305b6191..58b16ef4 100644 --- a/build.config.js +++ b/build.config.js @@ -22,6 +22,7 @@ module.exports = { 'fes-plugin-vuex', 'fes-plugin-pinia', 'fes-plugin-windicss', + 'fes-plugin-watermark', ], copy: [], }; diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 9c839cb9..ae44308e 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -3,20 +3,14 @@ import type { DefaultThemeOptions } from '@vuepress/theme-default' import { navbar, sidebar } from './configs' const config: UserConfig = { - base: '/fesjs/', - // evergreen: process.env.NODE_ENV !== 'production', + base: '/', - head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]], + head: [['link', { rel: 'manifest', href: '/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/logo.png` }]], // site-level locales config locales: { '/': { - lang: 'en-US', - title: 'Fes.js', - description: 'A Good Front-end Application Solution', - }, - '/zh/': { lang: 'zh-CN', title: 'Fes.js', description: '一个好用的前端应用解决方案', @@ -30,7 +24,7 @@ const config: UserConfig = { docsDir: 'docs', - docsBranch: 'vue3', + docsBranch: 'next', // theme-level locales config locales: { @@ -41,21 +35,6 @@ const config: UserConfig = { * we don't need to set all of the locale fields */ '/': { - // navbar - navbar: navbar.en, - - // sidebar - sidebar: sidebar.en, - - // page meta - editLinkText: 'Edit this page on GitHub', - }, - - /** - * Chinese locale config - */ - '/zh/': { - // navbar navbar: navbar.zh, selectLanguageName: '简体中文', selectLanguageText: '选择语言', @@ -86,35 +65,17 @@ const config: UserConfig = { // other openInNewWindow: '在新窗口打开', }, + }, }, plugins: [ - // [ - // '@vuepress/plugin-docsearch', - // { - // apiKey: '', - // indexName: '', - // locales: { - // '/': { - // placeholder: 'Search Documentation', - // }, - // '/zh/': { - // placeholder: '搜索文档', - // }, - // }, - // }, - // ], ['@vuepress/plugin-pwa'], [ '@vuepress/plugin-pwa-popup', { locales: { '/': { - message: 'New content is available.', - buttonText: 'Refresh', - }, - '/zh/': { message: '发现新内容可用', buttonText: '刷新', }, diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts deleted file mode 100644 index 0b26649b..00000000 --- a/docs/.vuepress/configs/navbar/en.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type { NavbarConfig } from '@vuepress/theme-default' - -export const en: NavbarConfig = [ - { - text: 'Guide', - link: '/guide/', - }, - { - text: 'Config', - link: '/reference/config/', - }, - { - text: 'API', - link: '/reference/api/', - }, - { - text: 'Plugin', - link: '/reference/plugin/', - }, - { - text: 'CLI', - link: '/reference/cli/', - }, - { - text: 'More', - children: [ - { - text: '更新日志', - link: - 'https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md', - }, - { - text: 'v1 文档', - link: 'https://webank.gitee.io/fes.js/', - }, - ], - }, -] diff --git a/docs/.vuepress/configs/navbar/index.ts b/docs/.vuepress/configs/navbar/index.ts index c0955176..317d2684 100644 --- a/docs/.vuepress/configs/navbar/index.ts +++ b/docs/.vuepress/configs/navbar/index.ts @@ -1,2 +1 @@ -export * from './en' export * from './zh' diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts index a1ffea4d..e650cd4f 100644 --- a/docs/.vuepress/configs/navbar/zh.ts +++ b/docs/.vuepress/configs/navbar/zh.ts @@ -3,23 +3,23 @@ import type { NavbarConfig } from '@vuepress/theme-default' export const zh: NavbarConfig = [ { text: '指南', - link: '/zh/guide/', + link: '/guide/', }, { text: '编译时配置', - link: '/zh/reference/config/', + link: '/reference/config/', }, { text: 'API', - link: '/zh/reference/api/', + link: '/reference/api/', }, { text: '插件', - link: '/zh/reference/plugin/', + link: '/reference/plugin/', }, { text: 'CLI', - link: '/zh/reference/cli/', + link: '/reference/cli/', }, { text: '了解更多', @@ -33,6 +33,11 @@ export const zh: NavbarConfig = [ text: 'v1 文档', link: 'https://webank.gitee.io/fes.js/', }, + { + text: 'fes-design', + link: + 'http://fes-design.mumblefe.cn/', + }, ], }, ] diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts deleted file mode 100644 index cbd8c194..00000000 --- a/docs/.vuepress/configs/sidebar/en.ts +++ /dev/null @@ -1,80 +0,0 @@ -import type { SidebarConfig } from '@vuepress/theme-default' - -export const en: SidebarConfig = { - '/guide/': [ - { - // isGroup: true, - text: '介绍', - children: [ - '/guide/README.md', - '/guide/getting-started.md', - ], - }, - { - // isGroup: true, - text: '基础', - children: [ - '/guide/directory-structure.md', - '/guide/builder.md', - '/guide/config.md', - '/guide/runtime-config.md', - '/guide/env.md', - '/guide/route.md', - '/guide/plugin.md', - '/guide/template.md', - '/guide/mock.md', - ] - }, - { - // isGroup: true, - text: '样式和资源文件', - children: [ - '/guide/image.md', - '/guide/css.md', - '/guide/public.md', - ] - }, - "/guide/contributing.md", - "/guide/faq.md" - ], - '/reference/config/': [ - '/reference/config/README.md' - ], - '/reference/api/': [ - '/reference/api/README.md' - ], - '/reference/plugin/': [ - '/reference/plugin/README.md', - { - // isGroup: true, - text: 'Plugins', - children: [ - '/reference/plugin/plugins/access.md', - '/reference/plugin/plugins/enums.md', - '/reference/plugin/plugins/icon.md', - '/reference/plugin/plugins/jest.md', - '/reference/plugin/plugins/layout.md', - '/reference/plugin/plugins/locale.md', - '/reference/plugin/plugins/model.md', - '/reference/plugin/plugins/request.md', - '/reference/plugin/plugins/vuex.md', - '/reference/plugin/plugins/qiankun.md', - '/reference/plugin/plugins/windicss.md', - '/reference/plugin/plugins/sass.md', - '/reference/plugin/plugins/editor.md', - '/reference/plugin/plugins/pinia.md', - ], - }, - { - // isGroup: true, - text: '插件开发', - children: [ - '/reference/plugin/dev/README.md', - '/reference/plugin/dev/api.md' - ], - }, - ], - '/reference/cli/': [ - '/reference/cli/README.md', - ], -} diff --git a/docs/.vuepress/configs/sidebar/index.ts b/docs/.vuepress/configs/sidebar/index.ts index c0955176..317d2684 100644 --- a/docs/.vuepress/configs/sidebar/index.ts +++ b/docs/.vuepress/configs/sidebar/index.ts @@ -1,2 +1 @@ -export * from './en' export * from './zh' diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index 252dba2b..71d364a7 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -1,81 +1,82 @@ import type { SidebarConfig } from '@vuepress/theme-default' export const zh: SidebarConfig = { - '/zh/guide/': [ + '/guide/': [ { // isGroup: true, text: '介绍', children: [ - '/zh/guide/README.md', - '/zh/guide/getting-started.md', + '/guide/README.md', + '/guide/getting-started.md', ], }, { // isGroup: true, text: '基础', children: [ - '/zh/guide/directory-structure.md', - '/zh/guide/builder.md', - '/zh/guide/config.md', - '/zh/guide/runtime-config.md', - '/zh/guide/env.md', - '/zh/guide/route.md', - '/zh/guide/plugin.md', - '/zh/guide/template.md', - '/zh/guide/mock.md', - '/zh/guide/upgrade2.1.md', + '/guide/directory-structure.md', + '/guide/builder.md', + '/guide/config.md', + '/guide/runtime-config.md', + '/guide/env.md', + '/guide/route.md', + '/guide/plugin.md', + '/guide/template.md', + '/guide/mock.md', + '/guide/upgrade3.md', ] }, { // isGroup: true, text: '样式和资源文件', children: [ - '/zh/guide/image.md', - '/zh/guide/css.md', - '/zh/guide/public.md', + '/guide/image.md', + '/guide/css.md', + '/guide/public.md', ] }, - "/zh/guide/contributing.md", - "/zh/guide/faq.md" + "/guide/contributing.md", + "/guide/faq.md" ], - '/zh/reference/config/': [ - '/zh/reference/config/README.md' + '/reference/config/': [ + '/reference/config/README.md' ], - '/zh/reference/api/': [ - '/zh/reference/api/README.md' + '/reference/api/': [ + '/reference/api/README.md' ], - '/zh/reference/plugin/': [ - '/zh/reference/plugin/README.md', + '/reference/plugin/': [ + '/reference/plugin/README.md', { // isGroup: true, text: 'Plugins', children: [ - '/zh/reference/plugin/plugins/access.md', - '/zh/reference/plugin/plugins/enums.md', - '/zh/reference/plugin/plugins/icon.md', - '/zh/reference/plugin/plugins/jest.md', - '/zh/reference/plugin/plugins/layout.md', - '/zh/reference/plugin/plugins/locale.md', - '/zh/reference/plugin/plugins/model.md', - '/zh/reference/plugin/plugins/request.md', - '/zh/reference/plugin/plugins/vuex.md', - '/zh/reference/plugin/plugins/qiankun.md', - '/zh/reference/plugin/plugins/windicss.md', - '/zh/reference/plugin/plugins/sass.md', - '/zh/reference/plugin/plugins/editor.md', - '/zh/reference/plugin/plugins/pinia.md', + '/reference/plugin/plugins/access.md', + '/reference/plugin/plugins/enums.md', + '/reference/plugin/plugins/icon.md', + '/reference/plugin/plugins/jest.md', + '/reference/plugin/plugins/layout.md', + '/reference/plugin/plugins/locale.md', + '/reference/plugin/plugins/model.md', + '/reference/plugin/plugins/request.md', + '/reference/plugin/plugins/vuex.md', + '/reference/plugin/plugins/qiankun.md', + '/reference/plugin/plugins/windicss.md', + '/reference/plugin/plugins/sass.md', + '/reference/plugin/plugins/editor.md', + '/reference/plugin/plugins/pinia.md', + '/reference/plugin/plugins/watermark.md', ], }, { // isGroup: true, text: '插件开发', children: [ - '/zh/reference/plugin/dev/README.md', - '/zh/reference/plugin/dev/api.md' + '/reference/plugin/dev/README.md', + '/reference/plugin/dev/api.md' ], }, ], - '/zh/reference/cli/': [ - '/zh/reference/cli/README.md', + '/reference/cli/': [ + '/reference/cli/README.md', ], } diff --git a/docs/README.md b/docs/README.md index 9e43af8d..7158f58a 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,10 +4,10 @@ title: 首页 heroImage: /logo.png actions: - text: 快速上手 - link: /zh/guide/getting-started.html + link: /guide/getting-started.html type: primary - text: 项目简介 - link: /zh/guide/ + link: /guide/ type: secondary features: - title: Fast @@ -52,7 +52,7 @@ npx @fesjs/create-fes-app myapp # 安装依赖 npm install -# 运行 +# 运行 npm run dev ``` @@ -65,3 +65,6 @@ npm run dev | --- | --- | --- | | [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | | | + + + diff --git a/docs/zh/guide/builder.md b/docs/guide/builder.md similarity index 100% rename from docs/zh/guide/builder.md rename to docs/guide/builder.md diff --git a/docs/guide/config.md b/docs/guide/config.md index b8bbf5bb..d201c129 100644 --- a/docs/guide/config.md +++ b/docs/guide/config.md @@ -1,87 +1,104 @@ -# 配置 +# 编译时配置 -Fes.js 约定 `.fes.js` 文件为项目编译需要配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。 +Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。 - -一份常见的配置示例如下： +一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))： ```js -export default { +import { defineBuildConfig } from '@fesjs/fes'; + +export default defineBuildConfig({ base: '/foo/', publicPath: '/', devServer: { - port: 8080 + port: 8080, }, mock: { - prefix: '/v2' + prefix: '/v2', }, proxy: { '/v2': { - 'target': 'https://api.douban.com/', - 'changeOrigin': true, + target: 'https://api.douban.com/', + changeOrigin: true, }, }, layout: { - title: "Fes.js", + title: 'Fes.js', footer: 'Created by MumbelFe', multiTabs: false, - menus: [{ - name: 'index' - }, { - name: 'onepiece' - }, { - name: 'store' - }, { - name: 'simpleList' - }] - } -} + menus: [ + { + name: 'index', + }, + { + name: 'onepiece', + }, + { + name: 'store', + }, + { + name: 'simpleList', + }, + ], + }, +}); ``` ## 本地临时配置文件 + 可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。 + ```js // .fes.js export default { mock: false }; // .fes.local.js -export default { +export default { mock: true, devServer: { port: 8080 } }; ``` + 最终的配置是： + ```js -{ +{ mock: true, devServer: { port: 8080 } }; ``` + ::: warning -`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，务必不要提交到 `git` 仓库中。 +`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。 ::: ## 多环境多份配置 + 可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。 比如配置如下： + ```js // .fes.js export default { mock: false }; // .fes.uat.js -export default { +export default { mock: true, devServer: { port: 8080 } }; ``` + 当我们运行： + ```bash FES_ENV=uat fes dev ``` + 这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是： + ```js -{ +{ mock: true, devServer: { port: 8080 } }; @@ -89,8 +106,8 @@ FES_ENV=uat fes dev ## 优先级 -本地临时配置 > 环境配置 > 基础配置 +本地临时配置 > 环境配置 > 基础配置 ::: tip 如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。 -::: +::: diff --git a/docs/guide/directory-structure.md b/docs/guide/directory-structure.md index dc28cf9f..bf0ffb89 100644 --- a/docs/guide/directory-structure.md +++ b/docs/guide/directory-structure.md @@ -1,6 +1,7 @@ # 目录结构 在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js 遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的： + ``` fes-template ├── package.json @@ -8,9 +9,10 @@ fes-template ├── mock.js ├── .fes.js ├── .env +├── index.html ├── dist ├── public -│ └── index.html +│ └── logo.png └── src ├── .fes └── pages @@ -19,113 +21,109 @@ fes-template ``` ### package.json + ```json { - "name": "@fesjs/template", - "version": "2.0.0", - "description": "fes项目模版", - "scripts": { - "build": "fes build", - "prod": "FES_ENV=prod fes build", - "analyze": "ANALYZE=1 fes build", - "dev": "fes dev", - "test": "fes test" - }, - "keywords": [ - "管理端", - "fes", - "fast", - "easy", - "strong" - ], - "files": [ - ".eslintrc.js", - ".gitignore", - ".fes.js", - ".fes.prod.js", - "mock.js", - "package.json", - "README.md", - "tsconfig.json", - "/src", - "/config" - ], - "repository": { - "type": "git", - "url": "git+https://github.com/WeBankFinTech/fes.js.git", - "directory": "packages/fes-template" - }, - "author": "harrywan", - "license": "MIT", - "bugs": { - "url": "https://github.com/WeBankFinTech/fes.js/issues" - }, - "homepage": "https://github.com/WeBankFinTech/fes.js#readme", - "publishConfig": { - "access": "public" - }, - "devDependencies": { - "@webank/eslint-config-webank": "0.3.1" - }, - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-access": "^2.0.0", - "@fesjs/plugin-layout": "^3.0.0", - "@fesjs/plugin-locale": "^3.0.0", - "@fesjs/plugin-model": "^2.0.0", - "@fesjs/plugin-enums": "^2.0.0", - "@fesjs/plugin-jest": "^2.0.0", - "@fesjs/plugin-vuex": "^2.0.0", - "@fesjs/plugin-request": "^2.0.0", - "@fesjs/plugin-qiankun": "^2.0.0", - "@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", - "vue": "^3.0.5", - "vuex": "^4.0.0" - }, - "private": true + "name": "@fesjs/template", + "version": "2.0.0", + "description": "fes项目模版", + "scripts": { + "build": "fes build", + "prod": "FES_ENV=prod fes build", + "analyze": "ANALYZE=1 fes build", + "dev": "fes dev", + "test": "fes test" + }, + "keywords": ["管理端", "fes", "fast", "easy", "strong"], + "files": [".eslintrc.js", ".gitignore", ".fes.js", ".fes.prod.js", "mock.js", "package.json", "README.md", "tsconfig.json", "/src", "/config"], + "repository": { + "type": "git", + "url": "git+https://github.com/WeBankFinTech/fes.js.git", + "directory": "packages/fes-template" + }, + "author": "harrywan", + "license": "MIT", + "bugs": { + "url": "https://github.com/WeBankFinTech/fes.js/issues" + }, + "homepage": "https://github.com/WeBankFinTech/fes.js#readme", + "publishConfig": { + "access": "public" + }, + "devDependencies": { + "@webank/eslint-config-webank": "0.3.1" + }, + "dependencies": { + "@fesjs/fes": "^2.0.0", + "@fesjs/builder-webpack": "^2.0.0", + "@fesjs/plugin-access": "^2.0.0", + "@fesjs/plugin-layout": "^3.0.0", + "@fesjs/plugin-locale": "^3.0.0", + "@fesjs/plugin-model": "^2.0.0", + "@fesjs/plugin-enums": "^2.0.0", + "@fesjs/plugin-jest": "^2.0.0", + "@fesjs/plugin-vuex": "^2.0.0", + "@fesjs/plugin-request": "^2.0.0", + "@fesjs/plugin-qiankun": "^2.0.0", + "@fesjs/plugin-sass": "^2.0.0", + "@fesjs/plugin-monaco-editor": "^2.0.0", + "@fesjs/plugin-windicss": "^2.0.0", + "@fesjs/fes-design": "^0.5.0", + "vue": "^3.0.5", + "vuex": "^4.0.0" + }, + "private": true } ``` -其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。 + +其中`@fesjs/fes`是 Fes.js 核心依赖，另外以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。`@fesjs/builder-` 开头的会被注册为构建器。 ### tsconfig.json + 解决 `@fesjs/fes` 和使用 `@` 的 API 提示 ### .fes.js + 配置文件，包含 Fes.js 内置功能和安装的其他插件配置。 ### mock.js + `mock` 数据的配置文件。 ### .env + 定义环境变量。 比如 `.env` 文件内容如下： + ``` PORT=8888 FES_ENV=prod ``` + 等同于 node 端运行时，设置如下： + ``` process.env.PORT = '8888'; process.env.FES_ENV = 'prod'; ``` - ### dist 目录 + 执行 `fes build` 后，产物默认会存放在这里。 ## public 目录 + 此目录下所有文件为静态资源，会被复制到输出路径。 -### index.html +## index.html + 默认的 `html` 模板文件，如果删除此 `html` 则会使用内置的 `html` 模板文件。 ## src 目录 ### .fes 目录 + 临时文件目录，比如入口文件、路由等，都会被临时生成到这里。 :::warning @@ -133,7 +131,9 @@ process.env.FES_ENV = 'prod'; ::: ### pages 目录 + 所有路由组件文件存放在这里。 ### app.js -运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。 \ No newline at end of file + +运行时配置文件，可以在这里扩展运行时的能力，比如修改路由等。 diff --git a/docs/guide/faq.md b/docs/guide/faq.md index 80cba6c7..307d253c 100644 --- a/docs/guide/faq.md +++ b/docs/guide/faq.md @@ -1,2 +1 @@ -# 常见问题 - +# 常见问题 \ No newline at end of file diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 3234b428..75e18253 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -1,13 +1,17 @@ # 快速上手 ## 依赖环境 -首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。 + +首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。 + ```bash # 打印 node 版本 node -v -v10.13.0 +v12.13.0 ``` + 推荐使用 yarn 管理 npm 依赖 + ```bash # 全局安装 yarn npm i yarn -g @@ -17,21 +21,26 @@ npm i yarn -g 这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。 -##### 步骤1 创建工作空间 +##### 步骤 1 创建工作空间 + 如果工作空间不存在，则先创建： + ```bash # 创建目录 workspace mkdir workspace # 进入目录 workspace cd workspace ``` + 如果工作空间已存在，则直接进入 + ```bash # 进入目录 workspace cd workspace ``` -##### 步骤2 在工作空间创建项目 +##### 步骤 2 在工作空间创建项目 + @@ -52,22 +61,22 @@ npx @fesjs/create-fes-app myapp - 如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在： 目录已存在提示 你可以选择： -- `Overwrite` 删除项目文件夹，重新创建项目。 -- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。 + +- `Overwrite` 删除项目文件夹，重新创建项目。 +- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。 当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`： 选择模板类型 -你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。 +你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。 +##### 步骤 3 安装依赖 -##### 步骤3 安装依赖 @@ -75,7 +84,7 @@ npx @fesjs/create-fes-app myapp # 进入项目目录 cd myapp # 安装依赖 -yarn +yarn ``` @@ -86,13 +95,14 @@ yarn # 进入项目目录 cd myapp # 安装依赖 -npm i +npm i ``` -## 启动项目 +## 启动项目 + @@ -130,15 +140,14 @@ Starting the development server http://localhost:8080 ... - Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。 - home ## 部署发布 ### 构建 + @@ -173,6 +182,7 @@ npm run build 构建产物默认生成到 ./dist 下，然后通过 tree 命令查看。 + ```base tree ./dist @@ -188,8 +198,9 @@ dist ``` ### 本地验证 + 发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。 - ### 部署 -本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。 \ No newline at end of file + +本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。 diff --git a/docs/guide/runtime-config.md b/docs/guide/runtime-config.md index 11e24a73..cfc8222e 100644 --- a/docs/guide/runtime-config.md +++ b/docs/guide/runtime-config.md @@ -8,20 +8,75 @@ Fes.js 框架跟传统开发模式不一样。传统开发模式中用户编写 例如： -plugin-acess插件定义运行时配置项： +plugin-access 插件定义运行时配置项： + ```js api.addRuntimePluginKey(() => 'access'); ``` -plugin-acess插件读取配置项： + +plugin-access 插件读取配置项： + ```js const runtimeConfig = plugin.applyPlugins({ key: 'access', type: ApplyPluginsType.modify, - initialValue: {} + initialValue: {}, }); ``` 而用户则只需要配置： + +```js +// app.js +import { defineBuildConfig } from '@fesjs/fes'; + +export default defineRuntimeConfig({ + access: memo => ({ + ...memo + unAccessHandler({ + router, to, from, next + }) { + // 处理逻辑 + }, + noFoundHandler({ + router, to, from, next + }) { + // 处理逻辑 + }, + }), +}); +``` + +## 配置智能提示 + +配置可以单独导出，也可以通过 `defineRuntimeConfig` 工具函数获取类型提示。 + +方式一（推荐，有类型提示）： + +```js +// app.js +import { defineBuildConfig } from '@fesjs/fes'; + +export default defineRuntimeConfig({ + access: memo => ({ + ...memo + unAccessHandler({ + router, to, from, next + }) { + // 处理逻辑 + }, + noFoundHandler({ + router, to, from, next + }) { + // 处理逻辑 + }, + }), + // ...其他配置项 +}); +``` + +方式二： + ```js // app.js export const access = memo => ({ @@ -37,7 +92,6 @@ export const access = memo => ({ // 处理逻辑 }, }); - ``` ## 配置项 @@ -49,6 +103,7 @@ beforeRender(lastOpts) 在渲染之前执行，执行`action`过程中显示 `loading` 配置的组件，执行结果作为参数 `initialState` 传给 `modifyClientRenderOpts`。 示例： + ```js // app.js import { access } from '@fesjs/fes'; @@ -65,31 +120,32 @@ export function beforeRender(lastOpts) { setTimeout(() => { setRole('admin'); resolve({ - userName: 'harrywan' + userName: 'harrywan', }); }, 1000); }); - } - } -}; + }, + }; +} ``` ### patchRoutes patchRoutes({routes }) - 修改路由。 比如在最前面添加一个 /foo 路由： -``` + +```js export function patchRoutes({ routes }) { - routes.unshift({ - path: '/foo', - component: require('@/extraRoutes/foo').default, - }); + routes.unshift({ + path: '/foo', + component: require('@/extraRoutes/foo').default, + }); } ``` + :::tip 直接修改 `routes`, 不需要返回 ::: @@ -99,18 +155,20 @@ export function patchRoutes({ routes }) { modifyClientRenderOpts(lastOpts) 修改 `clientRender` 参数。参数是一个对象： -- routes，路由配置信息 -- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。 -- initialState， 初始化数据，`beforeRender` 运行得到的数据。 + +- routes，路由配置信息 +- rootElement， 渲染的根节点，默认是 `#app`，可通过配置 `mountElementId` 修改。 +- initialState， 初始化数据，`beforeRender` 运行得到的数据。 比如在微前端里动态修改渲染根节点： + ```js let isSubApp = false; export function modifyClientRenderOpts(lastOpts) { - return { - ...lastOpts, - rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement, - }; + return { + ...lastOpts, + rootElement: isSubApp ? 'sub-root' : lastOpts.rootElement, + }; } ``` @@ -120,12 +178,13 @@ rootContainer(LastRootContainer, args) 修改交给 Vue 渲染时的根组件，默认是 ``。 -- LastRootContainer，上一个插件修改后的结果。 -- args，包含： - - routes，全量路由配置 - - plugin，运行时插件机制 +- LastRootContainer，上一个插件修改后的结果。 +- args，包含： + - routes，全量路由配置 + - plugin，运行时插件机制 + +比如在可以包一层 DIV： -比如在可以包一层DIV： ```js export function rootContainer(container) { return () => { @@ -133,8 +192,8 @@ export function rootContainer(container) {
- ) - } + ); + }; } ``` @@ -145,14 +204,14 @@ onAppCreated({app}) 创建 app 实例后触发。 比如用于安装 Vue 插件： + ```js -import { createRouter } from "vue-router"; +import { createRouter } from 'vue-router'; export function onAppCreated({ app }) { const router = createRouter(); app.use(router); } - ``` ### render @@ -163,22 +222,22 @@ render(oldRender: Function) 比如用于渲染之前做权限校验。 - - ### onRouterCreated onRouterCreated({router}) -生成router时触发。 +生成 router 时触发。 比如用于收集切换路由的记录： + ```js export function onRouterCreated({ router }) { router.afterEach((to, from) => { - console.log(to) + console.log(to); }); } ``` ## 更多配置项 -Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。 \ No newline at end of file + +Fes.js 允许插件注册运行时配置，如果你使用插件，肯定会在插件里找到更多运行时的配置项。 diff --git a/docs/guide/template.md b/docs/guide/template.md index 1f7d85ee..d03628a4 100644 --- a/docs/guide/template.md +++ b/docs/guide/template.md @@ -1,56 +1,52 @@ # HTML 模板 -Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认模板内容是： +Fes.js 默认模板内容是： + ```html - - - - - <%= htmlWebpackPlugin.options.title %> - - -
- + + + + + <%= title %> + + +
+ ``` -## 自定义模板 -在 `src/public` 文件夹中创建`index.html`，Fes.js 约定如果这个文件存在，则会替换默认模板。 +## 修改页面标题 -## 模板配置 -在配置文件（`.fes.js`）中配置 `html`，把[配置](https://github.com/jantimon/html-webpack-plugin#options)的对象作为参数传入 `html-webpack-plugin` 实例。 - -举个 :chestnut: ： ```js +// .fes.js export default { - html: { - title: '海贼王' - } -} + title: '这是页面标题', +}; ``` -页面的标题会设置成'海贼王'。 + +页面的标题会设置成 `这是页面标题`。 ## 模板变量 -当然我们也可以手动编写模板，在模板中添加`link`、`link`、`meta`等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下： -- **htmlWebpackPlugin**，特定于此插件的数据 -- **webpackConfig**，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。 -- **compilation**，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source() +模版中可以使用的变量： + +- `NODE_ENV`: Node.js 环境变量 +- `FES_ENV`: Fes.js 环境变量 +- `BASE_URL`: publicPath +- `.env.**`: 文件中以 `FES_APP_` 开头的变量 举个 🌰 ： -```html - + +```env +# .env +FES_APP_HELLO_WORLD=hello world ``` -除上述 `html-webpack-plugin` 插件提供的变量外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内： -- `NODE_ENV` -- `FES_ENV` -- `.env` 文件中以 `FES_APP_` 开头的变量 - -举个 🌰 ： - ```html - -``` \ No newline at end of file + + +
<%= FES_APP_HELLO_WORLD %>
+ +``` diff --git a/docs/zh/guide/upgrade2.1.md b/docs/guide/upgrade3.md similarity index 96% rename from docs/zh/guide/upgrade2.1.md rename to docs/guide/upgrade3.md index dc660792..35f589e1 100644 --- a/docs/zh/guide/upgrade2.1.md +++ b/docs/guide/upgrade3.md @@ -1,6 +1,6 @@ -# 从 2.0.x 迁移到 2.1.x +# 从 2.0.x 迁移到 3.0.x -## 版本 2.1.x 的 break +## 版本 3.0.x 的 break 1. 编译时的 [base](../reference/config/#base) 配置，移到了 [router.base](../reference/config/#router) 下。 2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。 diff --git a/docs/reference/config/README.md b/docs/reference/config/README.md index 70b83997..92d59d28 100644 --- a/docs/reference/config/README.md +++ b/docs/reference/config/README.md @@ -2,9 +2,36 @@ sidebar: auto --- -# 配置 +## 配置文件 -## alias +Fes.js 内置了比较通用的构建方式，如果没有个性化需求，不需要修改构建相关的配置。 + +### 配置文件解析 + +Fes.js 会自动解析项目根目录下的 `.fes.js` 文件。 + +最基础的配置文件是这样的： + +```js +// .fes.js +export default {}; +``` + +可以通过环境变量 `FES_ENV` 进行环境差异化配置，当我们运行 `FES_ENV=prod fes dev` 时，Fes.js 会找到 `.fes.js` 和 `.fes.prod.js`(可选) 的配置文件进行 `deepmerge`。 + +### 配置智能提示 + +可以通过 `defineBuildConfig` 工具函数获取类型提示： + +```js +import { defineBuildConfig } from '@fesjs/fes'; + +export default defineBuildConfig({}); +``` + +## 共享配置 + +### alias - 类型： `object` - 默认值： `{}` @@ -24,29 +51,7 @@ export default { 然后 `import('main')`，实际上是 `import('src/assets/styles/main')`。 -## analyze - -- 类型： `object` -- 默认值： - -```js -{ - analyzerMode: process.env.ANALYZE_MODE || 'server', - analyzerPort: process.env.ANALYZE_PORT || 8888, - openAnalyzer: process.env.ANALYZE_OPEN !== 'none', - // generate stats file while ANALYZE_DUMP exist - generateStatsFile: !!process.env.ANALYZE_DUMP, - statsFilename: process.env.ANALYZE_DUMP || 'stats.json', - logLevel: process.env.ANALYZE_LOG_LEVEL || 'info', - defaultSizes: 'parsed' // stat // gzip -} -``` - -- 详情： - - 构建结果分析，当配置 `process.env.ANALYZE` 时开启，例如执行`ANALYZE=1 fes build` - -## autoprefixer +### autoprefixer - 类型： `object` - 默认值： @@ -61,7 +66,7 @@ export default { [postcss autoprefixer 插件](https://github.com/postcss/autoprefixer#options) 配置。 -## base +### base - 类型： `string` - 默认值： `''` @@ -69,57 +74,11 @@ export default { 设置路由前缀，通常用于部署到非根目录。比如你有路由 `/pageA`、`/pageB`，然后设置了 `base` 为 `/manage/`，那么就可以通过 `/manage/pageA`、`/manage/pageB` 访问到它们。 -## chainWebpack +::: warning 2.1.x 已废弃 +2.1.x 版本请使用 router.base 代替 +::: -- 类型：`function` -- 默认值：`null` -- 详情： - - 通过 [webpack-chain](https://github.com/neutrinojs/webpack-chain) 的 API 修改 webpack 配置。 - -示例： - -```js -export default { - chainWebpack(memo, { env, webpack }) { - // 删除 fes 内置插件 - memo.plugins.delete('copy'); - }, -}; -``` - -## cssLoader - -- 类型： `object` -- 默认值： `''` -- 详情： - - 设置 [css-loader 配置项](https://github.com/webpack-contrib/css-loader#options)。 - -## copy - -- 类型： `Array(string) || Array(object)` -- 默认值： `[]` -- 详情： - - 设置要复制到输出目录的文件、文件夹。 - - 配置约定 `from-to` 规则， 其中 `from` 是相对于 `cwd` 的路径，`to` 是相对于输出路径的路径。 - -- 示例： - -```js -export default { - copy: { - from: '/src/assets/images', - to: 'assets/images', - }, -}; -``` - -上面示例中，实现了将 `cwd` 路径中的 `/src/assets/images` 文件夹，在编译完成后，`copy` 到输出路径下的 `assets/images` 文件夹。 - -## define +### define - 类型： `object` - 默认值： `{}` @@ -137,29 +96,7 @@ export default { 然后你代码里写 `console.log(__DEV__)`，会被编译成 `console.log('development')`。 -## devServer - -- 类型： `object` -- 默认值： `{}` -- 详情： - - 配置开发服务器。支持以下子配置项： - - - port，端口号，默认 `8000` - - host，默认 `localhost` - - https，是否启用 https server，同时也会开启 HTTP/2 - - 启用 port 和 host 也可以通过环境变量 `PORT` 和 `HOST` 临时指定。 - -## devtool - -- 类型： `string` -- 默认值： `cheap-module-source-map` in dev, `undefined` in build -- 详情： - - 用户配置 sourcemap 类型。详见 [ webpack#devtool 配置](https://webpack.js.org/configuration/devtool/#devtool)。 - -## dynamicImport +### dynamicImport - 类型： `boolean` - 默认值： false @@ -167,97 +104,7 @@ export default { 路由是否按需加载 -## exportStatic - -- 类型： `object` -- 默认值： `{}` -- 详情： - -配置 `html` 的输出形式，默认只输出 `index.html`。 - -如果开启 `exportStatic`，则会针对每个路由输出 `html` 文件。 - -比如以下路由， - -``` -/ -/users -/list -``` - -不开启 `exportStatic` 时，输出， - -``` -- index.html -``` - -设置 `exportStatic: {}` 后，输出， - -``` -- index.html -- users.html -- list.html -``` - -## externals - -- 类型：`object` -- 默认值：`{}` -- 详情： - - 设置哪些模块可以不被打包，通过 ` + ``` + +::: tip +由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例 + +`fesjs`导出了vuex实例`store`，如在app.js文件中 +```js +import { store, GETTER_TYPES } from '@fesjs/fes'; +console.log(store.getters[GETTER_TYPES.user.address]) +``` +::: + +## vuex插件 +stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html) ## API + +### store +* 类型 `Object` +* vuex实例 ### MUTATION_TYPES * 类型 `Object` * mutation的所有事件类型 diff --git a/docs/reference/plugin/plugins/watermark.md b/docs/reference/plugin/plugins/watermark.md new file mode 100644 index 00000000..5708c11e --- /dev/null +++ b/docs/reference/plugin/plugins/watermark.md @@ -0,0 +1,72 @@ +# @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, destroyWatermark } from '@fesjs/fes'; + +createWatermark({ content: '我是水印' }); // 生成水印 +destroyWatermark(); // 销毁水印 +``` + +默认参数是： +```js +{ + content = '请勿外传', + container = document.body, + width = 300, + height = 300, + textAlign = 'center', + textBaseline = 'middle', + fontSize = '14px', + fontFamily = 'Microsoft Yahei', + fillStyle = 'rgba(184, 184, 184, 0.3)', + rotate = 25, + zIndex = 99999, + timestamp = 'YYYY-MM-DD HH:mm' +} +``` + +如果不需要时间戳，则可以设置`timestamp`为`false`。 \ No newline at end of file diff --git a/docs/reference/plugin/plugins/windicss.md b/docs/reference/plugin/plugins/windicss.md index 77992602..be28d80b 100644 --- a/docs/reference/plugin/plugins/windicss.md +++ b/docs/reference/plugin/plugins/windicss.md @@ -19,8 +19,8 @@ 在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)： -``` -{ +```js +export default { windicss: { root: './', } diff --git a/docs/zh/README.md b/docs/zh/README.md deleted file mode 100644 index 32b6fa76..00000000 --- a/docs/zh/README.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -home: true -title: 首页 -heroImage: /logo.png -actions: - - text: 快速上手 - link: /zh/guide/getting-started.html - type: primary - - text: 项目简介 - link: /zh/guide/ - type: secondary -features: - - title: Fast - details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、Svg等插件，可以满足大部分日常开发需求。 - - title: Easy - details: 基于Vue.js 3.0，上手简单。贯彻 “约定优于配置” 思想，在设计插件上尽可能用约定替代配置，依然提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。 - - title: Strong - details: 仅仅需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。 - - title: 可扩展 - details: 借鉴 UMI 实现完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 - - title: 面向未来 - details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。 - - title: 令人愉悦 - details: 我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。 -footer: MIT Licensed | Copyright © 2020-present Webank ---- - -## 像数 1, 2, 3 一样容易 - - - - -```bash -# 创建模板 -yarn create @fesjs/fes-app myapp - -# 安装依赖 -yarn - -# 运行 -yarn dev -``` - - - - - -```bash -# 创建模板 -npx @fesjs/create-fes-app myapp - -# 安装依赖 -npm install - -# 运行 -npm run dev -``` - - - - -## 反馈 - -| Github Issue | 微信群 | Fes.js开源运营小助手 | -| --- | --- | --- | -| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | | | - diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md deleted file mode 100644 index 9e577911..00000000 --- a/docs/zh/guide/README.md +++ /dev/null @@ -1,76 +0,0 @@ - -# 介绍 - - - -## 痛点 - -在开发一个前端项目之前，我们可能需要做如下准备工作： -- 搭建开发环境 -- 约定代码规范 -- 封装API请求 -- 配置路由 -- 实现布局、菜单、导航 -- 实现登录 -- 权限管理 -- ... - -除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 - -## Fes.js 是什么？ - -Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 - -它主要具备以下特点： -- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 - -- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。 - -- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。 - -- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 - -- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。 - - -## Fes.js 如何工作？ - -### 架构 - -架构 - -Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。 - -### 插件和插件集 -

- 插件 -

-Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 - -### .fes 临时文件 -.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。 - -你通常会在 .fes 下看到以下目录 -``` -+ .fes - + core # 内部插件生成 - + pluginA # 外部插件生成 - + presetB # 外部插件生成 - + fes.js # 入口文件 -``` - -临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。 - -你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。 - - - -## 为什么不是 ...? - -### Vue CLI - -Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。 - -### UMI - -UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。UMI 是基于 React 封装的应用级框架，贯彻着函数式编程的思维。而 Vue 有所不同，虽然 Vue 3.0 向函数式迈了一大步，但大家可能依然喜欢编写 `.vue`文件，而非 `.jsx` 文件。两种思维方式会导致部分API设计上有所差异，虽然 UMI 有 `plugin-vue` ，但不太 "vue"。推荐喜欢 React 的同学使用 UMI。 diff --git a/docs/zh/guide/config.md b/docs/zh/guide/config.md deleted file mode 100644 index d201c129..00000000 --- a/docs/zh/guide/config.md +++ /dev/null @@ -1,113 +0,0 @@ -# 编译时配置 - -Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。 - -一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))： - -```js -import { defineBuildConfig } from '@fesjs/fes'; - -export default defineBuildConfig({ - base: '/foo/', - publicPath: '/', - devServer: { - port: 8080, - }, - mock: { - prefix: '/v2', - }, - proxy: { - '/v2': { - target: 'https://api.douban.com/', - changeOrigin: true, - }, - }, - layout: { - title: 'Fes.js', - footer: 'Created by MumbelFe', - multiTabs: false, - menus: [ - { - name: 'index', - }, - { - name: 'onepiece', - }, - { - name: 'store', - }, - { - name: 'simpleList', - }, - ], - }, -}); -``` - -## 本地临时配置文件 - -可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。 - -```js -// .fes.js -export default { mock: false }; - -// .fes.local.js -export default { - mock: true, - devServer: { port: 8080 } -}; -``` - -最终的配置是： - -```js -{ - mock: true, - devServer: { port: 8080 } -}; -``` - -::: warning -`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。 -::: - -## 多环境多份配置 - -可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。 - -比如配置如下： - -```js -// .fes.js -export default { mock: false }; - -// .fes.uat.js -export default { - mock: true, - devServer: { port: 8080 } -}; -``` - -当我们运行： - -```bash -FES_ENV=uat fes dev -``` - -这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是： - -```js -{ - mock: true, - devServer: { port: 8080 } -}; -``` - -## 优先级 - -本地临时配置 > 环境配置 > 基础配置 - -::: tip -如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。 -::: diff --git a/docs/zh/guide/contributing.md b/docs/zh/guide/contributing.md deleted file mode 100644 index b17a1746..00000000 --- a/docs/zh/guide/contributing.md +++ /dev/null @@ -1,70 +0,0 @@ -# 贡献指南 - -## 概览 - -项目仓库借助于 [Yarn Classic 工作区](https://classic.yarnpkg.com/zh-Hans/docs/workspaces) 来实现 [Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，在 `packages` 目录下存放了多个互相关联的独立 Package 。 - -- `@fesjs/create-fes-app`: 创建项目模板模块。提供`create-fes-app`命令，提供创建多种类型项目模板的能力。 - -- `@fesjs/fes`: 入口模块。提供`fes`命令和 API 入口。 - -- `@fesjs/compiler`: 编译时插件管理模块。定义插件的生命周期、插件配置、插件通讯机制等。 - -- `@fesjs/runtime`: 运行时插件模块。集成了vue-router，定义运行时插件生命周期、插件通讯机制。 - -- `@fesjs/preset-build-in`: 内置插件集。包含`dev`、`build`等命令，集成webpack5+babel，提供方便编写插件的API，入口文件处理，路由处理等能力。 - -- `@fesjs/fes-template`: 适用于PC类型的模板项目。 - -- `@fesjs/fes-template-h5`: 适用于H5类型的模板项目。 - -- `@fesjs/plugin-${name}`: 官方插件。 - -- `@fesjs/fes`: 是 `@fesjs/compiler` + `@fesjs/runtime` + `@fesjs/preset-build-in` 的封装。用户只需要安装此依赖和额外的插件或者插件集。 - -## 开发配置 - -开发要求： - -- [Node.js](http://nodejs.org) **version 12+** -- [Yarn v1 classic](https://classic.yarnpkg.com/zh-Hans/docs/install) - -克隆代码仓库，并安装依赖： - -```bash -yarn -``` - -监听源文件修改： - -```bash -yarn build -``` - -打开另一个终端，开始开发项目文档网站： - -```bash -yarn docs:dev -``` - -本项目开发使用的一些主要工具： - -- [Jest](https://jestjs.io/) 用于单元测试 -- [ESLint](https://eslint.org/) + [Prettier](https://prettier.io/) 用于代码检查和格式化 -- [@umi/father](https://github.com/umijs/father) 用于将ES6语法编译成ES5或者CommonJS - -## 开发脚本 - -### `yarn build` - -`build` 命令会使用 `father-build` 将 ES6 编译为 CommonJS。 - -本项目在编写Node端的代码时也用ES6，所以你在克隆代码仓库后，可能需要先执行该命令来确保项目代码可以顺利运行，因为编译后的 JS 文件被 `.gitignore` 排除在仓库以外了。 -### `yarn docs:dev` -`docs:` 前缀表明，这些命令是针对文档 (documentation) 进行操作的，即 `docs` 目录。 -使用 Vue Press在本地启动文档网站服务器，用于实时查看文档效果。 - -### 调试功能 -在开发完插件代码后，需要在template项目中验证功能 -- 进入`packages/template`目录 -- 执行`yarn dev` \ No newline at end of file diff --git a/docs/zh/guide/css.md b/docs/zh/guide/css.md deleted file mode 100644 index d6651036..00000000 --- a/docs/zh/guide/css.md +++ /dev/null @@ -1,48 +0,0 @@ -# 使用 css - -:::tip -本文档以 css 为示例，把后缀换成 `.less` 同样适用。 -::: - -## 全局样式 -Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会被自动引入到入口文件最前面。 - -比如用于覆盖样式， -```css -.layout-content { - max-width: 1000px; -} -``` - -## 组件内样式 -```vue - -``` - -## 引入第三方样式 -可以直接通过 `import` 引入第三方组件，当然最好在入口文件`app.js`中引入 -``` js -// src/app.js -import 'bootstrap/dist/css/bootstrap.css' -``` - -## CSS Modules -支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用： -```vue - -``` - - -## API - -### useModel - -**useModel(name)** -- **类型**：函数 - -- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。 -- **参数**： - - name，传入 Model 文件名 - diff --git a/docs/zh/reference/plugin/plugins/pinia.md b/docs/zh/reference/plugin/plugins/pinia.md deleted file mode 100644 index 880fd510..00000000 --- a/docs/zh/reference/plugin/plugins/pinia.md +++ /dev/null @@ -1,90 +0,0 @@ -# @fesjs/plugin-pinia - -## 介绍 -集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。 - - -为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出： -```js -import { defineStore } from 'pinia'; -``` - -约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 -``` -└── src - ├── pages - │ └── index.vue - └── stores - │ ├── plugin-logger.js - │ ├── user.js - └── app.js -``` - -## 启用方式 -在 `package.json` 中引入依赖： -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-pinia": "^2.0.0", - "pinia": "^2.0.11" - } -} -``` - -## API - -### pinia -`createPinia`执行后创建的实例。 - -```js -import { pinia } from '@fesjs/fes' -``` - -## 使用 - -### 定义 store -我们在 `src/store/main.js`中： -```js -import { defineStore } from 'pinia' - -// useStore could be anything like useUser, useCart -// the first argument is a unique id of the store across your application -export const useStore = defineStore('main', { - // other options... -}) -``` - -### setup - -```js -import { useStore } from '@/store/main' -export default { - setup(){ - const store = useStore() - } -} -``` - -### 非setup -比如在app.js中: -```js -import { pinia } from '@fesjs/fes' - -export const beforeRender = { - loading: , - action() { - const { setRole } = accessApi; - return new Promise((resolve) => { - setTimeout(() => { - const store = useStore(pinia); - store.$patch({ - userName: '李雷', - role: 'admin' - }); - setRole('admin'); - }, 1000); - }); - } -}; -``` \ No newline at end of file diff --git a/docs/zh/reference/plugin/plugins/qiankun.md b/docs/zh/reference/plugin/plugins/qiankun.md deleted file mode 100644 index 61706c49..00000000 --- a/docs/zh/reference/plugin/plugins/qiankun.md +++ /dev/null @@ -1,271 +0,0 @@ -# @fesjs/plugin-qiankun - -Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-qiankun](https://umijs.org/zh-CN/plugins/plugin-qiankun#MicroApp) 实现，喜欢 React 的同学推荐直接用 Umi。 - -## 启用方式 -在 `package.json` 中引入依赖： -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-qiankun": "^2.0.0" - }, -} -``` - -## 介绍 -有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~ - -可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。 - -## 主应用配置 - -### 第一步：注册子应用 -```js -export default { - qiankun: { - main: { - // 注册子应用信息 - apps: [ - { - name: 'app1', // 唯一 id - entry: '//localhost:8001', // html entry - props: {} // 传递给子应用的数据 - }, - { - name: 'app2', // 唯一 id - entry: '//localhost:8002', // html entry - }, - ], - }, - }, -}; -``` - -### 第二步：装载子应用 - -#### 使用路由绑定的方式 -:::warning -主应用和子应用需要自行适配路由路径！！！待完善... -::: - -假设我们的系统之前有这样的一些路由： -```js -export default { - router: { - routes: [{ - "path": "/", - "component": () => import('@/src/.fes/plugin-layout/index.js'), - "children": [ - { - "path": "/onepiece", - "component": () => import('@/pages/onepiece'), - "name": "onepiece", - "meta": { - "name": "onepiece", - "title": "onepiece" - } - } - ] - }] - } -} -``` -我们现在想在 `/son` 加载子应用 `app1`，只需要增加这样一些配置即可： -```js {16-23} -export default { - router: { - routes: [{ - "path": "/", - "component": () => import('@/src/.fes/plugin-layout/index.js'), - "children": [ - { - "path": "/onepiece", - "component": () => import('@/pages/onepiece'), - "name": "onepiece", - "meta": { - "name": "onepiece", - "title": "onepiece" - } - }, - { - "path": "/son", - "meta": { - "name": "son", - "title": "子应用", - "microApp": "app1" - } - } - ] - }] - } -} -``` -当前我们依然提倡约定路由的方式，在`src/pages` 目录新建 `son.vue`： -```vue - -{ - "name": "son", - "title": "子应用", - "microApp": "app1" -} - -``` - - -#### 使用 `` 组件的方式 -:::tip -建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。 -::: -```vue - - -``` - -#### 使用 `` 组件的方式 -如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`` 出现了，完美解决上面的问题。 - - -`` 相比 `` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。 - - ```vue - - -``` - -## 子应用配置 - -### 第一步：插件注册 -```js -export default { - qiankun: { - micro: {}, - } -}; -``` - -### 第二步：配置运行时生命周期钩子（可选） -插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。 -```js -export const qiankun = { - // 应用加载之前 - async bootstrap(props) { - console.log('app1 bootstrap', props); - }, - // 应用 render 之前触发 - async mount(props) { - console.log('app1 mount', props); - }, - // 当 props 更新时触发 - async update(props){ - console.log('app1 update', props); - }, - // 应用卸载之后触发 - async unmount(props) { - console.log('app1 unmount', props); - }, -}; - -``` - -## 父子应用通讯 - -有两种方式实现 - -### 配合 [useModel](./model.md) 使用 - -确保已经安装了 `@fesjs/plugin-model`： -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-model": "^2.0.0" - }, -} -``` - -#### 主应用传递 props - -- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可： -```vue - - -``` - -- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如： -```js -import { reactive } from 'vue'; - -export default () => { - const state = reactive({ c: 1 }); - return { - state - }; -}; -``` - -#### 子应用消费 props - -子应用中会自动生成一个全局名为 `qiankunStateFromMain` 的 `model`， 可以在任意组件中获取主应用透传的 `props` 的值。 - -```vue - -``` - -### 基于 props 传递 - -- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节） -- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节） diff --git a/docs/zh/reference/plugin/plugins/request.md b/docs/zh/reference/plugin/plugins/request.md deleted file mode 100644 index da9fc7a2..00000000 --- a/docs/zh/reference/plugin/plugins/request.md +++ /dev/null @@ -1,214 +0,0 @@ -# @fesjs/plugin-request - -基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。 -## 启用方式 - -在 `package.json` 中引入依赖： -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-request": "^2.0.0" - }, -} -``` -## 配置 - -### 构建时配置 - -```js -export default { - request: { - dataField: 'result' - }, -} -``` - -#### dataField - -- 类型： `string` -- 默认值： `''` -- 详情： - - `dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。 - - -#### base(即将废弃) - -- 类型： `string` -- 默认值： `''` -- 详情： - - `base` 接口前缀。 - -::: warning 即将废弃 -这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。 -::: - -### 运行时配置 - -在 `app.js` 中进行运行时配置。 - -```js -export const request = { - // 格式化 response.data (只有 response.data 类型为 object 才会调用) - responseDataAdaptor: (data) => { - data.code = data.code === '200' ? '0' : data.code; - return data; - }, - // 关闭 response data 校验（只判断 xhr status） - closeResDataCheck: false, - // 请求拦截器 - requestInterceptors: [], - // 响应拦截器 - responseInterceptors: [], - // 错误处理 - // 内部以 reponse.data.code === '0' 判断请求是否成功 - // 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式 - errorHandler: { - 11199(response) { - // 特殊 code 处理逻辑 - }, - 404(error) { - }, - default(error) { - // 异常统一处理 - } - }, - // 其他 axios 配置 - ...otherConfigs -} -``` - -#### skipErrorHandler - -- 类型： `boolean | string | number | array` -- 默认值： `` -- 详情： - - 指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。 - -- 示列： - -```js -import {request} from '@fesjs/fes'; - -request('/api/login', null, { - skipErrorHandler: '110' -}).then((res) => { - // do something -}).catch((err) => { - // 这里处理 code 为 110 的异常 - // 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default -}) -``` - - - -## 使用 - -### 发起一个普通 post 请求 - -```js -import {request} from '@fesjs/fes'; - -request('/api/login', { - username: 'robby', - password: '123456' -}).then((res) => { - // do something -}).catch((err) => { - // 处理异常 -}) -``` - -### merge 重复请求 - -连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。 - -当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。 - -```js -import {request} from '@fesjs/fes'; - -request('/api/login', { - username: 'robby', - password: '123456' -}, { - mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求 -}).then((res) => { - // do something -}).catch((err) => { - // 处理异常 -}) -``` - -### 请求节流(即将废弃) - - -::: warning 即将废弃 -因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行 -::: - - -### 请求缓存 - -```js -import {request} from '@fesjs/fes'; - -request('/api/login', { - username: 'robby', - password: '123456' -}, { - cache: { - cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage - cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min - }, -}).then((res) => { - // do something -}).catch((err) => { - // 处理异常 -}) -``` - -若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。 - - -### 结合 use 使用 - -```js -import {useRequest} from '@fesjs/fes'; - - -export default { - setup() { - const {loading, data, error} = useRequest('/api/login', { - username: 'robby', - password: '123456' - }) - - return { - loading, - data, - error - } - } -} -``` - -## API - -### request - -- **类型**：函数 - -- **详情**：请求后端接口 -- **参数**： - - url: 后端接口 url - - data: 参数 - - options: 配置（ 支持 axios 所有配置） -- **返回值**: Promise - -### useRequest - -request 的封装，返回响应式 `loading`、`error`、 `data` diff --git a/docs/zh/reference/plugin/plugins/sass.md b/docs/zh/reference/plugin/plugins/sass.md deleted file mode 100644 index b7abd5a9..00000000 --- a/docs/zh/reference/plugin/plugins/sass.md +++ /dev/null @@ -1,34 +0,0 @@ -# @fesjs/plugin-sass - -## 介绍 - -Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。 - -::: tip webpack 构建 sass 插件 -如果使用 Vite 构建，直接装 `sass` 依赖即可，不需要安装此插件。 -::: - -## 启用方式 - -在 `package.json` 中引入依赖： - -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-sass": "^2.0.0" - } -} -``` - -## global css - -添加 `src/global.scss` 和 `src/global.sass` 为全局 CSS 入口，添加一些通用样式内容。 - -## Vue 单文件组件 - -Vue 单文件组件的 `` 添加 `lang='scss'`，例如： - -```vue - -``` diff --git a/docs/zh/reference/plugin/plugins/vuex.md b/docs/zh/reference/plugin/plugins/vuex.md deleted file mode 100644 index d6e27c48..00000000 --- a/docs/zh/reference/plugin/plugins/vuex.md +++ /dev/null @@ -1,192 +0,0 @@ -# @fesjs/plugin-vuex -## 介绍 -集成vuex插件 - -增强vuex，导出所有的`mutations`、`actions`和`getter`的事件类型，编辑器提示 - -约定模式，module和plugin定义放在stores目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 -``` -└── src - ├── pages - │ └── index.vue - └── stores - │ └── foo - │ │ └── bar.js - │ ├── counter.js - │ ├── plugin-logger.js - │ ├── user.js - └── app.js -``` -::: tip -为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api -```js -import { useStore } from 'vuex'; -``` -::: -## 启用方式 -在 `package.json` 中引入依赖： -```json -{ - "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-vuex": "^2.0.0" - } -} -``` - -## 配置 -在 `.fes.js` 中配置： -```js -export default { - vuex: { - strict: true // 开启严格模式 - } -} -``` - -## 场景使用 -先定义在stores下定义user模块，包含嵌套模块 - -stores/user.js -```js -export default { - namespaced: true, - state: () => ({ - name: 'aring', - age: 20 - }), - actions: { - login() { - return new Promise((reslove) => { - setTimeout(() => { - console.log('login'); - reslove('OK'); - }, 1000); - }); - } - }, - modules: { - address: { - state: () => ({ - province: '广东省', - city: '深圳市', - zone: '南山区' - }), - getters: { - address(state) { - return state.province + state.city + state.zone; - } - } - } - } -}; -``` -stores/foo/bar.js -```js -export default { - namespaced: true, - state: () => ({ - count: 0 - }), - mutations: { - increment(state) { - state.count++; - } - }, - getters: { - doubleCount(state) { - return state.count * 2; - } - }, - actions: { - asyncIncrement({ commit }) { - setTimeout(() => { - commit('increment'); - }, 2000); - } - } -}; -``` -::: tip -导出的`mutations`、`actions`和`getter`的事件类型，将会按文件命名； - -如`ACTION_TYPES.user.login`指向user模块中actions的login方法 - -如`GETTER_TYPES.user.address`指向user模块中嵌套的address getter - -如`MUTATION_TYPES.fooBar.increment`指向foo/bar模块中mutations的increment方法 -::: - -在vue文件中使用store -```vue - - -{ - "name": "store", - "title": "vuex测试" -} - - - -``` - -::: tip -由于该插件注册在onAppCreated中，如果在onAppCreated及之前使用useStore时，获取不到vuex实例 - -`fesjs`导出了vuex实例`store`，如在app.js文件中 -```js -import { store, GETTER_TYPES } from '@fesjs/fes'; -console.log(store.getters[GETTER_TYPES.user.address]) -``` -::: - -## vuex插件 -stores文件夹下的文件名包含plugin被解析为插件，vuex插件写法参考[官方文档](https://next.vuex.vuejs.org/guide/plugins.html) -## API - -### store -* 类型 `Object` -* vuex实例 -### MUTATION_TYPES -* 类型 `Object` -* mutation的所有事件类型 - -### GETTER_TYPES -* 类型 `Object` -* getter的所有方法名 -### ACTION_TYPES -* 类型 `Object` -* action的所有事件类型 diff --git a/docs/zh/reference/plugin/plugins/windicss.md b/docs/zh/reference/plugin/plugins/windicss.md deleted file mode 100644 index be28d80b..00000000 --- a/docs/zh/reference/plugin/plugins/windicss.md +++ /dev/null @@ -1,28 +0,0 @@ -# @fesjs/plugin-windicss - - -## 介绍 - -`windicss` 支持 - -## 启用方式 -在 `package.json` 中引入依赖： -```json -{ - "devDependencies": { - "@fesjs/plugin-windicss": "^2.0.0" - }, -} -``` - -## 配置 - -在 `.fes.js` 配置文件中添加自定义配置，详细配置[请看](https://windicss.org/integrations/webpack.html)： - -```js -export default { - windicss: { - root: './', - } -} -``` diff --git a/packages/create-fes-app/README.md b/packages/create-fes-app/README.md index d0539a7c..96eb84a0 100644 --- a/packages/create-fes-app/README.md +++ b/packages/create-fes-app/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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/create-fes-app/package.json b/packages/create-fes-app/package.json index 7c1f961f..062ddf24 100644 --- a/packages/create-fes-app/package.json +++ b/packages/create-fes-app/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/create-fes-app", - "version": "2.1.6", + "version": "2.1.7", "description": "create a app base on fes.js", "main": "lib/index.js", "files": [ diff --git a/packages/fes-compiler/README.md b/packages/fes-compiler/README.md index d0539a7c..96eb84a0 100644 --- a/packages/fes-compiler/README.md +++ b/packages/fes-compiler/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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..96eb84a0 100644 --- a/packages/fes-plugin-access/README.md +++ b/packages/fes-plugin-access/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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/package.json b/packages/fes-plugin-access/package.json index 67198965..8f3e11f1 100644 --- a/packages/fes-plugin-access/package.json +++ b/packages/fes-plugin-access/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/plugin-access", - "version": "2.0.5", + "version": "2.0.6", "description": "@fesjs/plugin-access", "main": "lib/index.js", "files": [ diff --git a/packages/fes-plugin-access/src/runtime/runtime.js b/packages/fes-plugin-access/src/runtime/runtime.js index ab7eed2d..a6e16b94 100644 --- a/packages/fes-plugin-access/src/runtime/runtime.js +++ b/packages/fes-plugin-access/src/runtime/runtime.js @@ -18,14 +18,10 @@ export function onRouterCreated({ router }) { next, }); } + return next(false); } - let path; - if (to.matched.length === 1) { - path = to.matched[0].path; - } else { - path = to.path; - } - const canRoute = await access.hasAccess(path); + // path是匹配路由的path，不是页面hash + const canRoute = await access.hasAccess(to.matched[to.matched.length - 1].path); if (canRoute) { return next(); } diff --git a/packages/fes-plugin-enums/README.md b/packages/fes-plugin-enums/README.md index d0539a7c..96eb84a0 100644 --- a/packages/fes-plugin-enums/README.md +++ b/packages/fes-plugin-enums/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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..96eb84a0 100644 --- a/packages/fes-plugin-icon/README.md +++ b/packages/fes-plugin-icon/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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..96eb84a0 100644 --- a/packages/fes-plugin-jest/README.md +++ b/packages/fes-plugin-jest/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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..96eb84a0 100644 --- a/packages/fes-plugin-layout/README.md +++ b/packages/fes-plugin-layout/README.md @@ -1,4 +1,18 @@ +# 痛点 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... + +除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。 + + ## Fes.js 是什么？ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到代码运行的每个生命周期的插件体系，支持各种功能扩展和业务需求。以 路由为基础，同时支持配置式路由和约定式路由，保证路由的功能完备。整体上以约定、配置化、组件化的设计思想，让用户仅仅关心用组件搭建页面内容。基于Vue.js3.0，充分利用Vue丰富的生态。技术曲线平缓，上手也简单。在经过多个项目中打磨后趋于稳定。 @@ -17,20 +31,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 +75,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/package.json b/packages/fes-plugin-layout/package.json index b2ec4f14..61354d7b 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -1,6 +1,6 @@ { "name": "@fesjs/plugin-layout", - "version": "4.0.7", + "version": "4.1.0", "description": "@fesjs/plugin-layout", "main": "lib/index.js", "files": [ @@ -31,7 +31,7 @@ }, "peerDependencies": { "@fesjs/fes": "^2.0.0", - "@fesjs/fes-design": "^0.3.3", + "@fesjs/fes-design": "^0.4.0", "vue": "^3.0.5", "vue-router": "^4.0.1" }, diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 209e5988..eff1a9f5 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -38,20 +38,15 @@ export default (api) => { ...(api.config.layout || {}), }; - // 路由信息 - const routes = await api.getRoutes(); - // 把路由的meta合并到menu配置中 - userConfig.menus = helper.fillMenuByRoute(userConfig.menus, routes); + const iconNames = helper.getIconNamesFromMenu(userConfig.menus); - const icons = helper.getIconsFromMenu(userConfig.menus); - - const iconsString = icons.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`); + const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`); api.writeTmpFile({ path: join(namespace, 'icons.js'), content: ` ${iconsString.join(';\n')} export default { - ${icons.join(',\n')} + ${iconNames.join(',\n')} }`, }); diff --git a/packages/fes-plugin-layout/src/node/helper.js b/packages/fes-plugin-layout/src/node/helper.js index d5b83208..effedb72 100644 --- a/packages/fes-plugin-layout/src/node/helper.js +++ b/packages/fes-plugin-layout/src/node/helper.js @@ -1,61 +1,5 @@ -const matchName = (config, name) => { - let res = {}; - if (Array.isArray(config)) { - for (let i = 0; i < config.length; i++) { - const item = config[i]; - if (item.meta && item.meta.name === name) { - res = item.meta; - res.path = item.path; - break; - } - if (item.children && item.children.length > 0) { - res = matchName(item.children, name); - } - } - } - return res; -}; - -export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => { - dep += 1; - if (dep > 3) { - console.warn('[plugin-layout]: 菜单层级最好不要超出三层！'); - } - const arr = []; - if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) { - menuConfig.forEach((menu) => { - const pageConfig = {}; - if (menu.name) { - Object.assign(pageConfig, matchName(routeConfig, menu.name)); - } - // menu的配置优先级高，当menu存在配置时，忽略页面的配置 - Object.keys(pageConfig).forEach((prop) => { - if (menu[prop] === undefined || menu[prop] === null || menu[prop] === '') { - menu[prop] = pageConfig[prop]; - } - }); - // 处理icon - if (menu.icon) { - const icon = menu.icon; - const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/; - if (typeof icon === 'string' && !((urlReg.test(icon) || icon.includes('.svg')))) { - menu.icon = { - type: 'icon', - name: icon - }; - } - } - if (menu.children && menu.children.length > 0) { - menu.children = fillMenuByRoute(menu.children, routeConfig, dep); - } - arr.push(menu); - }); - } - return arr; -}; - -export function getIconsFromMenu(data) { +export function getIconNamesFromMenu(data) { if (!Array.isArray(data)) { return []; } @@ -63,12 +7,19 @@ export function getIconsFromMenu(data) { data.forEach((item = { path: '/' }) => { if (item.icon) { const { icon } = item; - if (icon.type === 'icon') { - icons.push(icon.name); + // 处理icon + if (icon) { + const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/; + if ( + typeof icon === 'string' + && !(urlReg.test(icon) || icon.includes('.svg')) + ) { + icons.push(icon); + } } } if (item.children) { - icons = icons.concat(getIconsFromMenu(item.children)); + icons = icons.concat(getIconNamesFromMenu(item.children)); } }); diff --git a/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js b/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js new file mode 100644 index 00000000..cbf7da55 --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js @@ -0,0 +1,60 @@ +const getMetaByName = (config, name) => { + let res = {}; + if (Array.isArray(config)) { + for (let i = 0; i < config.length; i++) { + const item = config[i]; + if (item.meta && item.meta.name === name) { + res = item.meta; + res.path = item.path; + break; + } + if (item.children && item.children.length > 0) { + res = getMetaByName(item.children, name); + if (res.path) { + break; + } + } + } + } + return res; +}; + +const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => { + dep += 1; + if (dep > 3) { + console.warn('[plugin-layout]: 菜单层级最好不要超出三层！'); + } + const arr = []; + if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) { + menuConfig.forEach((menu) => { + const pageConfig = {}; + if (menu.name) { + Object.assign( + pageConfig, + getMetaByName(routeConfig, menu.name) + ); + } + // menu的配置优先级高，当menu存在配置时，忽略页面的配置 + Object.keys(pageConfig).forEach((prop) => { + if ( + menu[prop] === undefined + || menu[prop] === null + || menu[prop] === '' + ) { + menu[prop] = pageConfig[prop]; + } + }); + if (menu.children && menu.children.length > 0) { + menu.children = fillMenuByRoute( + menu.children, + routeConfig, + dep + ); + } + arr.push(menu); + }); + } + return arr; +}; + +export default fillMenuByRoute; diff --git a/packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js b/packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js new file mode 100644 index 00000000..c44b2797 --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/helpers/getRuntimeConfig.js @@ -0,0 +1,22 @@ + + +import { plugin, ApplyPluginsType } from '@@/core/coreExports'; +import { inject } from 'vue'; + +let runtimeConfig; + +export default () => { + if (!runtimeConfig) { + runtimeConfig = plugin.applyPlugins({ + key: 'layout', + type: ApplyPluginsType.modify, + initialValue: { + initialState: inject('initialState'), + sidebar: true, + header: true, + logo: true + } + }); + } + return runtimeConfig; +}; diff --git a/packages/fes-plugin-layout/src/runtime/index.tpl b/packages/fes-plugin-layout/src/runtime/index.tpl index 3ffef152..2ac3c057 100644 --- a/packages/fes-plugin-layout/src/runtime/index.tpl +++ b/packages/fes-plugin-layout/src/runtime/index.tpl @@ -1,17 +1,50 @@ -import { reactive, defineComponent } from "vue"; -import { plugin, ApplyPluginsType } from "@@/core/coreExports"; -import BaseLayout from "./views/BaseLayout.vue"; +import { ref, defineComponent, computed } from 'vue'; +import { plugin, ApplyPluginsType, } from '@@/core/coreExports'; +import { getRoutes } from '@@/core/routes/routes' +import BaseLayout from './views/BaseLayout.vue'; +import getRuntimeConfig from './helpers/getRuntimeConfig'; +import fillMenu from './helpers/fillMenu'; const Layout = defineComponent({ name: 'Layout', - setup(){ - const userConfig = reactive({{{REPLACE_USER_CONFIG}}}); - const runtimeConfig = plugin.applyPlugins({ - key: "layout", - type: ApplyPluginsType.modify, - initialValue: {}, + setup() { + const userConfig = {{{REPLACE_USER_CONFIG}}}; + const runtimeConfig = getRuntimeConfig(); + const { + menus, + customHeader, + menuConfig, + // 非 BaseLayout需要的 + initialState, + sidebar, + header, + logo, + // 跟logo冲突，换个名字 + logoUrl, + ...otherConfig + } = runtimeConfig; + if (logoUrl) { + userConfig.logo = logoUrl; + } + if (menuConfig && typeof menuConfig === 'object') { + Object.assign(userConfig.menuConfig, menuConfig); + } + Object.keys(otherConfig).forEach((p) => { + if (otherConfig[p] !== undefined) { + userConfig[p] = otherConfig[p]; + } }); - const localeShared = plugin.getShared("locale"); + let menusRef = ref(userConfig.menus); + // 如果运行时配置了menus，则需要处理 + if (menus && typeof menus === 'function') { + menusRef = ref(menus(userConfig.menus)); + } + // 把路由的meta合并到menu配置中 + const filledMenuRef = computed(() => { + return fillMenu(menusRef.value, getRoutes()); + }); + + const localeShared = plugin.getShared('locale'); return () => { const slots = { customHeader: () => { @@ -24,14 +57,23 @@ const Layout = defineComponent({ }, locale: () => { if (localeShared) { - return ; + return ( + + ); } return null; - }, + } }; - return ; + return ( + + ); }; } -}) +}); export default Layout; diff --git a/packages/fes-plugin-layout/src/runtime/runtime.js b/packages/fes-plugin-layout/src/runtime/runtime.js index eaeb72f0..f0430aa3 100644 --- a/packages/fes-plugin-layout/src/runtime/runtime.js +++ b/packages/fes-plugin-layout/src/runtime/runtime.js @@ -1,23 +1,23 @@ -import { plugin, ApplyPluginsType } from '@@/core/coreExports'; // eslint-disable-next-line import/extensions import { access as accessApi } from '../plugin-access/core'; import Exception404 from './views/404.vue'; import Exception403 from './views/403.vue'; +import getRuntimeConfig from './helpers/getRuntimeConfig'; if (!accessApi) { throw new Error('[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！'); } const handle = (type, router) => { - const accesssIds = accessApi.getAccess(); + const accessIds = accessApi.getAccess(); const path = `/${type}`; const name = `Exception${type}`; const components = { 404: Exception404, 403: Exception403, }; - if (!accesssIds.includes(path)) { - accessApi.setAccess(accesssIds.concat([path])); + if (!accessIds.includes(path)) { + accessApi.setAccess(accessIds.concat([path])); } if (!router.hasRoute(name)) { router.addRoute({ path, name, component: components[type] }); @@ -26,11 +26,7 @@ const handle = (type, router) => { export const access = (memo) => ({ unAccessHandler({ router, to, from, next }) { - const runtimeConfig = plugin.applyPlugins({ - key: 'layout', - type: ApplyPluginsType.modify, - initialValue: {}, - }); + const runtimeConfig = getRuntimeConfig(); if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') { return runtimeConfig.unAccessHandler({ router, @@ -47,11 +43,7 @@ export const access = (memo) => ({ next('/403'); }, noFoundHandler({ router, to, from, next }) { - const runtimeConfig = plugin.applyPlugins({ - key: 'layout', - type: ApplyPluginsType.modify, - initialValue: {}, - }); + const runtimeConfig = getRuntimeConfig(); if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') { return runtimeConfig.noFoundHandler({ router, diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue index a6f24beb..cf20e156 100644 --- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue @@ -14,7 +14,16 @@
{{ title }}
- + @@ -41,7 +50,15 @@
{{ title }}
- +
@@ -80,7 +97,15 @@ collapsible class="layout-aside" > - + @@ -98,11 +123,12 @@ diff --git a/packages/fes-template/src/pages/store.vue b/packages/fes-template/src/pages/store.vue index 63c9df2b..fe8757a3 100644 --- a/packages/fes-template/src/pages/store.vue +++ b/packages/fes-template/src/pages/store.vue @@ -2,17 +2,15 @@

Vuex

- +
- +
-
{{address}}
+
{{ address }}
@@ -28,14 +26,13 @@ import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES } from '@fesjs/fes'; export default { setup() { + console.log('store.vue'); const store = useStore(); console.log('store==>', store); const disabled = ref(false); return { address: computed(() => store.getters[GETTER_TYPES.user.address]), - doubleCount: computed( - () => store.getters[GETTER_TYPES.counter.doubleCount] - ), + doubleCount: computed(() => store.getters[GETTER_TYPES.counter.doubleCount]), disabled, increment: () => store.commit(MUTATION_TYPES.counter.increment), login: () => { @@ -47,11 +44,9 @@ export default { }); }, fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment), - fooBarDoubleCount: computed( - () => store.getters[GETTER_TYPES.fooBar.doubleCount] - ) + fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount]), }; - } + }, };