blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 19:41:57 +08:00
Code Issues Projects Releases Wiki Activity

docs: 完善文档

Browse Source
This commit is contained in:
wanchun 2021-03-07 12:40:57 +08:00
parent 72eea4f52a
commit 0b700847f2
8 changed files with 44 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/guide/README.md
View File

@ -21,14 +21,14 @@
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
它主要具备以下功能：
- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
它主要具备以下特点：
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
- :firecracker: __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
- :package: __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。

2
docs/guide/directory-structure.md
View File

@ -21,7 +21,7 @@ fes-template
### 根目录
#### package.json
包含插件和插件集，以 `@fesjs/preset-`、`@fesjs/plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
包含插件和插件集，以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-` `fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
#### tsconfig.json
解决 `@fesjs/fes` 和使用 `@` 的 API 提示

26
docs/guide/getting-started.md
View File

@ -13,25 +13,25 @@ v10.13.0
npm i yarn -g
```
## 安装模板
## 创建项目
这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
##### 步骤1 创建工作空间
如果不存在，则创建
如果工作空间不存在，则先创建：
```bash
# 创建目录 workspace
mkdir workspace
# 进入目录 workspace
cd workspace
```
如果已存在工作空间，则直接进入
如果工作空间已存在，则直接进入
```bash
# 进入目录 workspace
cd workspace
```
##### 步骤2 创建模板
##### 步骤2 在工作空间创建项目
<CodeGroup>
<CodeGroupItem title="YARN" active>
@ -53,15 +53,20 @@ npx @fesjs/create-fes-app myapp
</CodeGroup>
如果项目目录 `workspace/myapp` 已经存在，则会提示目录已存在，你可以选择 `Overwrite` 删除目录后重新创建项目，也可以选择 `Merge` 使用模板文件覆盖当前目录文件。
<!-- ![目录已存在提示](/pickTemplateTip.png) -->
如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
如果项目目录 `workspace/myapp` 不存在，你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
你可以选择：
- `Overwrite` 删除项目文件夹，重新创建项目。
- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
<!-- ![选择模板类型](/pickTemplate.png) -->
当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
##### 步骤3 安装依赖
<CodeGroup>
<CodeGroupItem title="YARN" active>
@ -114,7 +119,6 @@ Starting the development server http://localhost:8080 ...
npm run dev
> fes dev
Starting the development server http://localhost:8080 ...
✔ Webpack
@ -129,7 +133,7 @@ Starting the development server http://localhost:8080 ...
Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
<!-- ![home](/home.png) -->
<img :src="$withBase('home.png')" alt="home">
## 部署发布
@ -184,7 +188,7 @@ dist
```
### 本地验证
发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `dev` 的结果一样。
发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
### 部署

4
docs/guide/template.md
View File

@ -47,7 +47,7 @@ export default {
<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
```
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中所有环境变量都添加到了模板作用域内：
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
- `NODE_ENV`
- `FES_ENV`
- `.env` 文件中定义的以 `FES_APP_` 开头的变量
- `.env` 文件中以 `FES_APP_` 开头的变量

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

@ -21,14 +21,14 @@
Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。
它主要具备以下功能：
- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
它主要具备以下特点：
- 🚀 __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。
- :firecracker: __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
- 🧨 __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
- 💪 __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
- :package: __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
- 📦 __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。

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

@ -21,7 +21,7 @@ fes-template
### 根目录
#### package.json
包含插件和插件集，以 `@fesjs/preset-`、`@fesjs/plugin-`、`fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
包含插件和插件集，以 `@fesjs/preset-`、`@fesjs/plugin-`、`@webank/fes-preset-`、`@webank/fes-plugin-` `fes-preset-` 和 `fes-plugin-` 开头的依赖会被自动注册为插件或插件集。
#### tsconfig.json
解决 `@fesjs/fes` 和使用 `@` 的 API 提示

27
docs/zh/guide/getting-started.md
View File

@ -13,25 +13,25 @@ v10.13.0
npm i yarn -g
```
## 安装模板
## 创建项目
这一章节会帮助你从头搭建一个简单的 Fes.js 前端应用。
##### 步骤1 创建工作空间
如果不存在，则创建
如果工作空间不存在，则先创建：
```bash
# 创建目录 workspace
mkdir workspace
# 进入目录 workspace
cd workspace
```
如果已存在工作空间，则直接进入
如果工作空间已存在，则直接进入
```bash
# 进入目录 workspace
cd workspace
```
##### 步骤2 创建模板
##### 步骤2 在工作空间创建项目
<CodeGroup>
<CodeGroupItem title="YARN" active>
@ -53,15 +53,20 @@ npx @fesjs/create-fes-app myapp
</CodeGroup>
如果项目目录 `workspace/myapp` 已经存在，则会提示目录已存在，你可以选择 `Overwrite` 删除目录后重新创建项目，也可以选择 `Merge` 使用模板文件覆盖当前目录文件。
<!-- ![目录已存在提示](/pickTemplateTip.png) -->
如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：
<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
如果项目目录 `workspace/myapp` 不存在，你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
你可以选择：
- `Overwrite` 删除项目文件夹，重新创建项目。
- `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。
<!-- ![选择模板类型](/pickTemplate.png) -->
当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。
##### 步骤3 安装依赖
<CodeGroup>
<CodeGroupItem title="YARN" active>
@ -114,7 +119,6 @@ Starting the development server http://localhost:8080 ...
npm run dev
> fes dev
Starting the development server http://localhost:8080 ...
✔ Webpack
@ -129,9 +133,8 @@ Starting the development server http://localhost:8080 ...
Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。
<!-- ![home](/home.png) -->
<img :src="$withBase('home.png')" alt="home">
<img :src="$withBase('home.png')" alt="home">
## 部署发布
@ -185,7 +188,7 @@ dist
```
### 本地验证
发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `dev` 的结果一样。
发布之前，可以通过 [serve](https://github.com/vercel/serve) 做本地验证，验证结果应该跟执行 `fes dev` 的结果一样。
### 部署

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

@ -47,7 +47,7 @@ export default {
<link rel="icon" type="image/x-icon" href="<%= webpackConfig.output.publicPath %>favicon.png" />
```
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中所有环境变量都添加到了模板作用域内：
除上述 `html-webpack-plugin` 三点之外，Fes.js 还把 `process.env` 中的环境变量添加到模板作用域内：
- `NODE_ENV`
- `FES_ENV`
- `.env` 文件中定义的以 `FES_APP_` 开头的变量
- `.env` 文件中以 `FES_APP_` 开头的变量