mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
docs: 指南-插件
This commit is contained in:
parent
6d901bbfd8
commit
2294202cf3
@ -16,6 +16,10 @@ export const zh: SidebarConfig = {
|
|||||||
children: [
|
children: [
|
||||||
'/zh/guide/directory-structure.md',
|
'/zh/guide/directory-structure.md',
|
||||||
'/zh/guide/route.md',
|
'/zh/guide/route.md',
|
||||||
|
'/zh/guide/plugin.md',
|
||||||
|
'/zh/guide/template.md',
|
||||||
|
'/zh/guide/mock.md',
|
||||||
|
'/zh/guide/env.md',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
1
docs/zh/guide/env.md
Normal file
1
docs/zh/guide/env.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# 环境变量
|
1
docs/zh/guide/mock.md
Normal file
1
docs/zh/guide/mock.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# Mock 数据
|
66
docs/zh/guide/plugin.md
Normal file
66
docs/zh/guide/plugin.md
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
# 插件
|
||||||
|
|
||||||
|
## 插件的 id 和 key
|
||||||
|
每个插件都会对应一个 `id` 和一个 `key`,**`id` 是路径的简写,`key` 是进一步简化后用于配置的唯一值**。
|
||||||
|
|
||||||
|
比如插件 `/node_modules/@webank/fes-plugin-foo/index.js`,通常来说,其 `id` 为 `@webank/fes-plugin-foo`,`key` 为 `foo`。
|
||||||
|
|
||||||
|
## 启用插件
|
||||||
|
插件有多种启用方式
|
||||||
|
|
||||||
|
### package.json 依赖
|
||||||
|
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件,比如:
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"@webank/fes-plugin-request": "^2.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
那么 `@webank/fes-plugin-request` 会自动被注册,无需在配置里重复声明。
|
||||||
|
|
||||||
|
### 配置
|
||||||
|
在配置里可通过 `presets` 和 `plugins` 配置插件,比如:
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
presets: ['./preset', 'foo/presets'],
|
||||||
|
plugins: ['./plugin'],
|
||||||
|
}
|
||||||
|
```
|
||||||
|
通常用于几种情况:
|
||||||
|
|
||||||
|
1. 项目相对路径的插件
|
||||||
|
2. 非 npm 包入口文件的插件
|
||||||
|
|
||||||
|
注意:
|
||||||
|
- 请不要配置 npm 包的插件,否则会报重复注册的错误
|
||||||
|
|
||||||
|
### 环境变量
|
||||||
|
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
|
||||||
|
|
||||||
|
比如:
|
||||||
|
|
||||||
|
$ FES_PRESETS=/a/b/preset.js fes dev
|
||||||
|
|
||||||
|
|
||||||
|
## 禁用插件
|
||||||
|
|
||||||
|
通过配置插件的 `key` 为 `false`,比如:
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
mock: false,
|
||||||
|
}
|
||||||
|
```
|
||||||
|
会禁用 Fes.js 内置的 mock 插件及其功能。
|
||||||
|
|
||||||
|
## 配置插件
|
||||||
|
|
||||||
|
通过插件的 `key` 来配置插件,比如:
|
||||||
|
```js
|
||||||
|
export default {
|
||||||
|
mock: {
|
||||||
|
prefix: '/v2'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
这里的 `mock` 是 `mock` 插件的 key。
|
@ -103,6 +103,11 @@ pages
|
|||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
需要注意的是,满足以下任意规则的文件不会被注册为路由:
|
||||||
|
- 不是 .vue 文件
|
||||||
|
- components 目录中的文件
|
||||||
|
|
||||||
|
|
||||||
### 动态路由
|
### 动态路由
|
||||||
Fes.js 里约定以 `@` 开头的文件或文件夹映射为动态路由。
|
Fes.js 里约定以 `@` 开头的文件或文件夹映射为动态路由。
|
||||||
比如:
|
比如:
|
||||||
@ -200,14 +205,8 @@ const router = new VueRouter({
|
|||||||
]
|
]
|
||||||
```
|
```
|
||||||
|
|
||||||
### 忽略
|
|
||||||
需要注意的是,满足以下任意规则的文件不会被注册为路由:
|
|
||||||
- 不是 .vue 文件
|
|
||||||
- components 目录中的文件
|
|
||||||
|
|
||||||
|
|
||||||
### 智能路由
|
### 智能路由
|
||||||
可以看到,编译后路由都会有count属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:
|
可以看到,编译后路由都会有 `count` 属性,这是我们根据精准匹配优先算法原则设计出路由排名算法,对匹配到的路由打分:
|
||||||
- 路由的路径每个子项得到4分
|
- 路由的路径每个子项得到4分
|
||||||
- 子项为静态细分(`/list`)再加3分
|
- 子项为静态细分(`/list`)再加3分
|
||||||
- 子项为动态细分(`/:orderId`)再加2分
|
- 子项为动态细分(`/:orderId`)再加2分
|
||||||
@ -217,6 +216,15 @@ const router = new VueRouter({
|
|||||||
当我们跳转路由时,如果URL匹配到多个路由,则选择分数最高的路由。
|
当我们跳转路由时,如果URL匹配到多个路由,则选择分数最高的路由。
|
||||||
|
|
||||||
## 路由跳转
|
## 路由跳转
|
||||||
|
|
||||||
|
### 声明式
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<router-link to="/home">Home</router-link>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 命令式
|
||||||
页面跳转 API 由 `router` 实例提供,查看 [Vue Rouer 文档](https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95)了解更多。
|
页面跳转 API 由 `router` 实例提供,查看 [Vue Rouer 文档](https://next.router.vuejs.org/zh/api/#router-%E6%96%B9%E6%B3%95)了解更多。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
1
docs/zh/guide/template.md
Normal file
1
docs/zh/guide/template.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
# HTML模板
|
@ -24,20 +24,7 @@ export default {
|
|||||||
'changeOrigin': true,
|
'changeOrigin': true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
layout: {
|
layout: false,
|
||||||
title: "Fes.js",
|
|
||||||
footer: 'Created by MumbelFe',
|
|
||||||
multiTabs: false,
|
|
||||||
menus: [{
|
|
||||||
name: 'index'
|
|
||||||
}, {
|
|
||||||
name: 'onepiece'
|
|
||||||
}, {
|
|
||||||
name: 'store'
|
|
||||||
}, {
|
|
||||||
name: 'simpleList'
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
locale: {
|
locale: {
|
||||||
legacy: true
|
legacy: true
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user