mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
docs: 优化文档版本依赖
This commit is contained in:
parent
4660cfc436
commit
e1b8f2706b
@ -51,24 +51,24 @@ fes-template
|
|||||||
"access": "public"
|
"access": "public"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@webank/eslint-config-webank": "0.3.1"
|
"@webank/eslint-config-webank": "1.2.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-beta.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/builder-webpack": "^3.0.0-beta.0",
|
"@fesjs/builder-webpack": "^3.0.0",
|
||||||
"@fesjs/plugin-access": "^3.0.0-beta.0",
|
"@fesjs/plugin-access": "^3.0.0",
|
||||||
"@fesjs/plugin-layout": "^5.0.0-beta.0",
|
"@fesjs/plugin-layout": "^5.0.0",
|
||||||
"@fesjs/plugin-model": "^3.0.0-beta.0",
|
"@fesjs/plugin-model": "^3.0.0",
|
||||||
"@fesjs/plugin-enums": "^3.0.0-beta.0",
|
"@fesjs/plugin-enums": "^3.0.0",
|
||||||
"@fesjs/plugin-jest": "^3.0.0-beta.0",
|
"@fesjs/plugin-jest": "^3.0.0",
|
||||||
"@fesjs/plugin-vuex": "^3.0.0-beta.0",
|
"@fesjs/plugin-vuex": "^3.0.0",
|
||||||
"@fesjs/plugin-request": "^3.0.0-beta.0",
|
"@fesjs/plugin-request": "^3.0.0",
|
||||||
"@fesjs/plugin-qiankun": "^3.0.0-beta.0",
|
"@fesjs/plugin-qiankun": "^3.0.0",
|
||||||
"@fesjs/plugin-sass": "^3.0.0-beta.0",
|
"@fesjs/plugin-sass": "^3.0.0",
|
||||||
"@fesjs/plugin-monaco-editor": "^3.0.0-beta.0",
|
"@fesjs/plugin-monaco-editor": "^3.0.0",
|
||||||
"@fesjs/plugin-windicss": "^3.0.0-beta.0",
|
"@fesjs/plugin-windicss": "^3.0.0",
|
||||||
"@fesjs/fes-design": "^0.5.0",
|
"@fesjs/fes-design": "^0.7.23",
|
||||||
"vue": "^3.2.37",
|
"vue": "^3.2.47",
|
||||||
"vuex": "^4.0.0"
|
"vuex": "^4.0.0"
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
# 插件
|
# 插件
|
||||||
|
|
||||||
## 插件的 id 和 key
|
## 插件的 id 和 key
|
||||||
|
|
||||||
每个插件都会对应一个 `id` 和一个 `key`,**`id` 是路径的简写,`key` 是进一步简化后用于配置的唯一值**。
|
每个插件都会对应一个 `id` 和一个 `key`,**`id` 是路径的简写,`key` 是进一步简化后用于配置的唯一值**。
|
||||||
|
|
||||||
比如插件 `/node_modules/@fesjs/plugin-foo/index.js`,通常来说,其 `id` 为 `@fesjs/plugin-foo`,`key` 为 `foo`。
|
比如插件 `/node_modules/@fesjs/plugin-foo/index.js`,通常来说,其 `id` 为 `@fesjs/plugin-foo`,`key` 为 `foo`。
|
||||||
@ -10,27 +11,34 @@ id 一般用不上,对于普通开发者 key 用来配置插件,而插件开
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
## 启动插件
|
## 启动插件
|
||||||
|
|
||||||
有多种方式引入插件
|
有多种方式引入插件
|
||||||
|
|
||||||
### package.json 依赖
|
### package.json 依赖
|
||||||
|
|
||||||
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件,比如:
|
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件,比如:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/plugin-request": "^2.0.0"
|
"@fesjs/plugin-request": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
那么 `@fesjs/plugin-request` 会自动被注册,无需在配置里重复声明。
|
那么 `@fesjs/plugin-request` 会自动被注册,无需在配置里重复声明。
|
||||||
|
|
||||||
### 配置
|
### 配置
|
||||||
|
|
||||||
在配置里可通过 `presets` 和 `plugins` 配置插件,比如:
|
在配置里可通过 `presets` 和 `plugins` 配置插件,比如:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
presets: ['./preset', 'foo/presets'],
|
presets: ['./preset', 'foo/presets'],
|
||||||
plugins: ['./plugin'],
|
plugins: ['./plugin'],
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
通常用于几种情况:
|
通常用于几种情况:
|
||||||
|
|
||||||
1. 项目相对路径的插件
|
1. 项目相对路径的插件
|
||||||
@ -41,9 +49,11 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
### 环境变量
|
### 环境变量
|
||||||
|
|
||||||
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
|
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
|
||||||
|
|
||||||
比如:
|
比如:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
FES_PRESETS=/a/b/preset.js fes dev
|
FES_PRESETS=/a/b/preset.js fes dev
|
||||||
```
|
```
|
||||||
@ -51,21 +61,25 @@ FES_PRESETS=/a/b/preset.js fes dev
|
|||||||
## 禁用插件
|
## 禁用插件
|
||||||
|
|
||||||
通过配置插件的 `key` 为 `false`,比如:
|
通过配置插件的 `key` 为 `false`,比如:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
mock: false,
|
mock: false,
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Mock 插件的 `key` 是 `mock`,我们在配置文件中配置 `mock` 为 `false`,则会禁用 Mock 插件及其功能。
|
Mock 插件的 `key` 是 `mock`,我们在配置文件中配置 `mock` 为 `false`,则会禁用 Mock 插件及其功能。
|
||||||
|
|
||||||
## 配置插件
|
## 配置插件
|
||||||
|
|
||||||
通过插件的 `key` 来配置插件,比如:
|
通过插件的 `key` 来配置插件,比如:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
mock: {
|
mock: {
|
||||||
prefix: '/v2'
|
prefix: '/v2',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
这里的 `mock` 是 Mock插件 的 key。
|
|
||||||
|
这里的 `mock` 是 Mock 插件 的 key。
|
||||||
|
@ -71,8 +71,8 @@ export default {
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-access": "^2.0.0"
|
"@fesjs/plugin-access": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -1,61 +1,67 @@
|
|||||||
# @fesjs/plugin-monaco-editor
|
# @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` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-monaco-editor": "^2.0.0"
|
"@fesjs/plugin-monaco-editor": "^3.0.0"
|
||||||
},
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
## 编译时配置
|
|
||||||
在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置:
|
|
||||||
```js
|
|
||||||
export default {
|
|
||||||
monacoEditor: {
|
|
||||||
languages: ['javascript', 'typescript', 'html', 'json']
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## 编译时配置
|
||||||
|
|
||||||
|
在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
monacoEditor: {
|
||||||
|
languages: ['javascript', 'typescript', 'html', 'json'],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本,所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置,具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
|
我们通过 `monaco-editor-webpack-plugin` 集成 `Monaco Editor` 的 `ESM`版本,所以编辑时其实就是 `monaco-editor-webpack-plugin` 的配置,具体配置项参考[文档](https://github.com/Microsoft/monaco-editor-webpack-plugin)。
|
||||||
|
|
||||||
|
|
||||||
### filename
|
### filename
|
||||||
- **类型**:自定义worker脚本名称
|
|
||||||
|
|
||||||
|
- **类型**:自定义 worker 脚本名称
|
||||||
- **默认值**:`'[name].worker.js'`
|
- **默认值**:`'[name].worker.js'`
|
||||||
|
|
||||||
### publicPath
|
### publicPath
|
||||||
- **类型**:自定义worker脚本的路径
|
|
||||||
|
|
||||||
|
- **类型**:自定义 worker 脚本的路径
|
||||||
- **默认值**:`''`
|
- **默认值**:`''`
|
||||||
|
|
||||||
### languages
|
### languages
|
||||||
- **类型**:需要支持的语言类型
|
|
||||||
|
|
||||||
|
- **类型**:需要支持的语言类型
|
||||||
- **默认值**:`['abap', 'apex', 'azcli', 'bat', 'bicep', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'elixir', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'liquid', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'qsharp', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sparql', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']`
|
- **默认值**:`['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`时需要配置为:
|
- **详情**:默认是全部,但是编译后包体积会非常大,建议用到什么语言则配置什么语言。特别某些语言依赖其他语言,例如`javascript`依赖`typescript`,需要使用`javascript`时需要配置为:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
monacoEditor: {
|
monacoEditor: {
|
||||||
languages: ['javascript', 'typescript']
|
languages: ['javascript', 'typescript'],
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### monaco
|
### monaco
|
||||||
编辑器的全局对象,提供扩展语言,自定义主题等等API,具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
|
||||||
|
编辑器的全局对象,提供扩展语言,自定义主题等等 API,具体用法请查看[monaco](https://microsoft.github.io/monaco-editor/)官方文档。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { monaco } from '@fesjs/fes';
|
import { monaco } from '@fesjs/fes';
|
||||||
|
|
||||||
@ -67,41 +73,36 @@ monaco.editor.defineTheme('myCoolTheme', {
|
|||||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||||
{ token: 'custom-notice', foreground: 'FFA500' },
|
{ token: 'custom-notice', foreground: 'FFA500' },
|
||||||
{ token: 'custom-date', foreground: '008800' },
|
{ token: 'custom-date', foreground: '008800' },
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### 组件 MonacoEditor
|
### 组件 MonacoEditor
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<MonacoEditor
|
<MonacoEditor v-model="json" language="json" height="400px" check> </MonacoEditor>
|
||||||
v-model="json"
|
|
||||||
language="json"
|
|
||||||
height="400px"
|
|
||||||
check>
|
|
||||||
</MonacoEditor>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { MonacoEditor } from '@fesjs/fes';
|
import { MonacoEditor } from '@fesjs/fes';
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MonacoEditor
|
MonacoEditor,
|
||||||
},
|
},
|
||||||
setup(){
|
setup() {
|
||||||
const json = ref('');
|
const json = ref('');
|
||||||
return {
|
return {
|
||||||
json
|
json,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### props
|
#### props
|
||||||
|
|
||||||
| 属性 | 说明 | 类型 | 默认值 |
|
| 属性 | 说明 | 类型 | 默认值 |
|
||||||
| ------------- | ------------- | ------------- | ------------- |
|
| ------------------- | ----------------------------------------------------------------------- | ------- | -------------- |
|
||||||
| theme | 编辑器的主题,使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
| theme | 编辑器的主题,使用其他主题需要先使用`monaco.editor.defineTheme`定义主题 | string | `defaultTheme` |
|
||||||
| language | 编辑器的语言 | string | - |
|
| language | 编辑器的语言 | string | - |
|
||||||
| height | 编辑器的高度 | string | `100%` |
|
| height | 编辑器的高度 | string | `100%` |
|
||||||
@ -114,6 +115,6 @@ export default {
|
|||||||
#### events
|
#### events
|
||||||
|
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
| ------------- | ------------- | ------------- |
|
| ------------ | ------------------ | --------------------------------------- |
|
||||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||||
| scrollChange | 滚动时触发 | (e) => void |
|
| scrollChange | 滚动时触发 | (e) => void |
|
@ -1,15 +1,20 @@
|
|||||||
# @fesjs/plugin-enums
|
# @fesjs/plugin-enums
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
日常业务开发中,有很多场景会使用到枚举值,比如select-options、table-column。
|
|
||||||
|
日常业务开发中,有很多场景会使用到枚举值,比如 select-options、table-column。
|
||||||
|
|
||||||
该插件提供统一的枚举存取及丰富的函数来处理枚举。
|
该插件提供统一的枚举存取及丰富的函数来处理枚举。
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-enums": "^2.0.0"
|
"@fesjs/plugin-enums": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@ -17,18 +22,25 @@
|
|||||||
## 配置
|
## 配置
|
||||||
|
|
||||||
### 静态配置
|
### 静态配置
|
||||||
|
|
||||||
在 `.fes.js` 中配置:
|
在 `.fes.js` 中配置:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 配置格式:[[key, value], ...]
|
// 配置格式:[[key, value], ...]
|
||||||
export default {
|
export default {
|
||||||
enums: {
|
enums: {
|
||||||
status: [['0', '无效的'], ['1', '有效的']]
|
status: [
|
||||||
}
|
['0', '无效的'],
|
||||||
}
|
['1', '有效的'],
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 动态配置
|
### 动态配置
|
||||||
|
|
||||||
在业务代码中
|
在业务代码中
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { enums } from '@fesjs/fes';
|
import { enums } from '@fesjs/fes';
|
||||||
// 动态添加
|
// 动态添加
|
||||||
@ -37,26 +49,24 @@ enums.get('status', '1') // 有效的
|
|||||||
```
|
```
|
||||||
|
|
||||||
## 场景使用
|
## 场景使用
|
||||||
|
|
||||||
- 动态添加的枚举项支持数组和对象
|
- 动态添加的枚举项支持数组和对象
|
||||||
|
|
||||||
- 枚举项为对象时,可以指定keyName和valueName属性名
|
- 枚举项为对象时,可以指定 keyName 和 valueName 属性名
|
||||||
|
|
||||||
- 导出枚举值,可指定取值的路径
|
- 导出枚举值,可指定取值的路径
|
||||||
|
|
||||||
- 导出枚举可扩展属性
|
- 导出枚举可扩展属性
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 遍历枚举status -->
|
<!-- 遍历枚举status -->
|
||||||
<div v-for="item in enumsGet('status')" :key="item.key">
|
<div v-for="item in enumsGet('status')" :key="item.key">{{ item.value }}:{{ item.key }}</div>
|
||||||
{{item.value}}:{{item.key}}
|
|
||||||
</div>
|
|
||||||
<!-- 遍历枚举扩展后的roles -->
|
<!-- 遍历枚举扩展后的roles -->
|
||||||
<div v-for="item in roles" :key="item.key">
|
<div v-for="item in roles" :key="item.key">{{ item.name }}:{{ item.disabled }}</div>
|
||||||
{{item.name}}:{{item.disabled}}
|
|
||||||
</div>
|
|
||||||
<!-- 获取枚举roles为2的英文名 -->
|
<!-- 获取枚举roles为2的英文名 -->
|
||||||
<div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
|
<div>{{ enumsGet('roles', '2', { dir: 'eName' }) }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@ -65,64 +75,70 @@ import { enums } from '@fesjs/fes';
|
|||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
// 动态添加枚举,枚举项是对象,并指定key的属性名为id
|
// 动态添加枚举,枚举项是对象,并指定key的属性名为id
|
||||||
enums.push('roles', [
|
enums.push(
|
||||||
|
'roles',
|
||||||
|
[
|
||||||
{
|
{
|
||||||
id: '1',
|
id: '1',
|
||||||
cName: '系统管理员',
|
cName: '系统管理员',
|
||||||
eName: 'System',
|
eName: 'System',
|
||||||
perm: ['1', '2', '3']
|
perm: ['1', '2', '3'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '2',
|
id: '2',
|
||||||
cName: '业务管理员',
|
cName: '业务管理员',
|
||||||
eName: 'Business',
|
eName: 'Business',
|
||||||
perm: ['1', '2']
|
perm: ['1', '2'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: '3',
|
id: '3',
|
||||||
cName: '普通用户',
|
cName: '普通用户',
|
||||||
eName: 'User',
|
eName: 'User',
|
||||||
perm: ['1']
|
perm: ['1'],
|
||||||
}
|
},
|
||||||
], { keyName: 'id' });
|
],
|
||||||
|
{ keyName: 'id' },
|
||||||
|
);
|
||||||
// 导出定制格式的roles,扩展枚举项新的属性name、disabled
|
// 导出定制格式的roles,扩展枚举项新的属性name、disabled
|
||||||
const roles = enums.get('roles', {
|
const roles = enums.get('roles', {
|
||||||
extend: [
|
extend: [
|
||||||
{
|
{
|
||||||
key: 'name',
|
key: 'name',
|
||||||
dir: 'cName' // 指定取值路径,取属性cName的值
|
dir: 'cName', // 指定取值路径,取属性cName的值
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'disabled',
|
key: 'disabled',
|
||||||
// 传入函数,获取结果值
|
// 传入函数,获取结果值
|
||||||
transfer: item => item.value.perm.some(i => i >= 2)
|
transfer: (item) => item.value.perm.some((i) => i >= 2),
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
console.log(roles);
|
console.log(roles);
|
||||||
// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
|
// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
|
||||||
return {
|
return {
|
||||||
enumsGet: enums.get,
|
enumsGet: enums.get,
|
||||||
roles
|
roles,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### get
|
### get
|
||||||
* `get(name: string)` 获取指定名字的枚举
|
|
||||||
|
|
||||||
* `get(name: string, key: string)` 获取指定名字及键枚举默认值
|
- `get(name: string)` 获取指定名字的枚举
|
||||||
|
|
||||||
* `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举,[查看extend配置](#extend配置)
|
- `get(name: string, key: string)` 获取指定名字及键枚举默认值
|
||||||
|
|
||||||
* `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir规则](#dir规则)的值
|
- `get(name: string, opt: {extend: Array<Object>})` 获取指定名字的自定义格式枚举,[查看 extend 配置](#extend配置)
|
||||||
|
|
||||||
|
- `get(name: string, key: string, opt: {dir: string})` 获取指定名字及键枚举[dir 规则](#dir规则)的值
|
||||||
|
|
||||||
```js
|
```js
|
||||||
get('status')
|
get('status');
|
||||||
get('status', '1')
|
get('status', '1');
|
||||||
get('status', {
|
get('status', {
|
||||||
extend: [
|
extend: [
|
||||||
{
|
{
|
||||||
@ -131,51 +147,60 @@ get('status', {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'disabled',
|
key: 'disabled',
|
||||||
transfer: item => item === '0'
|
transfer: (item) => item === '0',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
});
|
||||||
get('status', '1', {dir: 'value'})
|
get('status', '1', { dir: 'value' });
|
||||||
```
|
```
|
||||||
|
|
||||||
### push
|
### push
|
||||||
|
|
||||||
动态添加枚举,重复添加会覆盖
|
动态添加枚举,重复添加会覆盖
|
||||||
* `push(name: string, _enum: Array<Array>)`
|
|
||||||
* `push(name: string, _enum: Array<Object>, opt?: Object)`
|
|
||||||
* opt.keyName 指定key的取值属性,默认是key
|
|
||||||
* opt.valueName 指定value的取值属性
|
|
||||||
|
|
||||||
枚举项为数组,枚举项的[0]解析为key,枚举项的[1]解析为value
|
- `push(name: string, _enum: Array<Array>)`
|
||||||
|
- `push(name: string, _enum: Array<Object>, 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
|
||||||
* remove(name: string)
|
|
||||||
|
- remove(name: string)
|
||||||
|
|
||||||
移除指定的枚举
|
移除指定的枚举
|
||||||
|
|
||||||
### concat
|
### concat
|
||||||
|
|
||||||
基于现有的枚举,连接上新的枚举后返回新的枚举
|
基于现有的枚举,连接上新的枚举后返回新的枚举
|
||||||
* `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
|
||||||
* opt.keyName 指定key的取值属性,默认是key
|
- `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||||
* opt.valueName 指定value的取值属性
|
- opt.keyName 指定 key 的取值属性,默认是 key
|
||||||
* opt.before 是否添加在现有的之前,默认是false
|
- opt.valueName 指定 value 的取值属性
|
||||||
* opt.extend:返回的枚举[extend配置](#extend配置)
|
- opt.before 是否添加在现有的之前,默认是 false
|
||||||
|
- opt.extend:返回的枚举[extend 配置](#extend配置)
|
||||||
|
|
||||||
### convert
|
### convert
|
||||||
将传入的枚举格式转换为{key, value}的形式
|
|
||||||
* `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
|
||||||
* opt.keyName 指定key的取值属性,默认是key
|
|
||||||
* opt.valueName 指定value的取值属性
|
|
||||||
|
|
||||||
### extend配置
|
将传入的枚举格式转换为{key, value}的形式
|
||||||
|
|
||||||
|
- `convert(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||||
|
- opt.keyName 指定 key 的取值属性,默认是 key
|
||||||
|
- opt.valueName 指定 value 的取值属性
|
||||||
|
|
||||||
|
### extend 配置
|
||||||
|
|
||||||
扩展枚举项属性的配置
|
扩展枚举项属性的配置
|
||||||
* `extend: Array<Object>`
|
|
||||||
* `key` 指定扩展的属性名
|
- `extend: Array<Object>`
|
||||||
* `dir` 指定该属性的取值路径
|
_ `key` 指定扩展的属性名
|
||||||
* `transfer(item: {key: any, value: any})` 转换函数,参数未枚举项,返回就是该属性的值
|
_ `dir` 指定该属性的取值路径 \* `transfer(item: {key: any, value: any})` 转换函数,参数未枚举项,返回就是该属性的值
|
||||||
::: tip
|
::: tip
|
||||||
同时设置[dir](#dir规则)和transfer,transfer优先
|
同时设置[dir](#dir规则)和 transfer,transfer 优先
|
||||||
:::
|
:::
|
||||||
|
|
||||||
```js
|
```js
|
||||||
get('status', {
|
get('status', {
|
||||||
@ -186,18 +211,19 @@ get('status', {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'disabled',
|
key: 'disabled',
|
||||||
transfer: item => item.key === '0'
|
transfer: (item) => item.key === '0',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### dir 规则
|
||||||
|
|
||||||
### dir规则
|
dir 是指定枚举项 value 的取值方式,规则如下:
|
||||||
dir是指定枚举项value的取值方式,规则如下:
|
|
||||||
* 对象属性 `A`、`A.B`
|
- 对象属性 `A`、`A.B`
|
||||||
* 数组 `[0]`、`[0][1]`
|
- 数组 `[0]`、`[0][1]`
|
||||||
* 混合 `A[0]`、`[0].A`、`A[0].B`
|
- 混合 `A[0]`、`[0].A`、`A[0].B`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// 假如枚举项value的结构如下
|
// 假如枚举项value的结构如下
|
||||||
@ -221,6 +247,7 @@ dir value
|
|||||||
'role[0]' => {id: 1, name: '管理员'}
|
'role[0]' => {id: 1, name: '管理员'}
|
||||||
'role[1].id' => 2
|
'role[1].id' => 2
|
||||||
```
|
```
|
||||||
|
|
||||||
::: tip
|
::: tip
|
||||||
枚举项value如果是基本类型,则规则不生效,value就是当前值
|
枚举项 value 如果是基本类型,则规则不生效,value 就是当前值
|
||||||
:::
|
:::
|
@ -11,8 +11,8 @@
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-rc.2",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-icon": "^3.0.0-rc.2"
|
"@fesjs/plugin-icon": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -3,13 +3,15 @@
|
|||||||
集成 [Jest](https://www.jestjs.cn/) 测试框架,目前只支持单元测试和覆盖测试。
|
集成 [Jest](https://www.jestjs.cn/) 测试框架,目前只支持单元测试和覆盖测试。
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-jest": "^2.0.0"
|
"@fesjs/plugin-jest": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -19,6 +21,7 @@
|
|||||||
- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}`
|
- 需要覆盖测试的文件范围是`src/index.{js,jsx,ts,tsx,vue}`
|
||||||
|
|
||||||
例如测试文件 `add.js`:
|
例如测试文件 `add.js`:
|
||||||
|
|
||||||
```
|
```
|
||||||
fes-template
|
fes-template
|
||||||
├── __tests__
|
├── __tests__
|
||||||
@ -28,22 +31,26 @@ fes-template
|
|||||||
└── utils
|
└── utils
|
||||||
└── sum.js
|
└── sum.js
|
||||||
```
|
```
|
||||||
|
|
||||||
内容如下:
|
内容如下:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import sum from '@/utils/sum';
|
import sum from '@/utils/sum';
|
||||||
test('adds 1 + 2 to equal 3', () => {
|
test('adds 1 + 2 to equal 3', () => {
|
||||||
expect(sum(1, 2)).toBe(3);
|
expect(sum(1, 2)).toBe(3);
|
||||||
});
|
});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 命令
|
## 命令
|
||||||
|
|
||||||
在 `fes` 上注册 `test` 命令:
|
在 `fes` 上注册 `test` 命令:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$ fes test
|
$ fes test
|
||||||
```
|
```
|
||||||
|
|
||||||
## 配置
|
## 配置
|
||||||
|
|
||||||
插件实现 Jest 的全部配置,具体请查看 [文档-configuration](https://www.jestjs.cn/docs/configuration#reference)。 也可以使用 `-h` 打印配置帮助信息:
|
插件实现 Jest 的全部配置,具体请查看 [文档-configuration](https://www.jestjs.cn/docs/configuration#reference)。 也可以使用 `-h` 打印配置帮助信息:
|
||||||
|
|
||||||
### args 变量
|
### args 变量
|
||||||
@ -51,7 +58,9 @@ $ fes test
|
|||||||
```bash
|
```bash
|
||||||
$ fes test -h
|
$ fes test -h
|
||||||
```
|
```
|
||||||
|
|
||||||
打印配置帮助信息:
|
打印配置帮助信息:
|
||||||
|
|
||||||
```
|
```
|
||||||
$ fes test -h
|
$ fes test -h
|
||||||
Usage: fes test [options]
|
Usage: fes test [options]
|
||||||
@ -342,13 +351,14 @@ Options:
|
|||||||
```
|
```
|
||||||
|
|
||||||
比如覆盖测试:
|
比如覆盖测试:
|
||||||
|
|
||||||
```
|
```
|
||||||
fes test --coverage
|
fes test --coverage
|
||||||
```
|
```
|
||||||
|
|
||||||
### 配置文件
|
### 配置文件
|
||||||
除了插件内置的默认配置之外,插件遵循 `Jest`的配置文件规范,约定项目根目录下的 `jest.config.js` 为用户配置文件,约定 `packages.json` 的 `jest` 属性内容也是配置。
|
|
||||||
|
|
||||||
|
除了插件内置的默认配置之外,插件遵循 `Jest`的配置文件规范,约定项目根目录下的 `jest.config.js` 为用户配置文件,约定 `packages.json` 的 `jest` 属性内容也是配置。
|
||||||
|
|
||||||
### 优先级
|
### 优先级
|
||||||
|
|
||||||
|
@ -1,23 +1,28 @@
|
|||||||
# @fesjs/plugin-locale
|
# @fesjs/plugin-locale
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
国际化插件,基于 [Vue I18n](https://github.com/intlify/vue-i18n-next),用于解决 i18n 问题。
|
国际化插件,基于 [Vue I18n](https://github.com/intlify/vue-i18n-next),用于解决 i18n 问题。
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-locale": "^2.0.0"
|
"@fesjs/plugin-locale": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## 配置
|
## 配置
|
||||||
|
|
||||||
### 约定式配置
|
### 约定式配置
|
||||||
|
|
||||||
Fes.js 约定如下目录,项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换:
|
Fes.js 约定如下目录,项目就拥有了 `zh-CN` 与 `en-US` 国际化语言切换:
|
||||||
|
|
||||||
```
|
```
|
||||||
src
|
src
|
||||||
├── locales
|
├── locales
|
||||||
@ -27,49 +32,55 @@ src
|
|||||||
│ └── index.vue
|
│ └── index.vue
|
||||||
└── app.js
|
└── app.js
|
||||||
```
|
```
|
||||||
|
|
||||||
多语言文件的命名规范:`<lang>-<COUNTRY>.js`
|
多语言文件的命名规范:`<lang>-<COUNTRY>.js`
|
||||||
|
|
||||||
多语言文件的内容规范:键值组成的字面量,如下:
|
多语言文件的内容规范:键值组成的字面量,如下:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// src/locales/zh-CN.js
|
// src/locales/zh-CN.js
|
||||||
export default {
|
export default {
|
||||||
menu: {
|
menu: {
|
||||||
interface: '接口'
|
interface: '接口',
|
||||||
},
|
},
|
||||||
overview: '概述',
|
overview: '概述',
|
||||||
i18n: {
|
i18n: {
|
||||||
internationalization: '国际化,基于',
|
internationalization: '国际化,基于',
|
||||||
achieve: '实现。',
|
achieve: '实现。',
|
||||||
ui: 'UI组件'
|
ui: 'UI组件',
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// src/locales/en-US.js
|
// src/locales/en-US.js
|
||||||
export default {
|
export default {
|
||||||
menu: {
|
menu: {
|
||||||
interface: 'interface'
|
interface: 'interface',
|
||||||
},
|
},
|
||||||
overview: 'Overview',
|
overview: 'Overview',
|
||||||
i18n: {
|
i18n: {
|
||||||
internationalization: 'internationalization,base on',
|
internationalization: 'internationalization,base on',
|
||||||
achieve: 'to achieve.',
|
achieve: 'to achieve.',
|
||||||
ui: 'UI components'
|
ui: 'UI components',
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
想了解更多语言信息配置、匹配规则,请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
|
想了解更多语言信息配置、匹配规则,请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
|
||||||
|
|
||||||
|
|
||||||
### 编译时配置
|
### 编译时配置
|
||||||
|
|
||||||
在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置:
|
在执行 `fes dev` 或者 `fes build` 时,通过此配置生成运行时的代码,在配置文件`.fes.js` 中配置:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
locale: {
|
locale: {},
|
||||||
}
|
};
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
默认配置为:
|
默认配置为:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
locale: {
|
locale: {
|
||||||
@ -77,28 +88,29 @@ export default {
|
|||||||
fallbackLocale: 'zh-CN', // set fallback locale
|
fallbackLocale: 'zh-CN', // set fallback locale
|
||||||
baseNavigator: true, // 开启浏览器语言检测
|
baseNavigator: true, // 开启浏览器语言检测
|
||||||
legacy: false, // 用户是否需要 Legacy API 模式
|
legacy: false, // 用户是否需要 Legacy API 模式
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
所有配置项如下:
|
所有配置项如下:
|
||||||
|
|
||||||
#### locale
|
#### locale
|
||||||
- **类型**:`String`
|
|
||||||
|
|
||||||
|
- **类型**:`String`
|
||||||
- **默认值**:`zh-CN`
|
- **默认值**:`zh-CN`
|
||||||
|
|
||||||
- **详情**:当前的语言。
|
- **详情**:当前的语言。
|
||||||
|
|
||||||
#### fallbackLocale
|
#### fallbackLocale
|
||||||
- **类型**:`String`
|
|
||||||
|
|
||||||
|
- **类型**:`String`
|
||||||
- **默认值**:`zh-CN`
|
- **默认值**:`zh-CN`
|
||||||
|
|
||||||
- **详情**:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。
|
- **详情**:兜底的语言,如果当前语言找不到配置,则使用默认语言,需要保证默认语言配置文件存在。
|
||||||
|
|
||||||
#### baseNavigator
|
#### baseNavigator
|
||||||
- **类型**:`Boolean`
|
|
||||||
|
|
||||||
|
- **类型**:`Boolean`
|
||||||
- **默认值**:`true`
|
- **默认值**:`true`
|
||||||
|
|
||||||
- **详情**:开启浏览器语言检测。
|
- **详情**:开启浏览器语言检测。
|
||||||
@ -106,71 +118,76 @@ export default {
|
|||||||
默认情况下,当前语言环境的识别按照:`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
|
默认情况下,当前语言环境的识别按照:`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
|
||||||
|
|
||||||
#### legacy
|
#### legacy
|
||||||
- **类型**:`Boolean`
|
|
||||||
|
|
||||||
|
- **类型**:`Boolean`
|
||||||
- **默认值**:`false`
|
- **默认值**:`false`
|
||||||
|
|
||||||
- **详情**:用户是否需要 Legacy API 模式
|
- **详情**:用户是否需要 Legacy API 模式
|
||||||
|
|
||||||
|
|
||||||
### 运行时配置
|
### 运行时配置
|
||||||
|
|
||||||
暂无。
|
暂无。
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### locale
|
### locale
|
||||||
|
|
||||||
插件 API 通过 `@fesjs/fes` 导出:
|
插件 API 通过 `@fesjs/fes` 导出:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { locale } from '@fesjs/fes'
|
import { locale } from '@fesjs/fes';
|
||||||
```
|
```
|
||||||
|
|
||||||
#### locale.messages
|
#### locale.messages
|
||||||
- **类型**:`Object`
|
|
||||||
|
|
||||||
|
- **类型**:`Object`
|
||||||
- **详情**:当前的配置的语言信息。
|
- **详情**:当前的配置的语言信息。
|
||||||
|
|
||||||
#### locale.setLocale
|
#### locale.setLocale
|
||||||
- **类型**:`Function`
|
|
||||||
|
|
||||||
|
- **类型**:`Function`
|
||||||
- **详情**:设置当前的语言。
|
- **详情**:设置当前的语言。
|
||||||
- **参数**:
|
- **参数**:
|
||||||
- locale,语言的名称,应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
- locale,语言的名称,应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||||
- **返回值**:`null`
|
- **返回值**:`null`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { locale } from '@fesjs/fes';
|
import { locale } from '@fesjs/fes';
|
||||||
locale.setLocale({ locale: 'en-US' });
|
locale.setLocale({ locale: 'en-US' });
|
||||||
```
|
```
|
||||||
|
|
||||||
#### locale.addLocale
|
#### locale.addLocale
|
||||||
- **类型**:`Function`
|
|
||||||
|
|
||||||
|
- **类型**:`Function`
|
||||||
- **详情**:手动添加语言配置。
|
- **详情**:手动添加语言配置。
|
||||||
- **参数**:
|
- **参数**:
|
||||||
- locale,语言的名称,符合 `<lang>-<COUNTRY>` 规范的名称。
|
- locale,语言的名称,符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||||
- messages, 语言信息。
|
- messages, 语言信息。
|
||||||
- **返回值**:`null`
|
- **返回值**:`null`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { locale } from '@fesjs/fes'
|
import { locale } from '@fesjs/fes';
|
||||||
locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
|
locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
#### locale.getAllLocales
|
#### locale.getAllLocales
|
||||||
- **类型**:`Function`
|
|
||||||
|
|
||||||
|
- **类型**:`Function`
|
||||||
- **详情**:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
|
- **详情**:获取当前获得所有国际化文件的列表,默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
|
||||||
- **参数**:null
|
- **参数**:null
|
||||||
- **返回值**:`Array`
|
- **返回值**:`Array`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { locale } from '@fesjs/fes';
|
import { locale } from '@fesjs/fes';
|
||||||
console.log(locale.getAllLocales());
|
console.log(locale.getAllLocales());
|
||||||
// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
|
// ["en-US", "id-ID", "ja-JP", "pt-BR", "zh-CN", "zh-TW"]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### useI18n
|
### useI18n
|
||||||
|
|
||||||
Composition API, 只能在 `setup` 函数中使用,更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。
|
Composition API, 只能在 `setup` 函数中使用,更多细节参考 [Vue I18n](https://vue-i18n.intlify.dev/api/composition.html#usei18n)。
|
||||||
举个 🌰:
|
举个 🌰:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<form>
|
<form>
|
||||||
|
@ -11,8 +11,8 @@
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^3.0.0-rc.2",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-login": "^3.0.0-rc.1"
|
"@fesjs/plugin-login": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -1,60 +1,69 @@
|
|||||||
# @fesjs/plugin-model
|
# @fesjs/plugin-model
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 package.json 中引入依赖:
|
在 package.json 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-model": "^2.0.0"
|
"@fesjs/plugin-model": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动UI更新,提供 `reactive` 、 `ref` 等API把数据变成响应式的。我们使用`Provide / Inject`特性,在应用实例中共享响应式数据。
|
|
||||||
|
一种简易的数据管理方案。我们知道 Vue 的理念是用响应式数据驱动 UI 更新,提供 `reactive` 、 `ref` 等 API 把数据变成响应式的。我们使用`Provide / Inject`特性,在应用实例中共享响应式数据。
|
||||||
|
|
||||||
我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
|
我们约定`src/models` 目录下的文件为项目定义的 `model` 文件。每个文件需要默认导出一个 `function`。
|
||||||
|
|
||||||
文件名则对应最终 `model` 的 `name`,你可以通过插件提供的 `API` 来消费 `model` 中的数据。
|
文件名则对应最终 `model` 的 `name`,你可以通过插件提供的 `API` 来消费 `model` 中的数据。
|
||||||
|
|
||||||
### Model 文件
|
### Model 文件
|
||||||
|
|
||||||
**src/models/useAuthModel.js**
|
**src/models/useAuthModel.js**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { reactive } from 'vue'
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
export default function useAuthModel() {
|
export default function useAuthModel() {
|
||||||
const user = reactive({});
|
const user = reactive({});
|
||||||
|
|
||||||
const signin = ()=>{
|
const signin = () => {
|
||||||
// todo
|
// todo
|
||||||
}
|
};
|
||||||
|
|
||||||
const signout = ()=>{
|
const signout = () => {
|
||||||
// todo
|
// todo
|
||||||
}
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
signin,
|
signin,
|
||||||
signout
|
signout,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### 在组件中使用 Model
|
### 在组件中使用 Model
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script>
|
<script>
|
||||||
import { useModel } from "@fesjs/fes"
|
import { useModel } from '@fesjs/fes';
|
||||||
export default {
|
export default {
|
||||||
setup(){
|
setup() {
|
||||||
const { user, signin, signout } = useModel("useAuthModel")
|
const { user, signin, signout } = useModel('useAuthModel');
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### @@initialState
|
### @@initialState
|
||||||
|
|
||||||
在`beforeRender`的返回的内容会写入`@@initialState`
|
在`beforeRender`的返回的内容会写入`@@initialState`
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export const beforeRender = {
|
export const beforeRender = {
|
||||||
loading: <PageLoading />,
|
loading: <PageLoading />,
|
||||||
@ -65,17 +74,19 @@ export const beforeRender = {
|
|||||||
setRole('admin');
|
setRole('admin');
|
||||||
// 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件
|
// 初始化应用的全局状态,可以通过 useModel('@@initialState') 获取,具体用法看@/components/UserCenter 文件
|
||||||
resolve({
|
resolve({
|
||||||
userName: 'harrywan'
|
userName: 'harrywan',
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
````
|
```
|
||||||
|
|
||||||
然后我们可以在其他组件中使用:
|
然后我们可以在其他组件中使用:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<div class="right">{{initialState.userName}}</div>
|
<div class="right">{{ initialState.userName }}</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { useModel } from '@fesjs/fes';
|
import { useModel } from '@fesjs/fes';
|
||||||
@ -84,24 +95,21 @@ export default {
|
|||||||
setup() {
|
setup() {
|
||||||
const initialState = useModel('@@initialState');
|
const initialState = useModel('@@initialState');
|
||||||
return {
|
return {
|
||||||
initialState
|
initialState,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style scope>
|
<style scope></style>
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
### useModel
|
### useModel
|
||||||
|
|
||||||
**useModel(name)**
|
**useModel(name)**
|
||||||
- **类型**:函数
|
|
||||||
|
|
||||||
- **详情**: 获取 Model 数据,也就是 Model 文件默认导出函数执行的结果。
|
- **类型**:函数
|
||||||
|
- **详情**: 获取 Model 数据, 也就是 Model 文件默认导出函数执行的结果。
|
||||||
- **参数**:
|
- **参数**:
|
||||||
- name,传入 Model 文件名
|
- name,传入 Model 文件名
|
||||||
|
|
||||||
|
@ -1,15 +1,17 @@
|
|||||||
# @fesjs/plugin-pinia
|
# @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
|
```js
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
```
|
```
|
||||||
|
|
||||||
约定 `plugin` 定义放在 `stores` 目录下,文件名包含plugin被解析为插件,无需额外配置,定义即可用。
|
约定 `plugin` 定义放在 `stores` 目录下,文件名包含 plugin 被解析为插件,无需额外配置,定义即可用。
|
||||||
|
|
||||||
```
|
```
|
||||||
└── src
|
└── src
|
||||||
├── pages
|
├── pages
|
||||||
@ -21,12 +23,14 @@ import { defineStore } from 'pinia';
|
|||||||
```
|
```
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-pinia": "^2.0.0",
|
"@fesjs/plugin-pinia": "^3.0.0",
|
||||||
"pinia": "^2.0.11"
|
"pinia": "^2.0.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -35,41 +39,46 @@ import { defineStore } from 'pinia';
|
|||||||
## API
|
## API
|
||||||
|
|
||||||
### pinia
|
### pinia
|
||||||
|
|
||||||
`createPinia`执行后创建的实例。
|
`createPinia`执行后创建的实例。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { pinia } from '@fesjs/fes'
|
import { pinia } from '@fesjs/fes';
|
||||||
```
|
```
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
### 定义 store
|
### 定义 store
|
||||||
|
|
||||||
我们在 `src/store/main.js`中:
|
我们在 `src/store/main.js`中:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineStore } from 'pinia'
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
// useStore could be anything like useUser, useCart
|
// useStore could be anything like useUser, useCart
|
||||||
// the first argument is a unique id of the store across your application
|
// the first argument is a unique id of the store across your application
|
||||||
export const useStore = defineStore('main', {
|
export const useStore = defineStore('main', {
|
||||||
// other options...
|
// other options...
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### setup
|
### setup
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { useStore } from '@/store/main'
|
import { useStore } from '@/store/main';
|
||||||
export default {
|
export default {
|
||||||
setup(){
|
setup() {
|
||||||
const store = useStore()
|
const store = useStore();
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 非setup
|
### 非 setup
|
||||||
比如在app.js中:
|
|
||||||
|
比如在 app.js 中:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { pinia } from '@fesjs/fes'
|
import { pinia } from '@fesjs/fes';
|
||||||
|
|
||||||
export const beforeRender = {
|
export const beforeRender = {
|
||||||
loading: <PageLoading />,
|
loading: <PageLoading />,
|
||||||
@ -80,11 +89,11 @@ export const beforeRender = {
|
|||||||
const store = useStore(pinia);
|
const store = useStore(pinia);
|
||||||
store.$patch({
|
store.$patch({
|
||||||
userName: '李雷',
|
userName: '李雷',
|
||||||
role: 'admin'
|
role: 'admin',
|
||||||
});
|
});
|
||||||
setRole('admin');
|
setRole('admin');
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
@ -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。
|
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` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-qiankun": "^2.0.0"
|
"@fesjs/plugin-qiankun": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~
|
有一种痛叫接手老项目,技术栈老旧,内容多,还要继续维护~
|
||||||
|
|
||||||
可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。
|
可能目前迁移、升级老项目最好的解决方案就是微前端。`plugin-qiankun` 是基于 `qiankun` 实现的 Fes.js 微前端解决方案。
|
||||||
@ -21,6 +24,7 @@ Fes.js plugin for [qiankun](https://qiankun.umijs.org/),参考[@umijs/plugin-q
|
|||||||
## 主应用配置
|
## 主应用配置
|
||||||
|
|
||||||
### 第一步:注册子应用
|
### 第一步:注册子应用
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
qiankun: {
|
qiankun: {
|
||||||
@ -30,7 +34,7 @@ export default {
|
|||||||
{
|
{
|
||||||
name: 'app1', // 唯一 id
|
name: 'app1', // 唯一 id
|
||||||
entry: '//localhost:8001', // html entry
|
entry: '//localhost:8001', // html entry
|
||||||
props: {} // 传递给子应用的数据
|
props: {}, // 传递给子应用的数据
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'app2', // 唯一 id
|
name: 'app2', // 唯一 id
|
||||||
@ -44,67 +48,74 @@ export default {
|
|||||||
|
|
||||||
当使用 `vite` 构建时需注意,**name** 必须跟子应用 `package.json`的 `name`保持一致。
|
当使用 `vite` 构建时需注意,**name** 必须跟子应用 `package.json`的 `name`保持一致。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### 第二步:装载子应用
|
### 第二步:装载子应用
|
||||||
|
|
||||||
#### 使用路由绑定的方式
|
#### 使用路由绑定的方式
|
||||||
|
|
||||||
:::warning
|
:::warning
|
||||||
主应用和子应用需要自行适配路由路径!!!待完善...
|
主应用和子应用需要自行适配路由路径!!!待完善...
|
||||||
:::
|
:::
|
||||||
|
|
||||||
假设我们的系统之前有这样的一些路由:
|
假设我们的系统之前有这样的一些路由:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
router: {
|
router: {
|
||||||
routes: [{
|
routes: [
|
||||||
"path": "/",
|
|
||||||
"component": () => import('@/src/.fes/plugin-layout/index.js'),
|
|
||||||
"children": [
|
|
||||||
{
|
{
|
||||||
"path": "/onepiece",
|
path: '/',
|
||||||
"component": () => import('@/pages/onepiece'),
|
component: () => import('@/src/.fes/plugin-layout/index.js'),
|
||||||
"name": "onepiece",
|
children: [
|
||||||
"meta": {
|
{
|
||||||
"name": "onepiece",
|
path: '/onepiece',
|
||||||
"title": "onepiece"
|
component: () => import('@/pages/onepiece'),
|
||||||
}
|
name: 'onepiece',
|
||||||
}
|
meta: {
|
||||||
]
|
name: 'onepiece',
|
||||||
}]
|
title: 'onepiece',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
我们现在想在 `/son` 加载子应用 `app1`,只需要增加这样一些配置即可:
|
我们现在想在 `/son` 加载子应用 `app1`,只需要增加这样一些配置即可:
|
||||||
|
|
||||||
```js {16-21}
|
```js {16-21}
|
||||||
export default {
|
export default {
|
||||||
router: {
|
router: {
|
||||||
routes: [{
|
routes: [
|
||||||
"path": "/",
|
|
||||||
"component": () => import('@/src/.fes/plugin-layout/index.js'),
|
|
||||||
"children": [
|
|
||||||
{
|
{
|
||||||
"path": "/onepiece",
|
path: '/',
|
||||||
"component": () => import('@/pages/onepiece'),
|
component: () => import('@/src/.fes/plugin-layout/index.js'),
|
||||||
"name": "onepiece",
|
children: [
|
||||||
"meta": {
|
{
|
||||||
"name": "onepiece",
|
path: '/onepiece',
|
||||||
"title": "onepiece"
|
component: () => import('@/pages/onepiece'),
|
||||||
}
|
name: 'onepiece',
|
||||||
|
meta: {
|
||||||
|
name: 'onepiece',
|
||||||
|
title: 'onepiece',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/son",
|
path: '/son',
|
||||||
"meta": {
|
meta: {
|
||||||
"name": "son",
|
name: 'son',
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}]
|
},
|
||||||
}
|
],
|
||||||
}
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
在`src/pages` 目录新建 `son.vue`:
|
在`src/pages` 目录新建 `son.vue`:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<config>
|
<config>
|
||||||
{
|
{
|
||||||
@ -115,11 +126,12 @@ export default {
|
|||||||
</config>
|
</config>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
#### 使用 `<MicroApp />` 组件的方式
|
#### 使用 `<MicroApp />` 组件的方式
|
||||||
|
|
||||||
:::tip
|
:::tip
|
||||||
建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。
|
建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上,否则很容易出现子应用加载了,但是页面没有渲染出来的情况。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<MicroApp :name="name" />
|
<MicroApp :name="name" />
|
||||||
@ -129,23 +141,23 @@ import { MicroApp } from '@fesjs/fes';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MicroApp },
|
components: { MicroApp },
|
||||||
setup(){
|
setup() {
|
||||||
const name = "app1"
|
const name = 'app1';
|
||||||
return {
|
return {
|
||||||
name
|
name,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||||
如果我们的路由使用 `history` 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据base可以很方便的匹配起来,而且不存在冲突。但是当我们使用 `hash` 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,`<MicroAppWithMemoHistory />` 出现了,完美解决上面的问题。
|
|
||||||
|
|
||||||
|
如果我们的路由使用 `history` 模式,那么在使用乾坤时还算方便,主应用和子应用的路由根据 base 可以很方便的匹配起来,而且不存在冲突。但是当我们使用 `hash` 模式时,就问题很大,主应用和子应用的路由必须一样才可以匹配上,用起来贼不方便。而且不能在一个页面上同时加载多个子应用,路由存在冲突!这时候,`<MicroAppWithMemoHistory />` 出现了,完美解决上面的问题。
|
||||||
|
|
||||||
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ,需要多传入 `url` 参数,用于指定加载子应用什么路由页面。
|
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ,需要多传入 `url` 参数,用于指定加载子应用什么路由页面。
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<MicroApp :name="name" url="/" />
|
<MicroApp :name="name" url="/" />
|
||||||
</template>
|
</template>
|
||||||
@ -154,40 +166,44 @@ import { MicroApp } from '@fesjs/fes';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MicroApp },
|
components: { MicroApp },
|
||||||
setup(){
|
setup() {
|
||||||
const name = "app1"
|
const name = 'app1';
|
||||||
return {
|
return {
|
||||||
name
|
name,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 子应用配置
|
## 子应用配置
|
||||||
|
|
||||||
### 第一步:插件注册
|
### 第一步:插件注册
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
qiankun: {
|
qiankun: {
|
||||||
micro: {},
|
micro: {},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
如果使用 `vite` 构建,当执行 `dev` 时需要额外配置:
|
如果使用 `vite` 构建,当执行 `dev` 时需要额外配置:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
qiankun: {
|
qiankun: {
|
||||||
micro: {
|
micro: {
|
||||||
useDevMode: true
|
useDevMode: true,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 第二步:配置运行时生命周期钩子(可选)
|
### 第二步:配置运行时生命周期钩子(可选)
|
||||||
|
|
||||||
插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 `src/app.js` 里导出 `qiankun` 对象,并实现每一个生命周期钩子,其中钩子函数的入参 `props` 由主应用自动注入。
|
插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子,但是如果你想在生命周期期间加一些自定义逻辑,可以在子应用的 `src/app.js` 里导出 `qiankun` 对象,并实现每一个生命周期钩子,其中钩子函数的入参 `props` 由主应用自动注入。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export const qiankun = {
|
export const qiankun = {
|
||||||
// 应用加载之前
|
// 应用加载之前
|
||||||
@ -199,7 +215,7 @@ export const qiankun = {
|
|||||||
console.log('app1 mount', props);
|
console.log('app1 mount', props);
|
||||||
},
|
},
|
||||||
// 当 props 更新时触发
|
// 当 props 更新时触发
|
||||||
async update(props){
|
async update(props) {
|
||||||
console.log('app1 update', props);
|
console.log('app1 update', props);
|
||||||
},
|
},
|
||||||
// 应用卸载之后触发
|
// 应用卸载之后触发
|
||||||
@ -207,7 +223,6 @@ export const qiankun = {
|
|||||||
console.log('app1 unmount', props);
|
console.log('app1 unmount', props);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## 父子应用通讯
|
## 父子应用通讯
|
||||||
@ -217,18 +232,20 @@ export const qiankun = {
|
|||||||
### 配合 [useModel](./model.md) 使用
|
### 配合 [useModel](./model.md) 使用
|
||||||
|
|
||||||
确保已经安装了 `@fesjs/plugin-model`:
|
确保已经安装了 `@fesjs/plugin-model`:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-model": "^2.0.0"
|
"@fesjs/plugin-model": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 主应用传递 props
|
#### 主应用传递 props
|
||||||
|
|
||||||
- 如果使用 `MicroApp` 组件模式消费子应用,直接通过 props 传递即可:
|
- 如果使用 `MicroApp` 组件模式消费子应用,直接通过 props 传递即可:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<MicroApp :name="name" :user="user" />
|
<MicroApp :name="name" :user="user" />
|
||||||
@ -238,26 +255,27 @@ import { MicroApp } from '@fesjs/fes';
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MicroApp },
|
components: { MicroApp },
|
||||||
setup(){
|
setup() {
|
||||||
const name = "app1"
|
const name = 'app1';
|
||||||
const user = ref("")
|
const user = ref('');
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
user
|
user,
|
||||||
}
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
- 如果使用路由绑定式消费子应用,那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用,如:
|
- 如果使用路由绑定式消费子应用,那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用,如:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const state = reactive({ c: 1 });
|
const state = reactive({ c: 1 });
|
||||||
return {
|
return {
|
||||||
state
|
state,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
@ -269,13 +287,13 @@ export default () => {
|
|||||||
```vue
|
```vue
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
setup(){
|
setup() {
|
||||||
const mainState = useModel('qiankunStateFromMain');
|
const mainState = useModel('qiankunStateFromMain');
|
||||||
return {
|
return {
|
||||||
mainState
|
mainState,
|
||||||
};
|
};
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -284,20 +302,20 @@ export default {
|
|||||||
- 主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)
|
- 主应用使用 props 的模式传递数据(参考主应用装载子应用配置一节)
|
||||||
- 子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)
|
- 子应用在生命周期钩子中获取 props 消费数据(参考子应用运行时配置一节)
|
||||||
|
|
||||||
|
|
||||||
### MicroApp
|
### MicroApp
|
||||||
|
|
||||||
| 属性 | 说明 | 类型 | 默认值 |
|
| 属性 | 说明 | 类型 | 默认值 |
|
||||||
| ---- | ----------- | ------------- | ---------- |
|
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||||
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
|
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||||
| settings | 子应用配置信息 | Object | {} |
|
| settings | 子应用配置信息 | Object | {} |
|
||||||
| props | 传入子应用的参数 | Object | {} |
|
| props | 传入子应用的参数 | Object | {} |
|
||||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||||
| cacheName | 子应用缓存名称,配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
| cacheName | 子应用缓存名称,配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||||
|
|
||||||
|
|
||||||
### MicroAppWithMemoHistory
|
### MicroAppWithMemoHistory
|
||||||
|
|
||||||
| 属性 | 说明 | 类型 | 默认值 |
|
| 属性 | 说明 | 类型 | 默认值 |
|
||||||
| ---- | ----------- | ------------- | ---------- |
|
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||||
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
|
| name | 子应用名称,传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||||
| settings | 子应用配置信息 | Object | {} |
|
| settings | 子应用配置信息 | Object | {} |
|
||||||
| props | 传入子应用的参数 | Object | {} |
|
| props | 传入子应用的参数 | Object | {} |
|
||||||
|
@ -1,8 +1,7 @@
|
|||||||
# @fesjs/plugin-sass
|
# @fesjs/plugin-sass
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
Fes.js 默认只支持 `less`,通过此插件扩展支持 `sass`。
|
Fes.js 默认只支持 `less`,通过此插件扩展支持 `sass`。
|
||||||
|
|
||||||
::: tip webpack 构建 sass 插件
|
::: tip webpack 构建 sass 插件
|
||||||
@ -10,22 +9,26 @@ Fes.js 默认只支持 `less`,通过此插件扩展支持 `sass`。
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-sass": "^2.0.0"
|
"@fesjs/plugin-sass": "^3.0.0"
|
||||||
},
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## global css
|
## global css
|
||||||
添加 `src/global.scss` 和 `src/global.sass` 为全局CSS入口,添加一些通用样式内容。
|
|
||||||
|
添加 `src/global.scss` 和 `src/global.sass` 为全局 CSS 入口,添加一些通用样式内容。
|
||||||
|
|
||||||
## Vue 单文件组件
|
## Vue 单文件组件
|
||||||
|
|
||||||
Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`,例如:
|
Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`,例如:
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<style lang="scss">
|
<style lang="scss"></style>
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
|
@ -41,8 +41,8 @@ import { useStore } from 'vuex';
|
|||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-vuex": "^2.0.0"
|
"@fesjs/plugin-vuex": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
@ -1,15 +1,18 @@
|
|||||||
# @fesjs/plugin-watermark
|
# @fesjs/plugin-watermark
|
||||||
|
|
||||||
## 介绍
|
## 介绍
|
||||||
|
|
||||||
给页面添加水印效果
|
给页面添加水印效果
|
||||||
|
|
||||||
## 启用方式
|
## 启用方式
|
||||||
|
|
||||||
在 `package.json` 中引入依赖:
|
在 `package.json` 中引入依赖:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@fesjs/fes": "^2.0.0",
|
"@fesjs/fes": "^3.0.0",
|
||||||
"@fesjs/plugin-watermark": "^2.0.0"
|
"@fesjs/plugin-watermark": "^3.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
@ -19,9 +22,9 @@
|
|||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
watermark: {
|
watermark: {
|
||||||
disabled: false
|
disabled: false,
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### disabled
|
### disabled
|
||||||
@ -33,9 +36,9 @@ export default {
|
|||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
watermark: {
|
watermark: {
|
||||||
disabled: true
|
disabled: true,
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## API
|
||||||
@ -52,20 +55,21 @@ destroyWatermark(); // 销毁水印
|
|||||||
```
|
```
|
||||||
|
|
||||||
默认参数是:
|
默认参数是:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
{
|
{
|
||||||
content = '请勿外传',
|
(content = '请勿外传'),
|
||||||
container = document.body,
|
(container = document.body),
|
||||||
width = 300,
|
(width = 300),
|
||||||
height = 300,
|
(height = 300),
|
||||||
textAlign = 'center',
|
(textAlign = 'center'),
|
||||||
textBaseline = 'middle',
|
(textBaseline = 'middle'),
|
||||||
fontSize = '14px',
|
(fontSize = '14px'),
|
||||||
fontFamily = 'Microsoft Yahei',
|
(fontFamily = 'Microsoft Yahei'),
|
||||||
fillStyle = 'rgba(184, 184, 184, 0.3)',
|
(fillStyle = 'rgba(184, 184, 184, 0.3)'),
|
||||||
rotate = 25,
|
(rotate = 25),
|
||||||
zIndex = 99999,
|
(zIndex = 99999),
|
||||||
timestamp = 'YYYY-MM-DD HH:mm'
|
(timestamp = 'YYYY-MM-DD HH:mm');
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "fes.js",
|
"name": "fes.js",
|
||||||
"version": "3.0.0-rc.17",
|
"version": "3.0.0",
|
||||||
"description": "一个好用的前端管理台快速开发框架",
|
"description": "一个好用的前端管理台快速开发框架",
|
||||||
"preferGlobal": true,
|
"preferGlobal": true,
|
||||||
"private": true,
|
"private": true,
|
||||||
|
@ -51,7 +51,7 @@
|
|||||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||||
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
"@fesjs/plugin-model": "^3.0.0-rc.0",
|
||||||
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
"@fesjs/plugin-enums": "^3.0.0-rc.0",
|
||||||
"@fesjs/fes-design": "^0.7.9",
|
"@fesjs/fes-design": "^0.7.23",
|
||||||
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
"@fesjs/builder-webpack": "^3.0.0-rc.0",
|
||||||
"vue": "^3.2.47",
|
"vue": "^3.2.47",
|
||||||
"core-js": "^3.29.1"
|
"core-js": "^3.29.1"
|
||||||
|
27
pnpm-lock.yaml
generated
27
pnpm-lock.yaml
generated
@ -139,8 +139,8 @@ importers:
|
|||||||
specifier: ^3.0.0-rc.0
|
specifier: ^3.0.0-rc.0
|
||||||
version: link:../../../../fes
|
version: link:../../../../fes
|
||||||
'@fesjs/fes-design':
|
'@fesjs/fes-design':
|
||||||
specifier: ^0.7.9
|
specifier: ^0.7.23
|
||||||
version: 0.7.9(vue@3.2.47)
|
version: 0.7.23(vue@3.2.47)
|
||||||
'@fesjs/plugin-access':
|
'@fesjs/plugin-access':
|
||||||
specifier: ^3.0.0-rc.0
|
specifier: ^3.0.0-rc.0
|
||||||
version: link:../../../../fes-plugin-access
|
version: link:../../../../fes-plugin-access
|
||||||
@ -4407,6 +4407,29 @@ packages:
|
|||||||
- '@vue/composition-api'
|
- '@vue/composition-api'
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@fesjs/fes-design@0.7.23(vue@3.2.47):
|
||||||
|
resolution: {integrity: sha512-FCQk4+SBVmYgQLhxjUqkxT701o7LprnhrBf7o5zPLhu3wZKbhPGAc2g96reBf08nWjxV6UubAX3QpeQ5aQWxcA==}
|
||||||
|
peerDependencies:
|
||||||
|
vue: ^3.2.24
|
||||||
|
dependencies:
|
||||||
|
'@babel/runtime': 7.21.0
|
||||||
|
'@floating-ui/dom': 0.4.5
|
||||||
|
'@juggle/resize-observer': 3.4.0
|
||||||
|
'@types/lodash-es': 4.17.7
|
||||||
|
'@types/normalize-wheel': 1.0.1
|
||||||
|
'@vue/shared': 3.2.47
|
||||||
|
'@vueuse/core': 9.13.0(vue@3.2.47)
|
||||||
|
async-validator: 4.2.5
|
||||||
|
csstype: 3.1.1
|
||||||
|
date-fns: 2.29.3
|
||||||
|
lodash-es: 4.17.21
|
||||||
|
normalize-wheel: 1.0.1
|
||||||
|
stickybits: 3.7.11
|
||||||
|
vue: 3.2.47
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- '@vue/composition-api'
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@fesjs/fes-design@0.7.9(vue@3.2.47):
|
/@fesjs/fes-design@0.7.9(vue@3.2.47):
|
||||||
resolution: {integrity: sha512-8RH2FGk1QmSho5/r3BplubnfWbDnyAnQBpYQLFUdfsnWIF4OzDQ24Fp9PjStlLSe6VO5vZ+onX1u9hINNUY6cA==}
|
resolution: {integrity: sha512-8RH2FGk1QmSho5/r3BplubnfWbDnyAnQBpYQLFUdfsnWIF4OzDQ24Fp9PjStlLSe6VO5vZ+onX1u9hINNUY6cA==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user