From 054305ae1135655aeb7c893367e7e41069062023 Mon Sep 17 00:00:00 2001 From: wanchun <445436867@qq.com> Date: Mon, 11 Apr 2022 20:02:07 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E5=8E=BB=E6=8E=89=E8=8B=B1=E6=96=87?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/docs.yml | 2 +- docs/.vuepress/config.ts | 40 +- docs/.vuepress/configs/navbar/en.ts | 38 -- docs/.vuepress/configs/navbar/index.ts | 1 - docs/.vuepress/configs/navbar/zh.ts | 10 +- docs/.vuepress/configs/sidebar/en.ts | 79 --- docs/.vuepress/configs/sidebar/index.ts | 1 - docs/.vuepress/configs/sidebar/zh.ts | 80 +-- docs/README.md | 6 +- docs/guide/faq.md | 3 +- docs/reference/config/README.md | 6 +- docs/reference/plugin/dev/api.md | 2 +- docs/reference/plugin/plugins/access.md | 2 - docs/reference/plugin/plugins/layout.md | 2 +- docs/reference/plugin/plugins/request.md | 6 +- docs/reference/plugin/plugins/vuex.md | 164 ++++- docs/reference/plugin/plugins/windicss.md | 4 +- docs/zh/README.md | 67 -- docs/zh/guide/README.md | 76 --- docs/zh/guide/config.md | 96 --- docs/zh/guide/contributing.md | 70 -- docs/zh/guide/css.md | 48 -- docs/zh/guide/directory-structure.md | 139 ---- docs/zh/guide/env.md | 139 ---- docs/zh/guide/faq.md | 1 - docs/zh/guide/getting-started.md | 195 ------ docs/zh/guide/image.md | 61 -- docs/zh/guide/mock.md | 183 ------ docs/zh/guide/plugin.md | 71 --- docs/zh/guide/public.md | 30 - docs/zh/guide/route.md | 293 --------- docs/zh/guide/runtime-config.md | 184 ------ docs/zh/guide/template.md | 56 -- docs/zh/reference/api.md | 1 - docs/zh/reference/api/README.md | 191 ------ docs/zh/reference/cli.md | 81 --- docs/zh/reference/cli/README.md | 175 ----- docs/zh/reference/config/README.md | 456 ------------- docs/zh/reference/plugin/README.md | 26 - docs/zh/reference/plugin/dev/README.md | 43 -- docs/zh/reference/plugin/dev/api.md | 634 ------------------- docs/zh/reference/plugin/plugins/access.md | 279 -------- docs/zh/reference/plugin/plugins/editor.md | 120 ---- docs/zh/reference/plugin/plugins/enums.md | 226 ------- docs/zh/reference/plugin/plugins/icon.md | 32 - docs/zh/reference/plugin/plugins/jest.md | 355 ----------- docs/zh/reference/plugin/plugins/layout.md | 320 ---------- docs/zh/reference/plugin/plugins/locale.md | 196 ------ docs/zh/reference/plugin/plugins/model.md | 107 ---- docs/zh/reference/plugin/plugins/pinia.md | 90 --- docs/zh/reference/plugin/plugins/qiankun.md | 271 -------- docs/zh/reference/plugin/plugins/request.md | 214 ------- docs/zh/reference/plugin/plugins/sass.md | 27 - docs/zh/reference/plugin/plugins/vuex.md | 192 ------ docs/zh/reference/plugin/plugins/windicss.md | 28 - 55 files changed, 211 insertions(+), 6008 deletions(-) delete mode 100644 docs/.vuepress/configs/navbar/en.ts delete mode 100644 docs/.vuepress/configs/sidebar/en.ts delete mode 100644 docs/zh/README.md delete mode 100644 docs/zh/guide/README.md delete mode 100644 docs/zh/guide/config.md delete mode 100644 docs/zh/guide/contributing.md delete mode 100644 docs/zh/guide/css.md delete mode 100644 docs/zh/guide/directory-structure.md delete mode 100644 docs/zh/guide/env.md delete mode 100644 docs/zh/guide/faq.md delete mode 100644 docs/zh/guide/getting-started.md delete mode 100644 docs/zh/guide/image.md delete mode 100644 docs/zh/guide/mock.md delete mode 100644 docs/zh/guide/plugin.md delete mode 100644 docs/zh/guide/public.md delete mode 100644 docs/zh/guide/route.md delete mode 100644 docs/zh/guide/runtime-config.md delete mode 100644 docs/zh/guide/template.md delete mode 100644 docs/zh/reference/api.md delete mode 100644 docs/zh/reference/api/README.md delete mode 100644 docs/zh/reference/cli.md delete mode 100644 docs/zh/reference/cli/README.md delete mode 100644 docs/zh/reference/config/README.md delete mode 100644 docs/zh/reference/plugin/README.md delete mode 100644 docs/zh/reference/plugin/dev/README.md delete mode 100644 docs/zh/reference/plugin/dev/api.md delete mode 100644 docs/zh/reference/plugin/plugins/access.md delete mode 100644 docs/zh/reference/plugin/plugins/editor.md delete mode 100644 docs/zh/reference/plugin/plugins/enums.md delete mode 100644 docs/zh/reference/plugin/plugins/icon.md delete mode 100644 docs/zh/reference/plugin/plugins/jest.md delete mode 100644 docs/zh/reference/plugin/plugins/layout.md delete mode 100644 docs/zh/reference/plugin/plugins/locale.md delete mode 100644 docs/zh/reference/plugin/plugins/model.md delete mode 100644 docs/zh/reference/plugin/plugins/pinia.md delete mode 100644 docs/zh/reference/plugin/plugins/qiankun.md delete mode 100644 docs/zh/reference/plugin/plugins/request.md delete mode 100644 docs/zh/reference/plugin/plugins/sass.md delete mode 100644 docs/zh/reference/plugin/plugins/vuex.md delete mode 100644 docs/zh/reference/plugin/plugins/windicss.md diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index 71021677..06aafca5 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -14,7 +14,7 @@ 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: npm install --force && npm run docs:build - name: Build and Deploy uses: JamesIves/github-pages-deploy-action@4.1.1 diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 9c839cb9..d7da60b4 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -12,11 +12,6 @@ const config: UserConfig = { // 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: '一个好用的前端应用解决方案', @@ -41,21 +36,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 +66,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 f6e85ca7..8a8c3573 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: '了解更多', diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts deleted file mode 100644 index 510be41f..00000000 --- a/docs/.vuepress/configs/sidebar/en.ts +++ /dev/null @@ -1,79 +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/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 dd87e85f..a2a4838d 100644 --- a/docs/.vuepress/configs/sidebar/zh.ts +++ b/docs/.vuepress/configs/sidebar/zh.ts @@ -1,79 +1,79 @@ 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/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', + '/guide/directory-structure.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: [ - '/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', ], }, { // 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..5bba18fc 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 ``` 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/reference/config/README.md b/docs/reference/config/README.md index 94ea35ca..53f80f8c 100644 --- a/docs/reference/config/README.md +++ b/docs/reference/config/README.md @@ -449,4 +449,8 @@ const defaultTerserOptions = { - 默认值：`{}` - 详情： - 配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) \ No newline at end of file + 配置 [Vue Loader](https://vue-loader.vuejs.org/zh/options.html) + + +## 更多配置项 +Fes.js 允许插件注册配置，如果你使用插件，肯定会在插件里找到更多配置项。 \ No newline at end of file diff --git a/docs/reference/plugin/dev/api.md b/docs/reference/plugin/dev/api.md index 7baf6801..70209931 100644 --- a/docs/reference/plugin/dev/api.md +++ b/docs/reference/plugin/dev/api.md @@ -420,7 +420,7 @@ api.addBeforeMiddlewares(() => { ### addTmpGenerateWatcherPaths -添加重新临时文件生成的监听路径。 +添加重新生成临时文件的监听路径。 例如： ```js diff --git a/docs/reference/plugin/plugins/access.md b/docs/reference/plugin/plugins/access.md index b06f8783..1300cb9d 100644 --- a/docs/reference/plugin/plugins/access.md +++ b/docs/reference/plugin/plugins/access.md @@ -1,7 +1,5 @@ # @fesjs/plugin-access - - ## 介绍 对于前端应用来说，权限就是页面、页面元素是否可见。 diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md index 0aa320b6..62ab77cf 100644 --- a/docs/reference/plugin/plugins/layout.md +++ b/docs/reference/plugin/plugins/layout.md @@ -277,7 +277,7 @@ export const layout = layoutConfig => ({ :::tip 在运行时配置菜单中的icon，需要传组件本身，而不是组件的名称。 -:::tip +::: #### header diff --git a/docs/reference/plugin/plugins/request.md b/docs/reference/plugin/plugins/request.md index 9332ab33..da9fc7a2 100644 --- a/docs/reference/plugin/plugins/request.md +++ b/docs/reference/plugin/plugins/request.md @@ -53,13 +53,14 @@ export default { 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' 判断请求是否成功 @@ -149,6 +150,7 @@ request('/api/login', { 因为 request 的请求总会有一个 promise 结果，要么成功，要么失败，和防抖、节流的语义不一致，防抖、节流只是函数的不执行 ::: + ### 请求缓存 ```js diff --git a/docs/reference/plugin/plugins/vuex.md b/docs/reference/plugin/plugins/vuex.md index 9d11c96c..d6e27c48 100644 --- a/docs/reference/plugin/plugins/vuex.md +++ b/docs/reference/plugin/plugins/vuex.md @@ -2,12 +2,26 @@ ## 介绍 集成vuex插件 -增强vuex，导出所有的mutations、actions和getter的事件类型，编辑器提示 - -约定模式，module和plugin定义放在sotres目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 +增强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 -vuex的提供的api直接导入使用 +为了防止`fesjs`与`vuex`的export冲突，fesjs不提供导出vuex的任何api。你可以直接使用vuex的api +```js +import { useStore } from 'vuex'; +``` ::: ## 启用方式 在 `package.json` 中引入依赖： @@ -31,25 +45,141 @@ export default { ``` ## 场景使用 -vuex定义模块之后，使用getter、mutation、action都是通过传入字符路径，如： -```js -import { useStore } from 'vuex'; -const store = useStore(); -store.getters['user/address'] -store.commit('counter/increment') -store.dispatch('user/login') -``` +先定义在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的所有事件类型 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 b8bbf5bb..00000000 --- a/docs/zh/guide/config.md +++ /dev/null @@ -1,96 +0,0 @@ -# 配置 - -Fes.js 约定 `.fes.js` 文件为项目编译需要配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。 - - -一份常见的配置示例如下： - -```js -export default { - base: '/foo/', - publicPath: '/', - devServer: { - port: 8080 - }, - mock: { - prefix: '/v2' - }, - proxy: { - '/v2': { - 'target': 'https://api.douban.com/', - 'changeOrigin': true, - }, - }, - layout: { - title: "Fes.js", - footer: 'Created by MumbelFe', - multiTabs: false, - menus: [{ - name: 'index' - }, { - name: 'onepiece' - }, { - name: 'store' - }, { - name: 'simpleList' - }] - } -} -``` - -## 本地临时配置文件 -可以新建 `.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 c810a20b..00000000 --- a/docs/zh/reference/plugin/plugins/sass.md +++ /dev/null @@ -1,27 +0,0 @@ -# @fesjs/plugin-sass - - - -## 介绍 -Fes.js 默认只支持 `less`，通过此插件扩展支持 `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: './', - } -} -```