mirror of
https://gitee.com/WeBank/fes.js.git
synced 2024-12-03 04:07:57 +08:00
docs: HTML模板
This commit is contained in:
万纯
parent
2e858091d4
commit
20bd23acb7
@ -15,11 +15,11 @@
|
||||
- 权限管理
|
||||
- ...
|
||||
|
||||
而且前端应用有很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每个项目都处理一次，不仅耗费时间，而且会导致开发规范和工作流不统一。我们需要一套完整的解决方案，管理开发到部署整个流程。
|
||||
除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
|
||||
|
||||
## Fes.js 是什么？
|
||||
|
||||
Fes.js 是一套好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。然后配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
|
||||
|
||||
它主要具备以下功能：
|
||||
- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
# 目录结构
|
||||
|
||||
在[快速入门](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的。
|
||||
在[快速上手](./getting-started.html)中，大家对框架应该有初步的印象，接下来我们了解下目录结构。Fes.js遵循 `约定优于配置` 的原则，一个基础的 Fes.js 项目大致是这样的。
|
||||
```
|
||||
fes-template
|
||||
├── package.json
|
||||
@ -44,7 +44,7 @@ process.env.FES_ENV = 'prod';
|
||||
```
|
||||
|
||||
#### mock.js
|
||||
mock 文件。
|
||||
mock 配置文件。
|
||||
|
||||
### dist 目录
|
||||
执行 `fes build` 后，产物默认会存放在这里。
|
||||
|
||||
@ -5,8 +5,12 @@
|
||||
|
||||
比如插件 `/node_modules/@webank/fes-plugin-foo/index.js`，通常来说，其 `id` 为 `@webank/fes-plugin-foo`，`key` 为 `foo`。
|
||||
|
||||
## 启用插件
|
||||
插件有多种启用方式
|
||||
::: tip
|
||||
id 一般用不上，对于普通开发者 key 用来配置插件，而插件开发者可以使用 key 判断是否安装某个插件。
|
||||
:::
|
||||
|
||||
## 启动插件
|
||||
有多种方式引入插件
|
||||
|
||||
### package.json 依赖
|
||||
Fes.js 会自动检测 `dependencies` 和 `devDependencies` 里的 fes 插件，比如：
|
||||
@ -32,16 +36,17 @@ export default {
|
||||
1. 项目相对路径的插件
|
||||
2. 非 npm 包入口文件的插件
|
||||
|
||||
注意：
|
||||
- 请不要配置 npm 包的插件，否则会报重复注册的错误
|
||||
::: warning
|
||||
请不要配置 npm 包的插件，否则会报重复注册的错误
|
||||
:::
|
||||
|
||||
### 环境变量
|
||||
还可通过环境变量 `FES_PRESETS` 和 `FES_PLUGINS` 注册额外插件。
|
||||
|
||||
比如：
|
||||
|
||||
$ FES_PRESETS=/a/b/preset.js fes dev
|
||||
|
||||
```bash
|
||||
FES_PRESETS=/a/b/preset.js fes dev
|
||||
```
|
||||
|
||||
## 禁用插件
|
||||
|
||||
@ -51,7 +56,7 @@ export default {
|
||||
mock: false,
|
||||
}
|
||||
```
|
||||
会禁用 Fes.js 内置的 mock 插件及其功能。
|
||||
Mock 插件的 `key` 是 `mock`，我们在配置文件中配置 `mock` 为 `false`，则会禁用 Mock 插件及其功能。
|
||||
|
||||
## 配置插件
|
||||
|
||||
@ -63,4 +68,4 @@ export default {
|
||||
}
|
||||
}
|
||||
```
|
||||
这里的 `mock` 是 `mock` 插件的 key。
|
||||
这里的 `mock` 是 Mock插件 的 key。
|
||||
@ -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
|
||||
export default {
|
||||
router: {
|
||||
@ -15,7 +15,7 @@ export default {
|
||||
```
|
||||
|
||||
### routes
|
||||
添加到路由的初始路由列表。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/)
|
||||
添加到路由的初始路由列表。具体使用参考 [Vue Router 文档](https://next.router.vuejs.org/zh/guide/)中关于路由配置、路由匹配相关内容。
|
||||
|
||||
|
||||
### mode
|
||||
@ -103,7 +103,7 @@ pages
|
||||
]
|
||||
```
|
||||
|
||||
需要注意的是，满足以下任意规则的文件不会被注册为路由：
|
||||
**需要注意的是，满足以下任意规则的文件不会被注册为路由**：
|
||||
- 不是 .vue 文件
|
||||
- components 目录中的文件
|
||||
|
||||
@ -140,7 +140,7 @@ pages
|
||||
```
|
||||
|
||||
### 模糊匹配
|
||||
Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现404路由。
|
||||
Fes.js 下约定文件名为 `*` 的路由是模糊匹配路由，可以用此特性实现 `404` 路由。
|
||||
|
||||
比如以下目录结构：
|
||||
|
||||
@ -164,7 +164,7 @@ pages
|
||||
|
||||
### 扩展路由元信息
|
||||
我们在定义路由时可以配置`meta`字段，用来记录一些跟路由相关的信息：
|
||||
```
|
||||
```js
|
||||
const router = new VueRouter({
|
||||
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
|
||||
<config>
|
||||
{
|
||||
@ -192,7 +192,7 @@ const router = new VueRouter({
|
||||
</config>
|
||||
```
|
||||
则编译后的路由配置为：
|
||||
```js
|
||||
```js{5-8}
|
||||
[
|
||||
{
|
||||
path: '/a',
|
||||
@ -213,7 +213,7 @@ const router = new VueRouter({
|
||||
- 根段(`/`)再1分
|
||||
- 通配符(`*`)匹配到的减去1分
|
||||
|
||||
当我们跳转路由时，如果URL匹配到多个路由，则选择分数最高的路由。
|
||||
当我们跳转路由时，如果 URL 匹配到多个路由，则选择分数最高的路由。
|
||||
|
||||
## 路由跳转
|
||||
|
||||
|
||||
@ -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_` 开头的变量
|
||||
Loading…
Reference in New Issue
Block a user