mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 03:05:07 +08:00
docs: 优化文档版本依赖
This commit is contained in:
winixt
parent
49063482eb
commit
b0c764f75a
@ -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
|
||||
|
||||
@ -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。
|
||||
|
||||
这里的 `mock` 是 Mock 插件 的 key。
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
<MonacoEditor v-model="json" language="json" height="400px" check> </MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
MonacoEditor,
|
||||
},
|
||||
setup(){
|
||||
setup() {
|
||||
const json = ref('');
|
||||
return {
|
||||
json
|
||||
json,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 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 |
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------ | ------------------ | --------------------------------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
|
||||
@ -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
|
||||
<template>
|
||||
<div>
|
||||
<!-- 遍历枚举status -->
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">
|
||||
{{item.value}}：{{item.key}}
|
||||
</div>
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">{{ item.value }}：{{ item.key }}</div>
|
||||
<!-- 遍历枚举扩展后的roles -->
|
||||
<div v-for="item in roles" :key="item.key">
|
||||
{{item.name}}：{{item.disabled}}
|
||||
</div>
|
||||
<div v-for="item in roles" :key="item.key">{{ item.name }}：{{ item.disabled }}</div>
|
||||
<!-- 获取枚举roles为2的英文名 -->
|
||||
<div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
|
||||
<div>{{ enumsGet('roles', '2', { dir: 'eName' }) }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -65,64 +75,70 @@ import { enums } from '@fesjs/fes';
|
||||
export default {
|
||||
setup() {
|
||||
// 动态添加枚举，枚举项是对象，并指定key的属性名为id
|
||||
enums.push('roles', [
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1']
|
||||
}
|
||||
], { keyName: 'id' });
|
||||
enums.push(
|
||||
'roles',
|
||||
[
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1'],
|
||||
},
|
||||
],
|
||||
{ keyName: 'id' },
|
||||
);
|
||||
// 导出定制格式的roles，扩展枚举项新的属性name、disabled
|
||||
const roles = enums.get('roles', {
|
||||
extend: [
|
||||
{
|
||||
key: 'name',
|
||||
dir: 'cName' // 指定取值路径，取属性cName的值
|
||||
dir: 'cName', // 指定取值路径，取属性cName的值
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
// 传入函数，获取结果值
|
||||
transfer: item => item.value.perm.some(i => i >= 2)
|
||||
}
|
||||
]
|
||||
transfer: (item) => item.value.perm.some((i) => i >= 2),
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log(roles);
|
||||
// [{key: '1', name: '系统管理员', disabled: true, value: {...}}, ....]
|
||||
return {
|
||||
enumsGet: enums.get,
|
||||
roles
|
||||
roles,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### 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
|
||||
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<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(name: string)
|
||||
|
||||
- remove(name: string)
|
||||
|
||||
移除指定的枚举
|
||||
|
||||
### concat
|
||||
|
||||
基于现有的枚举，连接上新的枚举后返回新的枚举
|
||||
* `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
* opt.keyName 指定key的取值属性，默认是key
|
||||
* opt.valueName 指定value的取值属性
|
||||
* opt.before 是否添加在现有的之前，默认是false
|
||||
* opt.extend：返回的枚举[extend配置](#extend配置)
|
||||
|
||||
- `concat(name: string, _enum: Array<Array|Object>, opt?: Object))`
|
||||
- opt.keyName 指定 key 的取值属性，默认是 key
|
||||
- opt.valueName 指定 value 的取值属性
|
||||
- opt.before 是否添加在现有的之前，默认是 false
|
||||
- opt.extend：返回的枚举[extend 配置](#extend配置)
|
||||
|
||||
### 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` 指定扩展的属性名
|
||||
* `dir` 指定该属性的取值路径
|
||||
* `transfer(item: {key: any, value: any})` 转换函数，参数未枚举项，返回就是该属性的值
|
||||
::: tip
|
||||
同时设置[dir](#dir规则)和transfer，transfer优先
|
||||
:::
|
||||
|
||||
- `extend: Array<Object>`
|
||||
_ `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就是当前值
|
||||
:::
|
||||
枚举项 value 如果是基本类型，则规则不生效，value 就是当前值
|
||||
:::
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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` > 默认配置
|
||||
`args` 配置 > `package.json`中的 `jest` > `jest.config.js` > 默认配置
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
多语言文件的命名规范：`<lang>-<COUNTRY>.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，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- **返回值**：`null`
|
||||
|
||||
- **类型**：`Function`
|
||||
- **详情**：设置当前的语言。
|
||||
- **参数**：
|
||||
- locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- **返回值**：`null`
|
||||
|
||||
```js
|
||||
import { locale } from '@fesjs/fes';
|
||||
locale.setLocale({ locale: 'en-US' });
|
||||
```
|
||||
|
||||
#### locale.addLocale
|
||||
- **类型**：`Function`
|
||||
|
||||
- **详情**：手动添加语言配置。
|
||||
- **参数**：
|
||||
- locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- messages, 语言信息。
|
||||
- **返回值**：`null`
|
||||
|
||||
- **类型**：`Function`
|
||||
- **详情**：手动添加语言配置。
|
||||
- **参数**：
|
||||
- locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
|
||||
- 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
|
||||
<template>
|
||||
<form>
|
||||
<label>{{ t('language') }}</label>
|
||||
</form>
|
||||
<p>message: {{ t('hello') }}</p>
|
||||
<form>
|
||||
<label>{{ t('language') }}</label>
|
||||
</form>
|
||||
<p>message: {{ t('hello') }}</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^3.0.0-rc.2",
|
||||
"@fesjs/plugin-login": "^3.0.0-rc.1"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-login": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,60 +1,69 @@
|
||||
# @fesjs/plugin-model
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 package.json 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.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`。
|
||||
|
||||
文件名则对应最终 `model` 的 `name`，你可以通过插件提供的 `API` 来消费 `model` 中的数据。
|
||||
|
||||
### Model 文件
|
||||
|
||||
**src/models/useAuthModel.js**
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue'
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default function useAuthModel() {
|
||||
const user = reactive({});
|
||||
const user = reactive({});
|
||||
|
||||
const signin = ()=>{
|
||||
// todo
|
||||
}
|
||||
const signin = () => {
|
||||
// todo
|
||||
};
|
||||
|
||||
const signout = ()=>{
|
||||
// todo
|
||||
}
|
||||
const signout = () => {
|
||||
// todo
|
||||
};
|
||||
|
||||
return {
|
||||
user,
|
||||
signin,
|
||||
signout
|
||||
}
|
||||
return {
|
||||
user,
|
||||
signin,
|
||||
signout,
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### 在组件中使用 Model
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { useModel } from "@fesjs/fes"
|
||||
import { useModel } from '@fesjs/fes';
|
||||
export default {
|
||||
setup(){
|
||||
const { user, signin, signout } = useModel("useAuthModel")
|
||||
}
|
||||
}
|
||||
setup() {
|
||||
const { user, signin, signout } = useModel('useAuthModel');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### @@initialState
|
||||
|
||||
在`beforeRender`的返回的内容会写入`@@initialState`
|
||||
|
||||
```js
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -65,17 +74,19 @@ export const beforeRender = {
|
||||
setRole('admin');
|
||||
// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
|
||||
resolve({
|
||||
userName: 'harrywan'
|
||||
userName: 'harrywan',
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
````
|
||||
```
|
||||
|
||||
然后我们可以在其他组件中使用：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="right">{{initialState.userName}}</div>
|
||||
<div class="right">{{ initialState.userName }}</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useModel } from '@fesjs/fes';
|
||||
@ -84,24 +95,21 @@ export default {
|
||||
setup() {
|
||||
const initialState = useModel('@@initialState');
|
||||
return {
|
||||
initialState
|
||||
initialState,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scope>
|
||||
</style>
|
||||
<style scope></style>
|
||||
```
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### useModel
|
||||
|
||||
**useModel(name)**
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**: 获取 Model 数据，也就是 Model 文件默认导出函数执行的结果。
|
||||
- **参数**：
|
||||
- name，传入 Model 文件名
|
||||
|
||||
- **类型**：函数
|
||||
- **详情**: 获取 Model 数据， 也就是 Model 文件默认导出函数执行的结果。
|
||||
- **参数**：
|
||||
- name，传入 Model 文件名
|
||||
|
||||
@ -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: <PageLoading />,
|
||||
@ -80,11 +89,11 @@ export const beforeRender = {
|
||||
const store = useStore(pinia);
|
||||
store.$patch({
|
||||
userName: '李雷',
|
||||
role: 'admin'
|
||||
role: 'admin',
|
||||
});
|
||||
setRole('admin');
|
||||
}, 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。
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `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
|
||||
<config>
|
||||
{
|
||||
@ -115,11 +126,12 @@ export default {
|
||||
</config>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroApp />` 组件的方式
|
||||
|
||||
#### 使用 `<MicroApp />` 组件的方式
|
||||
:::tip
|
||||
建议使用这种方式来引入不带路由的子应用。 否则请自行关注子应用依赖的路由跟当前浏览器 url 是否能正确匹配上，否则很容易出现子应用加载了，但是页面没有渲染出来的情况。
|
||||
:::
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" />
|
||||
@ -129,23 +141,23 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据 base 可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
|
||||
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
|
||||
|
||||
```vue
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" url="/" />
|
||||
</template>
|
||||
@ -154,40 +166,44 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
name,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 子应用配置
|
||||
|
||||
### 第一步：插件注册
|
||||
|
||||
```js
|
||||
export default {
|
||||
qiankun: {
|
||||
micro: {},
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
如果使用 `vite` 构建，当执行 `dev` 时需要额外配置：
|
||||
|
||||
```js
|
||||
export default {
|
||||
qiankun: {
|
||||
micro: {
|
||||
useDevMode: true
|
||||
useDevMode: true,
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 第二步：配置运行时生命周期钩子（可选）
|
||||
|
||||
插件会自动为你创建好 `qiankun` 子应用需要的生命周期钩子，但是如果你想在生命周期期间加一些自定义逻辑，可以在子应用的 `src/app.js` 里导出 `qiankun` 对象，并实现每一个生命周期钩子，其中钩子函数的入参 `props` 由主应用自动注入。
|
||||
|
||||
```js
|
||||
export const qiankun = {
|
||||
// 应用加载之前
|
||||
@ -199,7 +215,7 @@ export const qiankun = {
|
||||
console.log('app1 mount', props);
|
||||
},
|
||||
// 当 props 更新时触发
|
||||
async update(props){
|
||||
async update(props) {
|
||||
console.log('app1 update', props);
|
||||
},
|
||||
// 应用卸载之后触发
|
||||
@ -207,7 +223,6 @@ export const qiankun = {
|
||||
console.log('app1 unmount', props);
|
||||
},
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
## 父子应用通讯
|
||||
@ -217,18 +232,20 @@ export const qiankun = {
|
||||
### 配合 [useModel](./model.md) 使用
|
||||
|
||||
确保已经安装了 `@fesjs/plugin-model`：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-model": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 主应用传递 props
|
||||
|
||||
- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可：
|
||||
- 如果使用 `MicroApp` 组件模式消费子应用，直接通过 props 传递即可：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" :user="user" />
|
||||
@ -238,26 +255,27 @@ import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
const user = ref("")
|
||||
setup() {
|
||||
const name = 'app1';
|
||||
const user = ref('');
|
||||
return {
|
||||
name,
|
||||
user
|
||||
}
|
||||
}
|
||||
}
|
||||
user,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如：
|
||||
- 如果使用路由绑定式消费子应用，那么约定`src/models/qiankunStateForMicro.js` 的模型数据将作为 `props` 船体给子应用，如：
|
||||
|
||||
```js
|
||||
import { reactive } from 'vue';
|
||||
|
||||
export default () => {
|
||||
const state = reactive({ c: 1 });
|
||||
return {
|
||||
state
|
||||
state,
|
||||
};
|
||||
};
|
||||
```
|
||||
@ -269,38 +287,38 @@ export default () => {
|
||||
```vue
|
||||
<script>
|
||||
export default {
|
||||
setup(){
|
||||
setup() {
|
||||
const mainState = useModel('qiankunStateFromMain');
|
||||
return {
|
||||
mainState
|
||||
mainState,
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 基于 props 传递
|
||||
|
||||
- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
|
||||
- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）
|
||||
|
||||
- 主应用使用 props 的模式传递数据（参考主应用装载子应用配置一节）
|
||||
- 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）
|
||||
|
||||
### MicroApp
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---- | ----------- | ------------- | ---------- |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
|
||||
### MicroAppWithMemoHistory
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---- | ----------- | ------------- | ---------- |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
| url | 子应用的路由地址 | String | - |
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ---------------------------------------------------------- | ------ | ------ |
|
||||
| name | 子应用名称，传入`qiankun.main.apps`配置中的`name` | String | - |
|
||||
| settings | 子应用配置信息 | Object | {} |
|
||||
| props | 传入子应用的参数 | Object | {} |
|
||||
| lifeCycles | 子应用生命周期钩子 | Object | {} |
|
||||
| cacheName | 子应用缓存名称，配置后根据`name`+`cacheName`缓存子应用实例 | Object | - |
|
||||
| url | 子应用的路由地址 | String | - |
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
# @fesjs/plugin-sass
|
||||
|
||||
|
||||
|
||||
## 介绍
|
||||
|
||||
Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。
|
||||
|
||||
::: tip webpack 构建 sass 插件
|
||||
@ -10,22 +9,26 @@ Fes.js 默认只支持 `less`，通过此插件扩展支持 `sass`。
|
||||
:::
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-sass": "^2.0.0"
|
||||
},
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-sass": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## global css
|
||||
添加 `src/global.scss` 和 `src/global.sass` 为全局CSS入口，添加一些通用样式内容。
|
||||
|
||||
添加 `src/global.scss` 和 `src/global.sass` 为全局 CSS 入口，添加一些通用样式内容。
|
||||
|
||||
## Vue 单文件组件
|
||||
|
||||
Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`，例如：
|
||||
|
||||
```vue
|
||||
<style lang="scss">
|
||||
</style>
|
||||
```
|
||||
<style lang="scss"></style>
|
||||
```
|
||||
|
||||
@ -41,8 +41,8 @@ import { useStore } from 'vuex';
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-vuex": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-vuex": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
# @fesjs/plugin-watermark
|
||||
|
||||
## 介绍
|
||||
|
||||
给页面添加水印效果
|
||||
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-watermark": "^2.0.0"
|
||||
"@fesjs/fes": "^3.0.0",
|
||||
"@fesjs/plugin-watermark": "^3.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -19,9 +22,9 @@
|
||||
```js
|
||||
export default {
|
||||
watermark: {
|
||||
disabled: false
|
||||
disabled: false,
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### disabled
|
||||
@ -33,9 +36,9 @@ export default {
|
||||
```js
|
||||
export default {
|
||||
watermark: {
|
||||
disabled: true
|
||||
disabled: true,
|
||||
},
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## API
|
||||
@ -52,21 +55,22 @@ destroyWatermark(); // 销毁水印
|
||||
```
|
||||
|
||||
默认参数是：
|
||||
|
||||
```js
|
||||
{
|
||||
content = '请勿外传',
|
||||
container = document.body,
|
||||
width = 300,
|
||||
height = 300,
|
||||
textAlign = 'center',
|
||||
textBaseline = 'middle',
|
||||
fontSize = '14px',
|
||||
fontFamily = 'Microsoft Yahei',
|
||||
fillStyle = 'rgba(184, 184, 184, 0.3)',
|
||||
rotate = 25,
|
||||
zIndex = 99999,
|
||||
timestamp = 'YYYY-MM-DD HH:mm'
|
||||
(content = '请勿外传'),
|
||||
(container = document.body),
|
||||
(width = 300),
|
||||
(height = 300),
|
||||
(textAlign = 'center'),
|
||||
(textBaseline = 'middle'),
|
||||
(fontSize = '14px'),
|
||||
(fontFamily = 'Microsoft Yahei'),
|
||||
(fillStyle = 'rgba(184, 184, 184, 0.3)'),
|
||||
(rotate = 25),
|
||||
(zIndex = 99999),
|
||||
(timestamp = 'YYYY-MM-DD HH:mm');
|
||||
}
|
||||
```
|
||||
|
||||
如果不需要时间戳，则可以设置`timestamp`为`false`。
|
||||
如果不需要时间戳，则可以设置`timestamp`为`false`。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fes.js",
|
||||
"version": "3.0.0-rc.17",
|
||||
"version": "3.0.0",
|
||||
"description": "一个好用的前端管理台快速开发框架",
|
||||
"preferGlobal": true,
|
||||
"private": true,
|
||||
|
||||
@ -51,7 +51,7 @@
|
||||
"@fesjs/plugin-layout": "^5.0.0-rc.0",
|
||||
"@fesjs/plugin-model": "^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",
|
||||
"vue": "^3.2.47",
|
||||
"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
|
||||
version: link:../../../../fes
|
||||
'@fesjs/fes-design':
|
||||
specifier: ^0.7.9
|
||||
version: 0.7.9(vue@3.2.47)
|
||||
specifier: ^0.7.23
|
||||
version: 0.7.23(vue@3.2.47)
|
||||
'@fesjs/plugin-access':
|
||||
specifier: ^3.0.0-rc.0
|
||||
version: link:../../../../fes-plugin-access
|
||||
@ -4407,6 +4407,29 @@ packages:
|
||||
- '@vue/composition-api'
|
||||
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):
|
||||
resolution: {integrity: sha512-8RH2FGk1QmSho5/r3BplubnfWbDnyAnQBpYQLFUdfsnWIF4OzDQ24Fp9PjStlLSe6VO5vZ+onX1u9hINNUY6cA==}
|
||||
peerDependencies:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user