mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
docs: 更新文档
This commit is contained in:
harrywan
parent
87039c27fa
commit
93c0fe0c59
@ -60,6 +60,7 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
|
||||
| [@fesjs/plugin-vuex](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/vuex.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Vuex`, 提供状态管理能力 |
|
||||
| [@fesjs/plugin-qiankun](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/qiankun.html#%E4%BB%8B%E7%BB%8D) | 基于 `qiankun`，提供微服务能力 |
|
||||
| [@fesjs/plugin-sass](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/sass.html#%E4%BB%8B%E7%BB%8D) | 样式支持sass |
|
||||
| [@fesjs/plugin-monaco-editor](https://winixt.gitee.io/fesjs/zh/reference/plugin/plugins/editor.html#%E4%BB%8B%E7%BB%8D) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code使用的代码编辑器） |
|
||||
|
||||
## 像数 1, 2, 3 一样容易
|
||||
使用 `yarn`：
|
||||
|
||||
@ -62,6 +62,7 @@ export const en: SidebarConfig = {
|
||||
'/reference/plugin/plugins/vuex.md',
|
||||
'/reference/plugin/plugins/qiankun.md',
|
||||
'/reference/plugin/plugins/sass.md',
|
||||
'/reference/plugin/plugins/editor.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -62,6 +62,7 @@ export const zh: SidebarConfig = {
|
||||
'/zh/reference/plugin/plugins/vuex.md',
|
||||
'/zh/reference/plugin/plugins/qiankun.md',
|
||||
'/zh/reference/plugin/plugins/sass.md',
|
||||
'/zh/reference/plugin/plugins/editor.md',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -20,7 +20,7 @@ export default {
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
footer: 'Created by MumbleFe',
|
||||
footer: 'Created by MumbelFe',
|
||||
multiTabs: false,
|
||||
menus: [{
|
||||
name: 'index'
|
||||
|
||||
@ -23,5 +23,19 @@ Fes.js 中约定 `src/global.css` 为全局样式，如果存在此文件，会
|
||||
</style>
|
||||
```
|
||||
|
||||
## CSS Modules
|
||||
支持 `Vue` 的 [CSS Modules](https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E7%94%A8%E6%B3%95) 用法，可以直接使用：
|
||||
```vue
|
||||
<style module>
|
||||
.layout-content {
|
||||
max-width: 1000px;
|
||||
}
|
||||
```
|
||||
如果想直接引入CSS文件的话，则CSS文件名需要包含`.module`，比如：
|
||||
```js
|
||||
import style from '@/styles/index.module.css'
|
||||
console.log(style)
|
||||
```
|
||||
|
||||
## CSS 预处理器
|
||||
Fes.js 内置支持 `less`，不支持 `sass` 和 `stylus`，但如果有需求，可以通过 `chainWebpack` 配置或者 `fes-plugin` 插件的形式支持。
|
||||
@ -1,7 +1,7 @@
|
||||
# 快速上手
|
||||
|
||||
## 依赖环境
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 `10.13` 或以上。
|
||||
首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 10.13 或以上。
|
||||
```bash
|
||||
# 打印 node 版本
|
||||
node -v
|
||||
|
||||
@ -4,7 +4,7 @@ Mock 数据是前端开发过程中必不可少的一环，是分离前后端开
|
||||
|
||||
## 约定式 Mock 文件
|
||||
|
||||
Fes.js 约定 `src/mock.js` 为 mock 文件。
|
||||
Fes.js 约定 `./mock.js` 为 mock 文件。
|
||||
|
||||
比如：
|
||||
```
|
||||
@ -172,7 +172,6 @@ export default function ({ cgiMock, mockjs, utils }) {
|
||||
- utils.file(path)，从项目根目录根据path寻找文件，返回文件流。
|
||||
|
||||
## 配置 Mock
|
||||
|
||||
详见配置 [mock](../reference/config/#mock)。
|
||||
|
||||
## 关闭 Mock
|
||||
|
||||
@ -39,6 +39,26 @@ export function beforeRender(lastOpts) {
|
||||
};
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
```
|
||||
export function patchRoutes({ routes }) {
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
### modifyClientRenderOpts
|
||||
|
||||
modifyClientRenderOpts(lastOpts)
|
||||
@ -83,26 +103,6 @@ export function rootContainer(container) {
|
||||
}
|
||||
```
|
||||
|
||||
### patchRoutes
|
||||
|
||||
patchRoutes({routes })
|
||||
|
||||
|
||||
修改路由。
|
||||
|
||||
比如在最前面添加一个 /foo 路由：
|
||||
```
|
||||
export function patchRoutes({ routes }) {
|
||||
routes.unshift({
|
||||
path: '/foo',
|
||||
component: require('@/extraRoutes/foo').default,
|
||||
});
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
直接修改 `routes`, 不需要返回
|
||||
:::
|
||||
|
||||
### onAppCreated
|
||||
|
||||
onAppCreated({app})
|
||||
@ -126,6 +126,10 @@ render(oldRender: Function)
|
||||
|
||||
覆写 render。
|
||||
|
||||
比如用于渲染之前做权限校验。
|
||||
|
||||
|
||||
|
||||
### onRouterCreated
|
||||
|
||||
onRouterCreated({router})
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# HTML模板
|
||||
# HTML和静态资源
|
||||
|
||||
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认 HTML模板 是：
|
||||
```html
|
||||
@ -50,4 +50,34 @@ export default {
|
||||
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
|
||||
- `NODE_ENV`
|
||||
- `FES_ENV`
|
||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||
- `.env` 文件中以 `FES_APP_` 开头的变量
|
||||
|
||||
## 处理静态资源
|
||||
|
||||
放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
|
||||
|
||||
### `public` 文件夹
|
||||
|
||||
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
|
||||
|
||||
* 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：
|
||||
|
||||
```html
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
```
|
||||
|
||||
* 在模板中，你首先需要向你的组件传入基础 URL：
|
||||
|
||||
```html
|
||||
setup() {
|
||||
return {
|
||||
publicPath: process.env.BASE_URL
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后：
|
||||
|
||||
```html
|
||||
<img :src="`${publicPath}my-image.png`">
|
||||
```
|
||||
|
||||
@ -144,6 +144,24 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## extraBabelPlugins
|
||||
|
||||
- 类型： `array`
|
||||
- 默认值： `[]`
|
||||
- 详情：
|
||||
|
||||
配置额外的 babel 插件。
|
||||
|
||||
- 示例：
|
||||
```js
|
||||
export default {
|
||||
extraBabelPlugins: [
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }],
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
## extraPostCSSPlugins
|
||||
|
||||
- 类型： `array`
|
||||
@ -278,6 +296,12 @@ export default {
|
||||
|
||||
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 `publicPath` 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 `publicPath` 的值设为 CDN 的值就可以。
|
||||
|
||||
## router
|
||||
|
||||
- 类型： `object`
|
||||
- 默认值： `{ mode: 'hash' }`
|
||||
- 详情： 配置路由，具体请查看指南中关于路由的介绍
|
||||
|
||||
## singular
|
||||
- 类型： `boolean`
|
||||
- 默认值： `false`
|
||||
|
||||
120
docs/reference/plugin/plugins/editor.md
Normal file
120
docs/reference/plugin/plugins/editor.md
Normal file
@ -0,0 +1,120 @@
|
||||
# @fesjs/plugin-monaco-editor
|
||||
|
||||
|
||||
## 介绍
|
||||
我们会遇到需要编辑代码的场景，比如编辑`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"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### 编译时配置
|
||||
在执行 `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)。
|
||||
|
||||
|
||||
#### filename
|
||||
- **类型**：自定义worker脚本名称
|
||||
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
#### publicPath
|
||||
- **类型**：自定义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`时需要配置为：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### monaco
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等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' },
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 组件 MonacoEditor
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
setup(){
|
||||
const json = ref('');
|
||||
return {
|
||||
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` |
|
||||
|
||||
#### events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
@ -14,12 +14,23 @@
|
||||
|
||||
- 可配置页面是否需要 layout。
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 布局类型
|
||||
配置参数是 `navigation`, 内容默认是 `side`：
|
||||
配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 和 `top`， 默认是 `side`：
|
||||
```js
|
||||
export default {
|
||||
layout: {
|
||||
navigation: 'side
|
||||
navigation: 'side'
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -36,28 +47,31 @@ export default {
|
||||
<!--  -->
|
||||
<img :src="$withBase('mixin.png')" alt="mixin">
|
||||
|
||||
## 启用方式
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/plugin-layout": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### 页面禁用布局
|
||||
Fes.js 渲染路由时，如果路由元信息存在配置 `layout` 为 `false`，则表示禁用此配置，用户只需要如下配置：
|
||||
布局是默认开启的，但是可能某些页面不需要展示布局样式，比如登录页面。我们只需要在页面的`.vue`中添加如下配置：
|
||||
```vue
|
||||
<config>
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
</script>
|
||||
```
|
||||
如果只是不想展示`side`，则：
|
||||
<config lang="json">
|
||||
{
|
||||
"layout": {
|
||||
"side": false
|
||||
}
|
||||
}
|
||||
</config>
|
||||
```
|
||||
`layout`的可选配置有：
|
||||
|
||||
- **side**： 左侧区域
|
||||
|
||||
- **top**： 头部区域
|
||||
|
||||
- **logo**：logo和标题区域。
|
||||
|
||||
## 配置
|
||||
|
||||
@ -174,13 +188,13 @@ export default {
|
||||
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
|
||||
```js
|
||||
{
|
||||
name: "user"
|
||||
icon: "user"
|
||||
}
|
||||
```
|
||||
- 图表使用本地或者远程svg图片。
|
||||
- 图标使用本地或者远程svg图片。
|
||||
```js
|
||||
{
|
||||
name: "/wine-outline.svg"
|
||||
icon: "/wine-outline.svg"
|
||||
}
|
||||
```
|
||||
|
||||
@ -201,7 +215,7 @@ export const layout = {
|
||||
|
||||
- **默认值**：`null`
|
||||
|
||||
- **详情**：布局的 Header 部位提供组件自定义功能。
|
||||
- **详情**：top的区域部分位置提供组件自定义功能。
|
||||
|
||||
#### unAccessHandler
|
||||
- **类型**：`Function`
|
||||
@ -261,4 +275,4 @@ export const access = {
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
```
|
||||
|
||||
@ -136,6 +136,30 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 使用 `<MicroAppWithMemoHistory />` 组件的方式
|
||||
如果我们的路由使用 `history` 模式，那么在使用乾坤时还算方便，主应用和子应用的路由根据base可以很方便的匹配起来，而且不存在冲突。但是当我们使用 `hash` 模式时，就问题很大，主应用和子应用的路由必须一样才可以匹配上，用起来贼不方便。而且不能在一个页面上同时加载多个子应用，路由存在冲突！这时候，`<MicroAppWithMemoHistory />` 出现了，完美解决上面的问题。
|
||||
|
||||
|
||||
`<MicroAppWithMemoHistory />` 相比 `<MicroApp />` ，需要多传入 `url` 参数，用于指定加载子应用什么路由页面。
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MicroApp :name="name" url="/" />
|
||||
</template>
|
||||
<script>
|
||||
import { MicroApp } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
components: { MicroApp },
|
||||
setup(){
|
||||
const name = "app1"
|
||||
return {
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 子应用配置
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
```js
|
||||
export default {
|
||||
request: {
|
||||
dataField: 'result',
|
||||
dataField: 'result'
|
||||
},
|
||||
}
|
||||
```
|
||||
@ -32,6 +32,16 @@ export default {
|
||||
|
||||
`dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
|
||||
|
||||
|
||||
#### base(即将废弃)
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`base` 接口前缀。
|
||||
|
||||
⚠️警告，这个字段将在下个版本废弃，推荐使用 [axios baseURL](https://github.com/axios/axios)。
|
||||
### 运行时配置
|
||||
|
||||
在 `app.js` 中进行运行时配置。
|
||||
@ -42,6 +52,8 @@ export const request = {
|
||||
responseDataAdaptor: (data) => {
|
||||
|
||||
},
|
||||
// 关闭 response data 校验（只判断 xhr status）
|
||||
closeResDataCheck: false,
|
||||
// 请求拦截器
|
||||
requestInterceptors: [],
|
||||
// 相应拦截器
|
||||
@ -50,17 +62,45 @@ export const request = {
|
||||
// 内部以 reponse.data.code === '0' 判断请求是否成功
|
||||
// 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
|
||||
errorHandler: {
|
||||
11199: (response) => {
|
||||
|
||||
11199(response) {
|
||||
// 特殊 code 处理逻辑
|
||||
},
|
||||
404: (error) => {
|
||||
|
||||
404(error) {
|
||||
},
|
||||
default(error) {
|
||||
// 异常统一处理
|
||||
}
|
||||
},
|
||||
// 其他 axios 配置
|
||||
...otherConfigs
|
||||
}
|
||||
```
|
||||
|
||||
#### skipErrorHandler
|
||||
|
||||
- 类型： `boolean | string | number | array<string | number>`
|
||||
- 默认值： ``
|
||||
- 详情：
|
||||
|
||||
指定当前请求的某些错误状态不走 `errorHandler`，单独进行处理。如果设置为 `true`，当前请求的错误处理都不走 `errorHandler`。
|
||||
|
||||
- 示列：
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
|
||||
request('/api/login', null, {
|
||||
skipErrorHandler: '110'
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 这里处理 code 为 110 的异常
|
||||
// 此时 errorHandler[110] 函数不会生效，也不会执行 errorHandler.default
|
||||
})
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 使用
|
||||
|
||||
### 发起一个普通 post 请求
|
||||
@ -78,6 +118,27 @@ request('/api/login', {
|
||||
})
|
||||
```
|
||||
|
||||
### merge 重复请求
|
||||
|
||||
连续发送多个请求，会被合并成一个请求，不会报 `REPEAT` 接口错误。
|
||||
|
||||
当发生 `REPEAT` 请求异常，并且确保自身代码合理的情况下，可以使用该配置。
|
||||
|
||||
```js
|
||||
import {request} from '@fesjs/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
mergeRequest: true, // 在一个请求没有回来前，重复发送的请求会合并成一个请求
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
```
|
||||
|
||||
### 请求节流
|
||||
|
||||
```js
|
||||
@ -106,7 +167,7 @@ request('/api/login', {
|
||||
}, {
|
||||
cache: {
|
||||
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间：默认3min
|
||||
},
|
||||
}).then((res) => {
|
||||
// do something
|
||||
@ -117,6 +178,7 @@ request('/api/login', {
|
||||
|
||||
若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
|
||||
|
||||
|
||||
### 结合 use 使用
|
||||
|
||||
```js
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# @fesjs/plugin-access
|
||||
# @fesjs/plugin-sass
|
||||
|
||||
|
||||
|
||||
@ -24,4 +24,4 @@ Vue 单文件组件的 `<style></style>` 添加 `lang='scss'`，例如：
|
||||
```vue
|
||||
<style lang="scss">
|
||||
</style>
|
||||
```
|
||||
```
|
||||
|
||||
@ -49,13 +49,6 @@ store.getters[GETTER_TYPES.user.address]
|
||||
store.commit(MUTATION_TYPES.counter.increment)
|
||||
store.dispatch(ACTION_TYPES.user.login)
|
||||
```
|
||||
|
||||
```js
|
||||
import { MUTATION_TYPES, GETTER_TYPES, ACTION_TYPES, store } from '@fesjs/fes';
|
||||
store.getters[GETTER_TYPES.user.address]
|
||||
store.commit(MUTATION_TYPES.counter.increment)
|
||||
store.dispatch(ACTION_TYPES.user.login)
|
||||
```
|
||||
## API
|
||||
### MUTATION_TYPES
|
||||
* 类型 `Object`
|
||||
|
||||
120
docs/zh/reference/plugin/plugins/editor.md
Normal file
120
docs/zh/reference/plugin/plugins/editor.md
Normal file
@ -0,0 +1,120 @@
|
||||
# @fesjs/plugin-monaco-editor
|
||||
|
||||
|
||||
## 介绍
|
||||
我们会遇到需要编辑代码的场景，比如编辑`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"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## 配置
|
||||
|
||||
### 编译时配置
|
||||
在执行 `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)。
|
||||
|
||||
|
||||
#### filename
|
||||
- **类型**：自定义worker脚本名称
|
||||
|
||||
- **默认值**：`'[name].worker.js'`
|
||||
|
||||
#### publicPath
|
||||
- **类型**：自定义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`时需要配置为：
|
||||
```js
|
||||
export default {
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript']
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### monaco
|
||||
编辑器的全局对象，提供扩展语言，自定义主题等等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' },
|
||||
]
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
### 组件 MonacoEditor
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<MonacoEditor
|
||||
v-model="json"
|
||||
language="json"
|
||||
height="400px"
|
||||
check>
|
||||
</MonacoEditor>
|
||||
</template>
|
||||
<script>
|
||||
import { MonacoEditor } from '@fesjs/fes';
|
||||
export default {
|
||||
components: {
|
||||
MonacoEditor
|
||||
},
|
||||
setup(){
|
||||
const json = ref('');
|
||||
return {
|
||||
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` |
|
||||
|
||||
#### events
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| ------------- | ------------- | ------------- |
|
||||
| onload | 编辑器初始化后触发 | ({monaco, editor, editorModel}) => void |
|
||||
| scrollChange | 滚动时触发 | (e) => void |
|
||||
@ -87,6 +87,6 @@ export default {
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
|
||||
],
|
||||
monacoEditor: {
|
||||
// languages: ['javascript', 'typescript', 'html', 'json']
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user