blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

docs: HTML模板

Browse Source
This commit is contained in:
万纯 2021-03-03 16:02:47 +08:00
parent 2e858091d4
commit 20bd23acb7
5 changed files with 80 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/zh/guide/README.md
View File

@ -15,11 +15,11 @@
- 权限管理 - 权限管理
- ... - ...
而且前端应用有很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每个项目都处理一次，不仅耗费时间，而且会导致开发规范和工作流不统一。我们需要一套完整的解决方案，管理开发到部署整个流程。 除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
## Fes.js 是什么？ ## Fes.js 是什么？
Fes.js 是一套好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。然后配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
它主要具备以下功能： 它主要具备以下功能：
- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 - :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。

4
docs/zh/guide/directory-structure.md
View File

@ -1,6 +1,6 @@
# 目录结构 # 目录结构
在[快速入门](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的。 在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的。
``` ```
fes-template fes-template
├── package.json ├── package.json
@ -44,7 +44,7 @@ process.env.FES_ENV = 'prod';
``` ```
#### mock.js #### mock.js
mock 文件。 mock 配置文件。
### dist 目录 ### dist 目录
执行 `fes build` 后，产物默认会存放在这里。 执行 `fes build` 后，产物默认会存放在这里。

23
docs/zh/guide/plugin.md
View File

@ -5,8 +5,12 @@
比如插件 `/node_modules/@webank/fes-plugin-foo/index.js`，通常来说，其 `id` 为 `@webank/fes-plugin-foo`，`key` 为 `foo`。 比如插件 `/node_modules/@webank/fes-plugin-foo/index.js`，通常来说，其 `id` 为 `@webank/fes-plugin-foo`，`key` 为 `foo`。
## 启用插件 ::: tip
插件有多种启用方式 id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
:::
## 启动插件
有多种方式引入插件
### package.json 依赖 ### package.json 依赖
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如： Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如：
@ -32,16 +36,17 @@ export default {
1. 项目相对路径的插件 1. 项目相对路径的插件
2. 非 npm 包入口文件的插件 2. 非 npm 包入口文件的插件
注意： ::: warning
- 请不要配置 npm 包的插件，否则会报重复注册的错误 请不要配置 npm 包的插件，否则会报重复注册的错误
:::
### 环境变量 ### 环境变量
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。 还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
比如： 比如：
```bash
$ FES_PRESETS=/a/b/preset.js fes dev FES_PRESETS=/a/b/preset.js fes dev
```
## 禁用插件 ## 禁用插件
@ -51,7 +56,7 @@ export default {
mock: false, mock: false,
} }
``` ```
会禁用 Fes.js 内置的 mock 插件及其功能。 Mock 插件的 `key` 是 `mock`，我们在配置文件中配置 `mock` 为 `false`，则会禁用 Mock 插件及其功能。
## 配置插件 ## 配置插件
@ -63,4 +68,4 @@ export default {
} }
} }
``` ```
这里的 `mock` 是 `mock` 插件的 key。 这里的 `mock` 是 Mock插件 的 key。

16
docs/zh/guide/route.md
View File

@ -1,10 +1,10 @@
# 路由 # 路由
像Vue、React这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 [Vue Router](https://next.router.vuejs.org/) 实现了路由，感兴趣的同学可以看看。 像Vue、React这类框架是用组件化搭建页面，路由解决的是路径到组件的匹配问题。Fes.js 基于 `Vue Router` 实现的路由，想了解更多的同学可以看看[官方文档](https://next.router.vuejs.org/)。
## 路由配置 ## 路由配置
在配置文件中通过 router 进行配置，格式为路由信息的数组。 在配置文件（.fes.js）中通过 router 进行配置，格式为路由信息的数组。
```js ```js
export default { export default {
router: { router: {
@ -15,7 +15,7 @@ export default {
``` ```
### routes ### routes
添加到路由的初始路由列表。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/) 添加到路由的初始路由列表。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/)中关于路由配置、路由匹配相关内容。
### mode ### mode
@ -103,7 +103,7 @@ pages
] ]
``` ```
需要注意的是，满足以下任意规则的文件不会被注册为路由： **需要注意的是，满足以下任意规则的文件不会被注册为路由**：
- 不是 .vue 文件 - 不是 .vue 文件
- components 目录中的文件 - components 目录中的文件
@ -140,7 +140,7 @@ pages
``` ```
### 模糊匹配 ### 模糊匹配
Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现404路由。 Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现 `404` 路由。
比如以下目录结构： 比如以下目录结构：
@ -164,7 +164,7 @@ pages
### 扩展路由元信息 ### 扩展路由元信息
我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息： 我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息：
``` ```js
const router = new VueRouter({ const router = new VueRouter({
routes: [ routes: [
{ {
@ -182,7 +182,7 @@ const router = new VueRouter({
] ]
}) })
``` ```
在 Fes.js 里约定在 `.vue` 文件中的 `config` 为 `meta` 配置。如果 'pages/a.vue' 中有如下配置： 在 Fes.js 里约定在 `.vue` 文件中的 `config` 为 `meta` 配置。如果 `pages/a.vue` 中有如下配置：
```vue ```vue
<config> <config>
{ {
@ -192,7 +192,7 @@ const router = new VueRouter({
</config> </config>
``` ```
则编译后的路由配置为： 则编译后的路由配置为：
```js ```js{5-8}
[ [
{ {
path: '/a', path: '/a',

52
docs/zh/guide/template.md
View File

@ -1 +1,53 @@
# HTML模板 # HTML模板
Fes.js 基于 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现的模板功能，默认 HTML模板 是：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
```
## 替换模板
在 `src/public` 文件夹中创建`index.html`，Fes.js 约定如果这个文件存在，则会替换默认模板。
## 配置模板
### 配置
在配置文件（`.fes.js`）中配置 `html`，把配置的对象作为参数传入 `html-webpack-plugin` 实例。
举个 :chestnut: ：
```js
export default {
html: {
title: '海贼王'
}
}
```
页面的 title 会设置成'海贼王'。
### 手动
当然我们也可以手动编写模板，在模板中添加`link`、`link`、`meta`等标签。在我们手动配置模板时，有时候需要用到一些环境变量，模板里可以获取到的变量如下：
- **htmlWebpackPlugin**，特定于此插件的数据
- **webpackConfig**，用于此编译的webpack配置。例如，它可用于获取publicPath（webpackConfig.output.publicPath）。
- **compilation**，webpack编译对象。例如，可以使用它来获取已处理资产的内容，并将其直接内联到页面中compilation.assets[...].source()
举个 🌰 ：
```html
<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
```
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中所有环境变量都添加到了模板作用域内：
- `NODE_ENV`
- `FES_ENV`
- `.env` 文件中定义的以 `FES_APP_` 开头的变量