diff --git a/.eslintrc.js b/.eslintrc.js index 7813edc9..4b7aabb3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,9 +18,7 @@ module.exports = { 'no-undefined': 'off', 'vue/valid-template-root': 'off' }, - parserOptions: { - babelOptions: { - presets: ['@babel/preset-env'] - } + env: { + jest: true } }; diff --git a/.fatherrc.js b/.fatherrc.js deleted file mode 100644 index 470c6522..00000000 --- a/.fatherrc.js +++ /dev/null @@ -1,38 +0,0 @@ -import { readdirSync } from "fs"; -import { join } from "path"; - -// utils must build before core -// runtime must build before renderer-react - -const headPkgs = [ - "fes-runtime", - "fes-compiler", - "fes", - "fes-preset-built-in", - "fes-plugin-request", - "fes-plugin-access", - "fes-plugin-model", - "fes-plugin-layout", - "fes-plugin-icon", - "fes-plugin-locale", - "fes-plugin-enums", - "fes-plugin-jest", - "fes-plugin-vuex", - "create-fes-app", - "fes-plugin-qiankun", - "fes-plugin-sass" -]; -const tailPkgs = []; -// const otherPkgs = readdirSync(join(__dirname, 'packages')).filter( -// (pkg) => -// pkg.charAt(0) !== '.' && !headPkgs.includes(pkg) && !tailPkgs.includes(pkg), -// ); - -const otherPkgs = []; - -export default { - target: "node", - cjs: { type: "babel", lazy: false }, - disableTypeCheck: true, - pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs], -}; diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 7b24c6f7..71021677 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -2,19 +2,23 @@ name: Deploy Docs on: push: branches: - - vue3 + - master paths: - 'docs/**/**' + - 'package.json' jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout - uses: actions/checkout@master + 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 + - name: Build and Deploy - uses: JamesIves/github-pages-deploy-action@master - env: - ACCESS_TOKEN: ${{ secrets.QLIN_GITEE_TOKEN }} - BRANCH: master - FOLDER: docs/.vuepress/dist - BUILD_SCRIPT: npm install && npm run docs:build + 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 }} diff --git a/.gitignore b/.gitignore index 4f935904..79b1b4b8 100644 --- a/.gitignore +++ b/.gitignore @@ -15,5 +15,6 @@ npm-debug.log /.changelog /packages/*/lib +/packages/*/es /packages/*/dist package-lock.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..29ed0c41 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "trailingComma": "none" +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 8e15a77b..b14a1a84 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,26 @@ + +## [2.0.0](https://github.com/WeBankFinTech/fes/compare/v0.2.3...v2.0.0) (2021-07-01) + +### 🚀 New Feature +发布2.0.0，重构90%以上的代码，以Vue 3.0和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。匹配了覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 + +支持插件如下： +1. @fesjs/plugin-access 提供对页面资源的权限控制能力 +2. @fesjs/plugin-enums 提供统一的枚举存取及丰富的函数来处理枚举 +3. @fesjs/plugin-icon svg 文件自动注册为组件 +4. @fesjs/plugin-jest 基于 Jest，提供单元测试、覆盖测试能力 +5. @fesjs/plugin-layout 简单的配置即可拥有布局，包括导航以及侧边栏 +6. @fesjs/plugin-locale 基于 Vue I18n，提供国际化能力 +7. @fesjs/plugin-model 简易的数据管理方案 +8. @fesjs/plugin-request 基于 Axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能 +9. @fesjs/plugin-vuex 基于 Vuex, 提供状态管理能力 +10. @fesjs/plugin-qiankun 基于 qiankun，提供微服务能力 +11. @fesjs/plugin-sass 样式支持sass + + ## [0.2.3](https://github.com/WeBankFinTech/fes/compare/v0.2.2...v0.2.3) (2020-09-25) diff --git a/README.en-US.md b/README.en-US.md new file mode 100644 index 00000000..9a2b6cb4 --- /dev/null +++ b/README.en-US.md @@ -0,0 +1,123 @@ +English | [简体中文](./README.md) + + +

+ + fes.js + +

+ +
+ +An excellent front-end solution + +[![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](https://github.com/WeBankFinTech/fes.js/issues) +[![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/WeBankFinTech/fes.js/pulls) + +
+ +- document - [https://winixt.gitee.io/fesjs/zh/](https://winixt.gitee.io/fesjs/zh/) +- changelog - [https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md](https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md) + +# Pain points +Before developing a front-end project, we may need to do the following preparations： +- Set up a development environment +- Conventional code specification +- Encapsulate API requests +- Configure routing +- Realize layout, menu, navigation +- Realize login +- authority management +- ... + +In addition to the preparation work, there are many similar business types. For example, most of the middle and back-end applications are workbenches, additions, deletions, changes, permissions, charts, etc. If each project is completely processed manually, it will not only take time, but over time there may be multiple technology stacks and development specifications, leading to inconsistent development processes and making historical projects more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment. + + +## Fes.js ？ +Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.0 and routing, and supports both configuration routing and convention routing, which can be used for functional expansion. Equipped with a complete plug-in system covering the compile-time and runtime life cycle, it supports various function extensions and business requirements. + +It mainly has the following functions: +- 🚀 __fast__ , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs. + +- 🧨 __easy__ , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning. + +- 💪 __strong__ , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality. + +- 📦 __expanded__ , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js. + +- 📡 __future__ , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future. + +## Plugins + +| 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) | + +## As easy as counting 1, 2, 3 +use `yarn`： +```bash +# Create a template +yarn create @fesjs/fes-app myapp + +# Installation dependencies +yarn + +# run +yarn dev +``` + +use `npm`： +```bash +# Create a template +npx @fesjs/create-fes-app myapp + +# Installation dependencies +npm install + +# run +npm run dev +``` + +## Feedback + +| Github Issue | WeChat group | Fes.js开源运营小助手 | +| --- | --- | --- | +| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | | | + + +## Contributing + +Pull requests and stars are always welcome. + +For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues). + +1. Fork it! +2. Create your feature branch: `git checkout -b my-new-feature` +3. Commit your changes: `git commit -am 'Add some feature'` +4. Push to the branch: `git push origin my-new-feature` +5. Submit a pull request :D + + +## Community activity + +### Fesjs community award-winning essay activity + +In order for the Fes.js open source project to run better, and to give back to the open source community, the community launched an award-winning essay event! Everyone is welcome to post practical experience to provide reference for community users and a wider range of developers. + +The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate. + +Please stamp: https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g + + diff --git a/README.md b/README.md index 4a939215..2792fba2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +简体中文 | [English](./README.en-US.md) +

fes.js @@ -32,7 +34,7 @@ ## Fes.js 是什么？ -Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 +Fes.js 是一个优秀的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 它主要具备以下功能： - 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 @@ -60,6 +62,7 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由 | [@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使用的代码编辑器） | ## 像数 1, 2, 3 一样容易 使用 `yarn`： @@ -93,18 +96,17 @@ npm run dev | [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | | | -## Contributing +## 参与共建 -Pull requests and stars are always welcome. +我们非常欢迎社区同学能提交PR： -For bugs and feature requests, [please create an issue](https://github.com/WeBankFinTech/fes.js/issues). - -1. Fork it! -2. Create your feature branch: `git checkout -b my-new-feature` -3. Commit your changes: `git commit -am 'Add some feature'` -4. Push to the branch: `git push origin my-new-feature` -5. Submit a pull request :D +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](https://github.com/WeBankFinTech/fes.js/issues)。 ## 社区活动 diff --git a/build.config.js b/build.config.js new file mode 100644 index 00000000..9e546dec --- /dev/null +++ b/build.config.js @@ -0,0 +1,25 @@ + +module.exports = { + // 需要编译的包 + pkgs: [ + 'create-fes-app', + 'fes', + 'fes-compiler', + 'fes-plugin-access', + 'fes-plugin-enums', + 'fes-plugin-icon', + 'fes-plugin-jest', + 'fes-plugin-layout', + 'fes-plugin-locale', + 'fes-plugin-model', + 'fes-plugin-monaco-editor', + 'fes-plugin-qiankun', + 'fes-plugin-request', + 'fes-plugin-sass', + 'fes-plugin-vuex', + 'fes-preset-built-in', + 'fes-runtime', + 'fes-utils' + ], + copy: [] +}; diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index ff346d66..9c839cb9 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -5,7 +5,7 @@ import { navbar, sidebar } from './configs' const config: UserConfig = { base: '/fesjs/', - evergreen: process.env.NODE_ENV !== 'production', + // evergreen: process.env.NODE_ENV !== 'production', head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]], diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts index 2f53a7e7..b4128596 100644 --- a/docs/.vuepress/configs/sidebar/en.ts +++ b/docs/.vuepress/configs/sidebar/en.ts @@ -3,7 +3,7 @@ import type { SidebarConfig } from '@vuepress/theme-default' export const en: SidebarConfig = { '/guide/': [ { - isGroup: true, + // isGroup: true, text: '介绍', children: [ '/guide/README.md', @@ -11,7 +11,7 @@ export const en: SidebarConfig = { ], }, { - isGroup: true, + // isGroup: true, text: '基础', children: [ '/guide/directory-structure.md', @@ -26,7 +26,7 @@ export const en: SidebarConfig = { ] }, { - isGroup: true, + // isGroup: true, text: '进阶', children: [ ] @@ -42,13 +42,13 @@ export const en: SidebarConfig = { ], '/reference/plugin/': [ { - isGroup: true, + // isGroup: true, text: 'Presets', children: [ ], }, { - isGroup: true, + // isGroup: true, text: 'Plugins', children: [ '/reference/plugin/plugins/access.md', @@ -62,10 +62,11 @@ export const en: SidebarConfig = { '/reference/plugin/plugins/vuex.md', '/reference/plugin/plugins/qiankun.md', '/reference/plugin/plugins/sass.md', + '/reference/plugin/plugins/editor.md', ], }, { - isGroup: true, + // isGroup: true, text: '插件开发', children: [ '/reference/plugin/dev/README.md', diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts index a87ca98b..6991f9c6 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -3,7 +3,7 @@ import type { SidebarConfig } from '@vuepress/theme-default' export const zh: SidebarConfig = { '/zh/guide/': [ { - isGroup: true, + // isGroup: true, text: '介绍', children: [ '/zh/guide/README.md', @@ -11,7 +11,7 @@ export const zh: SidebarConfig = { ], }, { - isGroup: true, + // isGroup: true, text: '基础', children: [ '/zh/guide/directory-structure.md', @@ -26,7 +26,7 @@ export const zh: SidebarConfig = { ] }, { - isGroup: true, + // isGroup: true, text: '进阶', children: [ ] @@ -42,13 +42,13 @@ export const zh: SidebarConfig = { ], '/zh/reference/plugin/': [ { - isGroup: true, + // isGroup: true, text: 'Presets', children: [ ], }, { - isGroup: true, + // isGroup: true, text: 'Plugins', children: [ '/zh/reference/plugin/plugins/access.md', @@ -62,10 +62,11 @@ export const zh: SidebarConfig = { '/zh/reference/plugin/plugins/vuex.md', '/zh/reference/plugin/plugins/qiankun.md', '/zh/reference/plugin/plugins/sass.md', + '/zh/reference/plugin/plugins/editor.md', ], }, { - isGroup: true, + // isGroup: true, text: '插件开发', children: [ '/zh/reference/plugin/dev/README.md', diff --git a/docs/README.md b/docs/README.md index 32b6fa76..9e43af8d 100644 --- a/docs/README.md +++ b/docs/README.md @@ -52,7 +52,7 @@ npx @fesjs/create-fes-app myapp # 安装依赖 npm install -# 运行 +# 运行 npm run dev ``` diff --git a/docs/guide/css.md b/docs/guide/css.md index e5968698..0cfaed03 100644 --- a/docs/guide/css.md +++ b/docs/guide/css.md @@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会 ``` +## CSS Modules +支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用： +```vue +` 添加 `lang='scss'`，例如： ```vue -``` \ No newline at end of file +``` diff --git a/docs/reference/plugin/plugins/vuex.md b/docs/reference/plugin/plugins/vuex.md index 7f962078..9d11c96c 100644 --- a/docs/reference/plugin/plugins/vuex.md +++ b/docs/reference/plugin/plugins/vuex.md @@ -49,13 +49,6 @@ store.getters[GETTER_TYPES.user.address] store.commit(MUTATION_TYPES.counter.increment) store.dispatch(ACTION_TYPES.user.login) ``` - -```js -import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES, store } from '@fesjs/fes'; -store.getters[GETTER_TYPES.user.address] -store.commit(MUTATION_TYPES.counter.increment) -store.dispatch(ACTION_TYPES.user.login) -``` ## API ### MUTATION_TYPES * 类型 `Object` diff --git a/docs/zh/reference/plugin/plugins/access.md b/docs/zh/reference/plugin/plugins/access.md index be8bf179..8563003d 100644 --- a/docs/zh/reference/plugin/plugins/access.md +++ b/docs/zh/reference/plugin/plugins/access.md @@ -9,7 +9,7 @@ Fes.js 把页面、页面元素统一叫做资源，每个资源都有 `accessId`： - 页面的 `accessId` 默认是页面的路由 `path` 。比如页面 `pages/a.vue` 的路由 `path` 是 `/a`。当页面访问 `/a` 时会渲染当前页面，`/a` 也就是页面的 `accessId`。 -- 页面元素的 `accessId` 没有默认值，我们可以自定义。 +- 页面元素的 `accessId` 没有默认值，由我们自定义。 ```vue diff --git a/packages/fes-plugin-layout/src/runtime/views/Menu.vue b/packages/fes-plugin-layout/src/runtime/views/Menu.vue index a1f7d7c9..c91051c0 100644 --- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue +++ b/packages/fes-plugin-layout/src/runtime/views/Menu.vue @@ -8,6 +8,9 @@