diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index f8ba38bf..7d2a2144 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -19,7 +19,7 @@ const config: UserConfig = { '/zh/': { lang: 'zh-CN', title: 'Fes.js', - description: '一个好用的前端应用解决方案', + description: '一套好用的前端应用解决方案', }, }, diff --git a/docs/.vuepress/public/framework.png b/docs/.vuepress/public/framework.png new file mode 100644 index 00000000..909f657d Binary files /dev/null and b/docs/.vuepress/public/framework.png differ diff --git a/docs/.vuepress/public/plugins.png b/docs/.vuepress/public/plugins.png new file mode 100644 index 00000000..1ab41080 Binary files /dev/null and b/docs/.vuepress/public/plugins.png differ diff --git a/docs/zh/README.md b/docs/zh/README.md index f453014f..06abda8a 100644 --- a/docs/zh/README.md +++ b/docs/zh/README.md @@ -17,7 +17,7 @@ features: - title: Strong details: 只需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。 - title: 可扩展 - details: 借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在fes.js中协调有序的运行。 + details: 借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 - title: 面向未来 details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。 footer: MIT Licensed | Copyright © 2020-present Webank diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md index d406a0f3..cf663797 100644 --- a/docs/zh/guide/README.md +++ b/docs/zh/guide/README.md @@ -5,50 +5,67 @@ ## 痛点 -Fes.js 是一个好用的可扩展的前端应用解决方案。Fes 以 Vue 3.0 和 vue-router 路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。 +在开发一个前端项目之前，我们可能需要做如下准备工作： +- 搭建开发环境 +- 约定代码规范 +- 封装API请求 +- 配置路由 +- 实现布局、菜单、导航 +- 实现登录 +- 权限管理 +- ... -Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。 - -VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 [Markdown](https://zh.wikipedia.org/wiki/Markdown) 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。 - -VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求，但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。 +而且前端应用有很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每个项目都处理一次，不仅耗费时间，而且会导致开发规范和工作流不统一。我们需要一套完整的解决方案，管理开发到部署整个流程。 ## Fes.js 是什么？ -- :rocket: __Fast__ -- :fireworks: __Easy__ -- 💪 __Strong__ +Fes.js 是一套好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。然后配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。 -## 它是如何工作的？ +它主要具备以下功能： +- :rocket: __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。 +- :firecracker: __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。 +- 💪 __健壮__ ，只需要关心页面内容，减少犯错的机会！提供单元测试、覆盖测试的能力保障项目质量。 +- :package: __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。 +- 📡 __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。 -一个 VuePress 站点本质上是一个由 [Vue](https://v3.vuejs.org/) 和 [Vue Router](https://next.router.vuejs.org) 驱动的单页面应用 (SPA)。 -路由会根据你的 Markdown 文件的相对路径来自动生成。每个 Markdown 文件都通过 [markdown-it](https://github.com/markdown-it/markdown-it) 编译为 HTML ，然后将其作为 Vue 组件的模板。因此，你可以在 Markdown 文件中直接使用 Vue 语法，便于你嵌入一些动态内容。 +## Fes.js 如何工作？ + +### 架构 +![架构](/framework.png "架构") + +Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。 + +### 插件和插件集 +

+ 插件 +

+Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。 + +### .fes 临时文件 +.fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。 + +你通常会在 .fes 下看到以下目录 +``` ++ .fes + + core # 内部插件生成 + + pluginA # 外部插件生成 + + presetB # 外部插件生成 + + fes.js # 入口文件 +``` + +临时文件是 Fes.js 中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。 + +你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。 -在开发过程中，我们启动一个常规的开发服务器 (dev-server) ，并将 VuePress 站点作为一个常规的 SPA。如果你以前使用过 Vue 的话，你在使用时会感受到非常熟悉的开发体验。 -在构建过程中，我们会为 VuePress 站点创建一个服务端渲染 (SSR) 的版本，然后通过虚拟访问每一条路径来渲染对应的 HTML 。这种做法的灵感来源于 [Nuxt](https://nuxtjs.org/) 的 `nuxt generate` 命令，以及其他的一些项目，比如 [Gatsby](https://www.gatsbyjs.org/)。 ## 为什么不是 ...? -### Nuxt +### Vue CLI -Nuxt 是一套出色的 Vue SSR 框架， VuePress 能做的事情，Nuxt 实际上也同样能够胜任。但 Nuxt 是为构建应用程序而生的，而 VuePress 则更为轻量化并且专注在以内容为中心的静态网站上。 +Vue CLI 是基于 Vue.js 进行快速开发的完整系统，提供交互式脚手架、丰富的官方插件，并且可通过插件进行扩展，他在打包层把体验做到了极致，但是不包含路由，不是框架。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。 -### VitePress +### UMI -VitePress 是 VuePress 的孪生兄弟，它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快，但它在灵活性和可配置性上作出了一些让步，比如它不支持插件系统。当然，如果你没有进阶的定制化需求， VitePress 已经足够支持你将你的内容部署到线上。 - -这个比喻可能不是很恰当，但是你可以把 VuePress 和 VitePress 的关系看作 Laravel 和 Lumen 。 - -### Docsify / Docute - -这两个项目同样都是基于 Vue，然而它们都是完全的运行时驱动，因此对 SEO 不够友好。如果你并不关注 SEO，同时也不想安装大量依赖，它们仍然是非常好的选择！ - -### Hexo - -Hexo 一直驱动着 Vue 2.x 的文档。Hexo 最大的问题在于他的主题系统太过于静态以及过度地依赖纯字符串，而我们十分希望能够好好地利用 Vue 来处理我们的布局和交互。同时，Hexo 在配置 Markdown 渲染方面的灵活性也不是最佳的。 - -### GitBook - -过去我们的子项目文档一直都在使用 GitBook 。 GitBook 最大的问题在于当文件很多时，每次编辑后的重新加载时间长得令人无法忍受。它的默认主题导航结构也比较有限制性，并且，主题系统也不是 Vue 驱动的。GitBook 背后的团队如今也更专注于将其打造为一个商业产品而不是开源工具。 +UMI 是个很好的选择，Fes.js 很多功能是借鉴 UMI 做的。如果 UMI 对 Vue 支持够好的话，可能 Fes.js 2.0 版本就不会出现了。喜欢 React 的同学推荐直接使用 UMI。 diff --git a/docs/zh/guide/getting-started.md b/docs/zh/guide/getting-started.md index 0b168126..1331e92c 100644 --- a/docs/zh/guide/getting-started.md +++ b/docs/zh/guide/getting-started.md @@ -2,8 +2,7 @@ ## 依赖环境 -- [Node.js v12+](https://nodejs.org/) -- [Yarn v1 classic](https://classic.yarnpkg.com/zh-Hans/) （可选） +- [Node.js v10+](https://nodejs.org/) ## 手动安装