更新文档

This commit is contained in:
万纯 2020-09-04 16:26:54 +08:00 committed by harrywan
parent 7e384c8780
commit 4727c5bf5b
6 changed files with 54 additions and 21 deletions

View File

@ -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,

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View 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"
}

View File

@ -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,

View File

@ -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 {
'/': {