mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
更新文档
This commit is contained in:
parent
7e384c8780
commit
4727c5bf5b
@ -2,6 +2,17 @@ module.exports = {
|
||||
base: "/fes.js/",
|
||||
title: "Fes.js",
|
||||
description: "中台应用前端快速解决方案",
|
||||
plugins: {
|
||||
"@vuepress/pwa": {
|
||||
serviceWorker: true,
|
||||
updatePopup: {
|
||||
"/": {
|
||||
message: "发现新内容可用",
|
||||
buttonText: "刷新"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
themeConfig: {
|
||||
repo: "WeBankFinTech/fes.js",
|
||||
sidebarDepth: 3,
|
||||
|
BIN
packages/fes-doc/docs/.vuepress/public/icons/android-chrome-192x192.png
Executable file
BIN
packages/fes-doc/docs/.vuepress/public/icons/android-chrome-192x192.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 9.2 KiB |
BIN
packages/fes-doc/docs/.vuepress/public/icons/android-chrome-512x512.png
Executable file
BIN
packages/fes-doc/docs/.vuepress/public/icons/android-chrome-512x512.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
20
packages/fes-doc/docs/.vuepress/public/manifest.json
Normal file
20
packages/fes-doc/docs/.vuepress/public/manifest.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "Fes.js",
|
||||
"short_name": "Fes.js",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icons/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/icons/android-chrome-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"start_url": "/index.html",
|
||||
"display": "standalone",
|
||||
"background_color": "#fff",
|
||||
"theme_color": "#3eaf7c"
|
||||
}
|
@ -270,8 +270,10 @@ export default function () {
|
||||
读取文件名称作为组件名称进行注册,例如`src/components/message.vue`注册的全局组件名称为`message`,
|
||||
|
||||
### 特殊组件
|
||||
`fesHeader.vue`用于自定义页面头部。参数`FesHeader`控制`fesHeader.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局,也可以在页面组件中单独定义`FesHeader`。
|
||||
`fesLeft.vue` 用于自定义菜单栏。配置参数`FesLeft`控制`fesLeft.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局,也可以在页面组件中单独定义`FesHeader`。
|
||||
`fesHeader.vue`
|
||||
用于自定义页面头部。参数`FesHeader`控制`fesHeader.vue` 是否显示。在`fes.config.js`中配置`FesHeader`定义全局的,也可以在页面组件中单独配置`FesHeader`。
|
||||
`fesLeft.vue`
|
||||
用于自定义菜单栏。配置参数`FesLeft`控制`fesLeft.vue` 是否显示。在`fes.config.js`中配置`FesLeft`定义全局的,也可以在页面组件中单独配置`FesLeft`。
|
||||
|
||||
## src/pages
|
||||
在`pages`目录下编写页面,`Fes.js`会根据`pages`目录以及文件结构自动生成[Vue-router](https://router.vuejs.org/zh-cn/)路由配置。
|
||||
@ -288,16 +290,16 @@ pages
|
||||
└── layout.vue # 根路由下所有page共用的外层
|
||||
```
|
||||
1. 如果目录下有`layout.vue`,则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
|
||||
2. 带参数的路径使用`@id.fes`的形式
|
||||
2. 带参数的路径使用`@id.vue`的形式
|
||||
|
||||
### 编译
|
||||
编译后在`.cache`目录下生成`routeConfig.js`,内容如下:
|
||||
```js
|
||||
import layout from 'D:\\git\\fes-template\\src\\pages\\layout.fes';
|
||||
import index from 'D:\\git\\fes-template\\src\\pages\\index.fes';
|
||||
import a from 'D:\\git\\fes-template\\src\\pages\\a.fes';
|
||||
import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.fes';
|
||||
import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.fes';
|
||||
import layout from 'D:\\git\\fes-template\\src\\pages\\layout.vue';
|
||||
import index from 'D:\\git\\fes-template\\src\\pages\\index.vue';
|
||||
import a from 'D:\\git\\fes-template\\src\\pages\\a.vue';
|
||||
import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.vue';
|
||||
import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.vue';
|
||||
export default {
|
||||
'/': {
|
||||
component: layout,
|
||||
|
@ -5,26 +5,26 @@
|
||||
`Vue-router`加载的路由是使用 `router.config.js` 配置的。而`Fes.js`将根据项目的 `pages`目录结构自动生成路由规则
|
||||
```
|
||||
pages
|
||||
├── index.fes # 根路由页面 路径 index.html#/
|
||||
├── a.fes # 路径 /a
|
||||
├── index.vue # 根路由页面 路径 index.html#/
|
||||
├── a.vue # 路径 /a
|
||||
├── b # 文件夹b
|
||||
│ ├── index.fes # 路径 /b
|
||||
│ ├── @id.fes # 动态路由 /b/:id
|
||||
│ └── c.fes # 路径 /b/c
|
||||
└── layout.fes # 根路由下所有page共用的外层
|
||||
│ ├── index.vue # 路径 /b
|
||||
│ ├── @id.vue # 动态路由 /b/:id
|
||||
│ └── c.vue # 路径 /b/c
|
||||
└── layout.vue # 根路由下所有page共用的外层
|
||||
```
|
||||
1. 如果目录下有`layout.fes`,则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
|
||||
2. 带参数的路径使用`@[filename].fes`的方式
|
||||
1. 如果目录下有`layout.vue`,则子目录对应的路径是当前目录对应路径的子路由。如果没有则子目录对应的路径和当前目录对应路径是平级的。
|
||||
2. 带参数的路径使用`@[filename].vue`的方式
|
||||
|
||||
<br>
|
||||
Fes编译代码之前会根据 pages 目录结构生成下面的配置代码:
|
||||
|
||||
```javascript
|
||||
import layout from 'D:\\git\\fes-template\\src\\pages\\layout.fes';
|
||||
import index from 'D:\\git\\fes-template\\src\\pages\\index.fes';
|
||||
import a from 'D:\\git\\fes-template\\src\\pages\\a.fes';
|
||||
import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.fes';
|
||||
import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.fes';
|
||||
import layout from 'D:\\git\\fes-template\\src\\pages\\layout.vue';
|
||||
import index from 'D:\\git\\fes-template\\src\\pages\\index.vue';
|
||||
import a from 'D:\\git\\fes-template\\src\\pages\\a.vue';
|
||||
import b_index from 'D:\\git\\fes-template\\src\\pages\\b\\index.vue';
|
||||
import b__id from 'D:\\git\\fes-template\\src\\pages\\b\\@id.vue';
|
||||
import b_c from 'D:\\git\\fes-template\\src\\pages\\b\\b_c';
|
||||
export default {
|
||||
'/': {
|
||||
|
Loading…
x
Reference in New Issue
Block a user