diff --git a/docs/guide/directory-structure.md b/docs/guide/directory-structure.md index 14ae7baf..d320f510 100644 --- a/docs/guide/directory-structure.md +++ b/docs/guide/directory-structure.md @@ -51,24 +51,24 @@ fes-template "access": "public" }, "devDependencies": { - "@webank/eslint-config-webank": "0.3.1" + "@webank/eslint-config-webank": "1.2.1" }, "dependencies": { - "@fesjs/fes": "^3.0.0-beta.0", - "@fesjs/builder-webpack": "^3.0.0-beta.0", - "@fesjs/plugin-access": "^3.0.0-beta.0", - "@fesjs/plugin-layout": "^5.0.0-beta.0", - "@fesjs/plugin-model": "^3.0.0-beta.0", - "@fesjs/plugin-enums": "^3.0.0-beta.0", - "@fesjs/plugin-jest": "^3.0.0-beta.0", - "@fesjs/plugin-vuex": "^3.0.0-beta.0", - "@fesjs/plugin-request": "^3.0.0-beta.0", - "@fesjs/plugin-qiankun": "^3.0.0-beta.0", - "@fesjs/plugin-sass": "^3.0.0-beta.0", - "@fesjs/plugin-monaco-editor": "^3.0.0-beta.0", - "@fesjs/plugin-windicss": "^3.0.0-beta.0", - "@fesjs/fes-design": "^0.5.0", - "vue": "^3.2.37", + "@fesjs/fes": "^3.0.0", + "@fesjs/builder-webpack": "^3.0.0", + "@fesjs/plugin-access": "^3.0.0", + "@fesjs/plugin-layout": "^5.0.0", + "@fesjs/plugin-model": "^3.0.0", + "@fesjs/plugin-enums": "^3.0.0", + "@fesjs/plugin-jest": "^3.0.0", + "@fesjs/plugin-vuex": "^3.0.0", + "@fesjs/plugin-request": "^3.0.0", + "@fesjs/plugin-qiankun": "^3.0.0", + "@fesjs/plugin-sass": "^3.0.0", + "@fesjs/plugin-monaco-editor": "^3.0.0", + "@fesjs/plugin-windicss": "^3.0.0", + "@fesjs/fes-design": "^0.7.23", + "vue": "^3.2.47", "vuex": "^4.0.0" }, "private": true diff --git a/docs/guide/plugin.md b/docs/guide/plugin.md index b81a3570..9283ad8a 100644 --- a/docs/guide/plugin.md +++ b/docs/guide/plugin.md @@ -1,36 +1,44 @@ # 插件 ## 插件的 id 和 key + 每个插件都会对应一个 `id` 和一个 `key`，**`id` 是路径的简写，`key` 是进一步简化后用于配置的唯一值**。 比如插件 `/node_modules/@fesjs/plugin-foo/index.js`，通常来说，其 `id` 为 `@fesjs/plugin-foo`，`key` 为 `foo`。 ::: tip -id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。 +id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。 ::: ## 启动插件 + 有多种方式引入插件 ### package.json 依赖 + Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如： + ```json { - "dependencies": { - "@fesjs/plugin-request": "^2.0.0" - } + "dependencies": { + "@fesjs/plugin-request": "^3.0.0" + } } ``` + 那么 `@fesjs/plugin-request` 会自动被注册，无需在配置里重复声明。 ### 配置 + 在配置里可通过 `presets` 和 `plugins` 配置插件，比如： + ```js export default { presets: ['./preset', 'foo/presets'], plugins: ['./plugin'], -} +}; ``` + 通常用于几种情况： 1. 项目相对路径的插件 @@ -41,9 +49,11 @@ export default { ::: ### 环境变量 + 还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。 比如： + ```bash FES_PRESETS=/a/b/preset.js fes dev ``` @@ -51,21 +61,25 @@ FES_PRESETS=/a/b/preset.js fes dev ## 禁用插件 通过配置插件的 `key` 为 `false`，比如： + ```js export default { mock: false, -} +}; ``` + Mock 插件的 `key` 是 `mock`，我们在配置文件中配置 `mock` 为 `false`，则会禁用 Mock 插件及其功能。 ## 配置插件 通过插件的 `key` 来配置插件，比如： + ```js export default { - mock: { - prefix: '/v2' - } -} + mock: { + prefix: '/v2', + }, +}; ``` -这里的 `mock` 是 Mock插件 的 key。 \ No newline at end of file + +这里的 `mock` 是 Mock 插件 的 key。 diff --git a/docs/reference/plugin/plugins/access.md b/docs/reference/plugin/plugins/access.md index 65575b8c..cca4247a 100644 --- a/docs/reference/plugin/plugins/access.md +++ b/docs/reference/plugin/plugins/access.md @@ -71,8 +71,8 @@ export default { ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-access": "^2.0.0" + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-access": "^3.0.0" } } ``` diff --git a/docs/reference/plugin/plugins/editor.md b/docs/reference/plugin/plugins/editor.md index baaaaf14..808bd608 100644 --- a/docs/reference/plugin/plugins/editor.md +++ b/docs/reference/plugin/plugins/editor.md @@ -1,119 +1,120 @@ # @fesjs/plugin-monaco-editor - ## 介绍 -我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。 + +我们会遇到需要编辑代码的场景，比如编辑`json`、`javascript`、`python`等等，[Monaco Editor](https://github.com/Microsoft/monaco-editor) 是  一个好用而且强大的的代码编辑器库，引入`Monaco Editor`有一定的成本，插件实现了胶水代码，提供轻松引入的能力。目前内置的 `Monaco Editor` 版本是 `1.9.1`。 ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-monaco-editor": "^2.0.0" - }, + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-monaco-editor": "^3.0.0" + } } ``` - ## 编译时配置 + 在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置： + ```js export default { monacoEditor: { - languages: ['javascript', 'typescript', 'html', 'json'] - } -} + languages: ['javascript', 'typescript', 'html', 'json'], + }, +}; ``` + 我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本，所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置，具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。 - ### filename -- **类型**：自定义worker脚本名称 - -- **默认值**：`'[name].worker.js'` + +- **类型**：自定义 worker 脚本名称 +- **默认值**：`'[name].worker.js'` ### publicPath -- **类型**：自定义worker脚本的路径 - -- **默认值**：`''` + +- **类型**：自定义 worker 脚本的路径 +- **默认值**：`''` ### languages -- **类型**：需要支持的语言类型 - -- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']` -- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为： +- **类型**：需要支持的语言类型 +- **默认值**：`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']` + +- **详情**：默认是全部，但是编译后包体积会非常大，建议用到什么语言则配置什么语言。特别某些语言依赖其他语言，例如`javascript`依赖`typescript`，需要使用`javascript`时需要配置为： + ```js export default { monacoEditor: { - languages: ['javascript', 'typescript'] - } -} + languages: ['javascript', 'typescript'], + }, +}; ``` ## API ### monaco -编辑器的全局对象，提供扩展语言，自定义主题等等API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。 + +编辑器的全局对象，提供扩展语言，自定义主题等等 API，具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。 + ```js import { monaco } from '@fesjs/fes'; monaco.editor.defineTheme('myCoolTheme', { - base: 'vs', - inherit: false, - rules: [ - { token: 'custom-info', foreground: '808080' }, - { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, - { token: 'custom-notice', foreground: 'FFA500' }, - { token: 'custom-date', foreground: '008800' }, - ] + base: 'vs', + inherit: false, + rules: [ + { token: 'custom-info', foreground: '808080' }, + { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, + { token: 'custom-notice', foreground: 'FFA500' }, + { token: 'custom-date', foreground: '008800' }, + ], }); - ``` ### 组件 MonacoEditor ```vue ``` #### props -| 属性 | 说明 | 类型 | 默认值 | -| ------------- | ------------- | ------------- | ------------- | -| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` | -| language | 编辑器的语言 | string | - | -| height | 编辑器的高度 | string | `100%` | -| width | 编辑器的宽度 | string | `100%` | -| modelValue(v-model) | 编辑器的代码 | string | - | -| readOnly | 是否只读 | boolean | `false` | -| options | 编辑器的配置对象 | object | `{}` | -| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` | + +| 属性 | 说明 | 类型 | 默认值 | +| ------------------- | ----------------------------------------------------------------------- | ------- | -------------- | +| theme | 编辑器的主题，使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` | +| language | 编辑器的语言 | string | - | +| height | 编辑器的高度 | string | `100%` | +| width | 编辑器的宽度 | string | `100%` | +| modelValue(v-model) | 编辑器的代码 | string | - | +| readOnly | 是否只读 | boolean | `false` | +| options | 编辑器的配置对象 | object | `{}` | +| check | 是否检查代码，如果检查不通过则不更新数据，目前只支持`json` | boolean | `false` | #### events -| 事件名称 | 说明 | 回调参数 | -| ------------- | ------------- | ------------- | -| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void | -| scrollChange | 滚动时触发 | (e) => void | \ No newline at end of file +| 事件名称 | 说明 | 回调参数 | +| ------------ | ------------------ | --------------------------------------- | +| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void | +| scrollChange | 滚动时触发 | (e) => void | diff --git a/docs/reference/plugin/plugins/enums.md b/docs/reference/plugin/plugins/enums.md index 2a688b3c..667ba012 100644 --- a/docs/reference/plugin/plugins/enums.md +++ b/docs/reference/plugin/plugins/enums.md @@ -1,15 +1,20 @@ # @fesjs/plugin-enums + ## 介绍 -日常业务开发中，有很多场景会使用到枚举值，比如select-options、table-column。 + +日常业务开发中，有很多场景会使用到枚举值，比如 select-options、table-column。 该插件提供统一的枚举存取及丰富的函数来处理枚举。 + ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-enums": "^2.0.0" + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-enums": "^3.0.0" } } ``` @@ -17,18 +22,25 @@ ## 配置 ### 静态配置 + 在 `.fes.js` 中配置： + ```js // 配置格式：[[key, value], ...] export default { enums: { - status: [['0', '无效的'], ['1', '有效的']] - } -} + status: [ + ['0', '无效的'], + ['1', '有效的'], + ], + }, +}; ``` ### 动态配置 + 在业务代码中 + ```js import { enums } from '@fesjs/fes'; // 动态添加 @@ -37,26 +49,24 @@ enums.get('status', '1') // 有效的 ``` ## 场景使用 -- 动态添加的枚举项支持数组和对象 -- 枚举项为对象时，可以指定keyName和valueName属性名 +- 动态添加的枚举项支持数组和对象 -- 导出枚举值，可指定取值的路径 +- 枚举项为对象时，可以指定 keyName 和 valueName 属性名 + +- 导出枚举值，可指定取值的路径 + +- 导出枚举可扩展属性 -- 导出枚举可扩展属性 ```vue - ``` + ## API + ### get -* `get(name: string)` 获取指定名字的枚举 -* `get(name: string, key: string)` 获取指定名字及键枚举默认值 +- `get(name: string)` 获取指定名字的枚举 -* `get(name: string, opt: {extend: Array})` 获取指定名字的自定义格式枚举，[查看extend配置](#extend配置) +- `get(name: string, key: string)` 获取指定名字及键枚举默认值 -* `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir规则](#dir规则)的值 +- `get(name: string, opt: {extend: Array})` 获取指定名字的自定义格式枚举，[查看 extend 配置](#extend配置) + +- `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir 规则](#dir规则)的值 ```js -get('status') -get('status', '1') +get('status'); +get('status', '1'); get('status', { extend: [ { @@ -131,51 +147,60 @@ get('status', { }, { key: 'disabled', - transfer: item => item === '0' - } - ] -}) -get('status', '1', {dir: 'value'}) + transfer: (item) => item === '0', + }, + ], +}); +get('status', '1', { dir: 'value' }); ``` ### push + 动态添加枚举，重复添加会覆盖 -* `push(name: string, _enum: Array)` -* `push(name: string, _enum: Array, opt?: Object)` - * opt.keyName 指定key的取值属性，默认是key - * opt.valueName 指定value的取值属性 -枚举项为数组，枚举项的[0]解析为key，枚举项的[1]解析为value +- `push(name: string, _enum: Array)` +- `push(name: string, _enum: Array, opt?: Object)` + - opt.keyName 指定 key 的取值属性，默认是 key + - opt.valueName 指定 value 的取值属性 -枚举项为对象时，根据opt配置keyName、valueName取枚举项属性值分别作为key和value，`如果valueName未设置则value就是枚举项` +枚举项为数组，枚举项的[0]解析为 key，枚举项的[1]解析为 value + +枚举项为对象时，根据 opt 配置 keyName、valueName 取枚举项属性值分别作为 key 和 value，`如果valueName未设置则value就是枚举项` ### remove -* remove(name: string) + +- remove(name: string) 移除指定的枚举 + ### concat + 基于现有的枚举，连接上新的枚举后返回新的枚举 -* `concat(name: string, _enum: Array, opt?: Object))` - * opt.keyName 指定key的取值属性，默认是key - * opt.valueName 指定value的取值属性 - * opt.before 是否添加在现有的之前，默认是false - * opt.extend：返回的枚举[extend配置](#extend配置) + +- `concat(name: string, _enum: Array, opt?: Object))` + - opt.keyName 指定 key 的取值属性，默认是 key + - opt.valueName 指定 value 的取值属性 + - opt.before 是否添加在现有的之前，默认是 false + - opt.extend：返回的枚举[extend 配置](#extend配置) ### convert -将传入的枚举格式转换为{key, value}的形式 -* `convert(name: string, _enum: Array, opt?: Object))` - * opt.keyName 指定key的取值属性，默认是key - * opt.valueName 指定value的取值属性 -### extend配置 +将传入的枚举格式转换为{key, value}的形式 + +- `convert(name: string, _enum: Array, opt?: Object))` + - opt.keyName 指定 key 的取值属性，默认是 key + - opt.valueName 指定 value 的取值属性 + +### extend 配置 + 扩展枚举项属性的配置 -* `extend: Array` - * `key` 指定扩展的属性名 - * `dir` 指定该属性的取值路径 - * `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值 -::: tip -同时设置[dir](#dir规则)和transfer，transfer优先 -::: + +- `extend: Array` + _ `key` 指定扩展的属性名 + _ `dir` 指定该属性的取值路径 \* `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值 + ::: tip + 同时设置[dir](#dir规则)和 transfer，transfer 优先 + ::: ```js get('status', { @@ -186,18 +211,19 @@ get('status', { }, { key: 'disabled', - transfer: item => item.key === '0' - } - ] -}) + transfer: (item) => item.key === '0', + }, + ], +}); ``` +### dir 规则 -### dir规则 -dir是指定枚举项value的取值方式，规则如下： -* 对象属性 `A`、`A.B` -* 数组 `[0]`、`[0][1]` -* 混合 `A[0]`、`[0].A`、`A[0].B` +dir 是指定枚举项 value 的取值方式，规则如下： + +- 对象属性 `A`、`A.B` +- 数组 `[0]`、`[0][1]` +- 混合 `A[0]`、`[0].A`、`A[0].B` ```js // 假如枚举项value的结构如下 @@ -221,6 +247,7 @@ dir value 'role[0]' => {id: 1, name: '管理员'} 'role[1].id' => 2 ``` + ::: tip -枚举项value如果是基本类型，则规则不生效，value就是当前值 -::: \ No newline at end of file +枚举项 value 如果是基本类型，则规则不生效，value 就是当前值 +::: diff --git a/docs/reference/plugin/plugins/icon.md b/docs/reference/plugin/plugins/icon.md index 6821c373..38796f4d 100644 --- a/docs/reference/plugin/plugins/icon.md +++ b/docs/reference/plugin/plugins/icon.md @@ -11,8 +11,8 @@ ```json { "dependencies": { - "@fesjs/fes": "^3.0.0-rc.2", - "@fesjs/plugin-icon": "^3.0.0-rc.2" + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-icon": "^3.0.0" } } ``` diff --git a/docs/reference/plugin/plugins/jest.md b/docs/reference/plugin/plugins/jest.md index af11dc31..b6fd2689 100644 --- a/docs/reference/plugin/plugins/jest.md +++ b/docs/reference/plugin/plugins/jest.md @@ -3,22 +3,25 @@ 集成 [Jest](https://www.jestjs.cn/) 测试框架，目前只支持单元测试和覆盖测试。 ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-jest": "^2.0.0" - }, + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-jest": "^3.0.0" + } } ``` ## 约定 -- 项目根目录下 `tests` 和 `__tests__` 文件夹中的 `js` 或者 `jsx` 文件为测试文件。 -- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}` +- 项目根目录下 `tests` 和 `__tests__` 文件夹中的 `js` 或者 `jsx` 文件为测试文件。 +- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}` 例如测试文件 `add.js`： + ``` fes-template ├── __tests__ @@ -28,22 +31,26 @@ fes-template └── utils └── sum.js ``` + 内容如下： + ```js import sum from '@/utils/sum'; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); - ``` -## 命令 +## 命令 + 在 `fes` 上注册 `test` 命令： + ```bash $ fes test ``` ## 配置 + 插件实现 Jest 的全部配置，具体请查看 [文档-configuration](https://www.jestjs.cn/docs/configuration#reference)。 也可以使用 `-h` 打印配置帮助信息： ### args 变量 @@ -51,7 +58,9 @@ $ fes test ```bash $ fes test -h ``` + 打印配置帮助信息: + ``` $ fes test -h Usage: fes test [options] @@ -342,14 +351,15 @@ Options: ``` 比如覆盖测试： + ``` fes test --coverage ``` ### 配置文件 -除了插件内置的默认配置之外，插件遵循 `Jest`的配置文件规范，约定项目根目录下的 `jest.config.js` 为用户配置文件，约定 `packages.json` 的 `jest` 属性内容也是配置。 +除了插件内置的默认配置之外，插件遵循 `Jest`的配置文件规范，约定项目根目录下的 `jest.config.js` 为用户配置文件，约定 `packages.json` 的 `jest` 属性内容也是配置。 ### 优先级 -`args` 配置 > `package.json`中的 `jest` > `jest.config.js` > 默认配置 \ No newline at end of file +`args` 配置 > `package.json`中的 `jest` > `jest.config.js` > 默认配置 diff --git a/docs/reference/plugin/plugins/locale.md b/docs/reference/plugin/plugins/locale.md index a8af1472..abbdca58 100644 --- a/docs/reference/plugin/plugins/locale.md +++ b/docs/reference/plugin/plugins/locale.md @@ -1,23 +1,28 @@ # @fesjs/plugin-locale ## 介绍 + 国际化插件，基于 [Vue I18n](https://github.com/intlify/vue-i18n-next)，用于解决 i18n 问题。 + ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-locale": "^2.0.0" - }, + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-locale": "^3.0.0" + } } ``` - ## 配置 ### 约定式配置 + Fes.js 约定如下目录，项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换： + ``` src ├── locales @@ -27,49 +32,55 @@ src │ └── index.vue └── app.js ``` + 多语言文件的命名规范：`-.js` 多语言文件的内容规范：键值组成的字面量，如下： + ```js // src/locales/zh-CN.js export default { menu: { - interface: '接口' + interface: '接口', }, overview: '概述', i18n: { internationalization: '国际化，基于', achieve: '实现。', - ui: 'UI组件' - } + ui: 'UI组件', + }, }; ``` + ```js // src/locales/en-US.js export default { menu: { - interface: 'interface' + interface: 'interface', }, overview: 'Overview', i18n: { internationalization: 'internationalization，base on', achieve: 'to achieve.', - ui: 'UI components' - } + ui: 'UI components', + }, }; ``` + 想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。 - ### 编译时配置 + 在执行 `fes dev` 或者 `fes build` 时，通过此配置生成运行时的代码，在配置文件`.fes.js` 中配置： + ```js export default { - locale: { - } -} + locale: {}, +}; ``` + 默认配置为： + ```js export default { locale: { @@ -77,106 +88,112 @@ export default { fallbackLocale: 'zh-CN', // set fallback locale baseNavigator: true, // 开启浏览器语言检测 legacy: false, // 用户是否需要 Legacy API 模式 - } -} + }, +}; ``` + 所有配置项如下： #### locale -- **类型**：`String` - -- **默认值**：`zh-CN` -- **详情**：当前的语言。 +- **类型**：`String` +- **默认值**：`zh-CN` + +- **详情**：当前的语言。 #### fallbackLocale -- **类型**：`String` - -- **默认值**：`zh-CN` -- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。 +- **类型**：`String` +- **默认值**：`zh-CN` + +- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。 #### baseNavigator -- **类型**：`Boolean` - -- **默认值**：`true` -- **详情**：开启浏览器语言检测。 +- **类型**：`Boolean` +- **默认值**：`true` + +- **详情**：开启浏览器语言检测。 默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。 #### legacy -- **类型**：`Boolean` - -- **默认值**：`false` -- **详情**：用户是否需要 Legacy API 模式 +- **类型**：`Boolean` +- **默认值**：`false` +- **详情**：用户是否需要 Legacy API 模式 ### 运行时配置 + 暂无。 ## API ### locale + 插件 API 通过 `@fesjs/fes` 导出： + ```js -import { locale } from '@fesjs/fes' +import { locale } from '@fesjs/fes'; ``` #### locale.messages -- **类型**：`Object` - -- **详情**：当前的配置的语言信息。 + +- **类型**：`Object` +- **详情**：当前的配置的语言信息。 #### locale.setLocale -- **类型**：`Function` - -- **详情**：设置当前的语言。 -- **参数**： - - locale，语言的名称，应该是符合 `-` 规范的名称。 -- **返回值**：`null` + +- **类型**：`Function` +- **详情**：设置当前的语言。 +- **参数**： + - locale，语言的名称，应该是符合 `-` 规范的名称。 +- **返回值**：`null` + ```js import { locale } from '@fesjs/fes'; locale.setLocale({ locale: 'en-US' }); ``` #### locale.addLocale -- **类型**：`Function` - -- **详情**：手动添加语言配置。 -- **参数**： - - locale，语言的名称，符合 `-` 规范的名称。 - - messages, 语言信息。 -- **返回值**：`null` + +- **类型**：`Function` +- **详情**：手动添加语言配置。 +- **参数**： + - locale，语言的名称，符合 `-` 规范的名称。 + - messages, 语言信息。 +- **返回值**：`null` + ```js -import { locale } from '@fesjs/fes' +import { locale } from '@fesjs/fes'; locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } }); ``` - #### locale.getAllLocales -- **类型**：`Function` - -- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。 -- **参数**：null -- **返回值**：`Array` + +- **类型**：`Function` +- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。 +- **参数**：null +- **返回值**：`Array` + ```js import { locale } from '@fesjs/fes'; console.log(locale.getAllLocales()); // ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"] ``` - ### useI18n + Composition API, 只能在 `setup` 函数中使用，更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。 -举个 🌰： + 举个 🌰： + ```vue ``` ### @@initialState + 在`beforeRender`的返回的内容会写入`@@initialState` + ```js export const beforeRender = { loading: , @@ -65,17 +74,19 @@ export const beforeRender = { setRole('admin'); // 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件 resolve({ - userName: 'harrywan' + userName: 'harrywan', }); }, 1000); }); - } + }, }; -```` +``` + 然后我们可以在其他组件中使用： + ```vue - + ``` - ## API ### useModel **useModel(name)** -- **类型**：函数 - -- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。 -- **参数**： - - name，传入 Model 文件名 +- **类型**：函数 +- **详情**: 获取 Model 数据， 也就是 Model 文件默认导出函数执行的结果。 +- **参数**： + - name，传入 Model 文件名 diff --git a/docs/reference/plugin/plugins/pinia.md b/docs/reference/plugin/plugins/pinia.md index 880fd510..52be23bb 100644 --- a/docs/reference/plugin/plugins/pinia.md +++ b/docs/reference/plugin/plugins/pinia.md @@ -1,32 +1,36 @@ # @fesjs/plugin-pinia ## 介绍 -集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义store 使用。 +集成 [pinia](https://pinia.vuejs.org/) ，提供状态管理的能力，封装一些胶水代码，可以直接定义 store 使用。 + +为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的 API，相关 API 直接从 `pinia` 导出： -为了防止 `Fes.js` 与 `pinia` 提供的 API 冲突，`Fes.js`不提供任何 `pinia` 的API，相关API直接从 `pinia` 导出： ```js import { defineStore } from 'pinia'; ``` -约定 `plugin` 定义放在 `stores` 目录下，文件名包含plugin被解析为插件，无需额外配置，定义即可用。 +约定 `plugin` 定义放在 `stores` 目录下，文件名包含 plugin 被解析为插件，无需额外配置，定义即可用。 + ``` └── src ├── pages │ └── index.vue - └── stores - │ ├── plugin-logger.js + └── stores + │ ├── plugin-logger.js │ ├── user.js └── app.js ``` ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { - "@fesjs/fes": "^2.0.0", - "@fesjs/plugin-pinia": "^2.0.0", + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-pinia": "^3.0.0", "pinia": "^2.0.11" } } @@ -35,41 +39,46 @@ import { defineStore } from 'pinia'; ## API ### pinia + `createPinia`执行后创建的实例。 ```js -import { pinia } from '@fesjs/fes' +import { pinia } from '@fesjs/fes'; ``` ## 使用 ### 定义 store + 我们在 `src/store/main.js`中： + ```js -import { defineStore } from 'pinia' +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... -}) + // other options... +}); ``` ### setup ```js -import { useStore } from '@/store/main' +import { useStore } from '@/store/main'; export default { - setup(){ - const store = useStore() - } -} + setup() { + const store = useStore(); + }, +}; ``` -### 非setup -比如在app.js中: +### 非 setup + +比如在 app.js 中: + ```js -import { pinia } from '@fesjs/fes' +import { pinia } from '@fesjs/fes'; export const beforeRender = { loading: , @@ -80,11 +89,11 @@ export const beforeRender = { const store = useStore(pinia); store.$patch({ userName: '李雷', - role: 'admin' + role: 'admin', }); setRole('admin'); }, 1000); }); - } + }, }; -``` \ No newline at end of file +``` diff --git a/docs/reference/plugin/plugins/qiankun.md b/docs/reference/plugin/plugins/qiankun.md index 57a373f0..48d8ea55 100644 --- a/docs/reference/plugin/plugins/qiankun.md +++ b/docs/reference/plugin/plugins/qiankun.md @@ -3,17 +3,20 @@ 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" - }, + "@fesjs/fes": "^3.0.0", + "@fesjs/plugin-qiankun": "^3.0.0" + } } ``` ## 介绍 + 有一种痛叫接手老项目，技术栈老旧，内容多，还要继续维护~ 可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。 @@ -21,6 +24,7 @@ Fes.js plugin for [qiankun](https://qiankun.umijs.org/)，参考[@umijs/plugin-q ## 主应用配置 ### 第一步：注册子应用 + ```js export default { qiankun: { @@ -30,7 +34,7 @@ export default { { name: 'app1', // 唯一 id entry: '//localhost:8001', // html entry - props: {} // 传递给子应用的数据 + props: {}, // 传递给子应用的数据 }, { name: 'app2', // 唯一 id @@ -44,67 +48,74 @@ export default { 当使用 `vite` 构建时需注意，**name** 必须跟子应用 `package.json`的 `name`保持一致。 - - - ### 第二步：装载子应用 #### 使用路由绑定的方式 + :::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" - } - } - ] - }] - } -} + 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-21} 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", - } - } - ] - }] - } -} + 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', + }, + }, + ], + }, + ], + }, +}; ``` + 在`src/pages` 目录新建 `son.vue`： + ```vue { @@ -115,11 +126,12 @@ export default { ``` +#### 使用 `` 组件的方式 -#### 使用 `` 组件的方式 :::tip 建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。 ::: + ```vue