docs: 更新文档

This commit is contained in:
bac-joker 2021-03-06 15:22:09 +08:00
parent 81302d5e42
commit fe121ab542
10 changed files with 41 additions and 23 deletions

1
.gitignore vendored
View File

@ -5,6 +5,7 @@
.history
.cache
.temp
dist
*.log
node_modules
npm-debug.log

View File

@ -3,11 +3,11 @@ import type { DefaultThemeOptions } from '@vuepress/theme-default'
import { navbar, sidebar } from './configs'
const config: UserConfig<DefaultThemeOptions> = {
base: '/',
base: '/fesjs/',
evergreen: process.env.NODE_ENV !== 'production',
head: [['link', { rel: 'manifest', href: '/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/logo.png` }]],
head: [['link', { rel: 'manifest', href: '/fesjs/manifest.webmanifest' }], ['link', { rel: 'icon', href: `/fesjs/logo.png` }]],
// site-level locales config
locales: {

View File

@ -36,13 +36,14 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
## Fes.js 如何工作?
### 架构
![架构](/framework.png "架构")
<!-- ![架构](/framework.png "架构") -->
<img :src="$withBase('framework.png')" alt="架构">
Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。
### 插件和插件集
<p>
<img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
<img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
</p>
Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。

View File

@ -54,11 +54,13 @@ npx @fesjs/create-fes-app myapp
如果项目目录 `workspace/myapp` 已经存在,则会提示目录已存在,你可以选择 `Overwrite` 删除目录后重新创建项目,也可以选择 `Merge` 使用模板文件覆盖当前目录文件。
![目录已存在提示](/pickTemplateTip.png)
<!-- ![目录已存在提示](/pickTemplateTip.png) -->
<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
如果项目目录 `workspace/myapp` 不存在,你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型,也可以选适用于移动端的 `H5` 类型。
![选择模板类型](/pickTemplate.png)
<!-- ![选择模板类型](/pickTemplate.png) -->
<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
##### 步骤3 安装依赖
<CodeGroup>
@ -129,8 +131,8 @@ Starting the development server http://localhost:8080 ...
Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。
![home](/home.png)
<!-- ![home](/home.png) -->
<img :src="$withBase('home.png')" alt="home">
## 部署发布

View File

@ -1,11 +1,12 @@
## 架构
![架构](/framework.png "架构")
<!-- ![架构](/framework.png "架构") -->
<img :src="$withBase('framework.png')" alt="架构">
Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。
## 插件和插件集
<p>
<img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
<img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
</p>
Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。

View File

@ -16,11 +16,15 @@
默认是 `side`
### side
![side](/side.png)
<!-- ![side](/side.png) -->
<img :src="$withBase('side.png')" alt="side">
### top
![top](/top.png)
<!-- ![top](/top.png) -->
<img :src="$withBase('top.png')" alt="top">
### mixin
![mixin](/mixin.png)
<!-- ![mixin](/mixin.png) -->
<img :src="$withBase('mixin.png')" alt="mixin">
## 启用方式
`package.json` 中引入依赖:

View File

@ -36,13 +36,14 @@ Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由
## Fes.js 如何工作?
### 架构
![架构](/framework.png "架构")
<!-- ![架构](/framework.png "架构") -->
<img :src="$withBase('framework.png')" alt="架构">
Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。
### 插件和插件集
<p>
<img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
<img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
</p>
Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。

View File

@ -54,11 +54,13 @@ npx @fesjs/create-fes-app myapp
如果项目目录 `workspace/myapp` 已经存在,则会提示目录已存在,你可以选择 `Overwrite` 删除目录后重新创建项目,也可以选择 `Merge` 使用模板文件覆盖当前目录文件。
![目录已存在提示](/pickTemplateTip.png)
<!-- ![目录已存在提示](/pickTemplateTip.png) -->
<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
如果项目目录 `workspace/myapp` 不存在,你会被提示选取一个 template。你可以选默认适用于中后台前端应用的 `PC` 类型,也可以选适用于移动端的 `H5` 类型。
![选择模板类型](/pickTemplate.png)
<!-- ![选择模板类型](/pickTemplate.png) -->
<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
##### 步骤3 安装依赖
<CodeGroup>
@ -129,7 +131,8 @@ Starting the development server http://localhost:8080 ...
Fes.js 会在 [http://localhost:8080](http://localhost:8080) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时,浏览器中的内容也会自动更新。
![home](/home.png)
<!-- ![home](/home.png) -->
<img :src="$withBase('home.png')" alt="home">
## 部署发布

View File

@ -1,11 +1,12 @@
## 架构
![架构](/framework.png "架构")
<!-- ![架构](/framework.png "架构") -->
<img :src="$withBase('framework.png')" alt="架构">
Fes.js 把大家常用的技术栈封装成一个个插件进行整理,收敛到一起,让大家只用 Fes.js 就可以完成 80% 的日常工作。
## 插件和插件集
<p>
<img src="/plugins.png" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
<img :src="$withBase('plugins.png')" alt="插件" title="插件" style="width: 500px" class="medium-zoom-image">
</p>
Fes.js 支持插件和插件集,通过这张图应该很好理解到他们的关系,通过插件集我们把插件收敛依赖然后支持不同的业务类型。

View File

@ -16,11 +16,15 @@
默认是 `side`
### side
![side](/side.png)
<!-- ![side](/side.png) -->
<img :src="$withBase('side.png')" alt="side">
### top
![top](/top.png)
<!-- ![top](/top.png) -->
<img :src="$withBase('top.png')" alt="top">
### mixin
![mixin](/mixin.png)
<!-- ![mixin](/mixin.png) -->
<img :src="$withBase('mixin.png')" alt="mixin">
## 启用方式
`package.json` 中引入依赖: