sdf

2025-04-06 03:59:53 +08:00 · 2023-04-21 21:36:55 +08:00 · 2023-04-21 21:36:55 +08:00 · 47ef9dc189
commit 47ef9dc189
parent b65b02fd02
44 changed files with 2944 additions and 2912 deletions
--- a/.gitignore
+++ b/.gitignore
@ -14,6 +14,7 @@ dist
 *.log
 node_modules
 npm-debug.log
+docs/.vitepress/cache
 /packages/fes-template/dist
 /packages/fes-doc/docs/.vuepress/dist
 /packages/fes-template/package-lock.json
--- a/.npmrc
+++ b/.npmrc
@ -1,3 +1,3 @@
 registry=https://registry.npmmirror.com
-auto-install-peers=true
-shamefully-hoist=true
+auto-install-peers=false
+shamefully-hoist=false
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -0,0 +1,36 @@
+import { defineConfig } from 'vitepress';
+import { withPwa } from '@vite-pwa/vitepress'
+
+import { navbar, sidebar } from './configs';
+
+const BASE_URL = process.env.BASE ? `/${process.env.BASE}/` : '/';
+export default withPwa(defineConfig({
+    base: BASE_URL,
+    title: 'Fes.js',
+    description: '一个好用的前端应用解决方案',
+
+    head: [
+        ['link', { rel: 'icon', href: `/logo.png` }],
+    ],
+
+    themeConfig: {
+        logo: '/logo.png',
+        nav: navbar.zh,
+        sidebar: sidebar.zh,
+
+        outline: {
+            label: '本页目录'
+        },
+
+        search: {
+            provider: 'local'
+        },
+
+        footer: {
+            message: 'Released under the MIT License.',
+            copyright: 'Copyright © 2020-present Webank'
+        },
+    },
+
+    pwa: {}
+}));
--- a/docs/.vitepress/configs/index.ts
+++ b/docs/.vitepress/configs/index.ts
--- a/docs/.vitepress/configs/navbar/index.ts
+++ b/docs/.vitepress/configs/navbar/index.ts
--- a/docs/.vitepress/configs/navbar/zh.ts
+++ b/docs/.vitepress/configs/navbar/zh.ts
@ -1,10 +1,11 @@
-import type { NavbarConfig } from '@vuepress/theme-default'
+// import type { NavbarConfig } from '@vuepress/theme-default'
 import { version } from '../../../../package.json'

-export const zh: NavbarConfig = [
+export const zh = [
  {
    text: '指南',
    link: '/guide/',
+    activeMatch: '/guide/'
  },
  {
    text: '编译时配置',
@ -17,6 +18,7 @@ export const zh: NavbarConfig = [
  {
    text: '插件',
    link: '/reference/plugin/',
+    activeMatch: '/plugin/'
  },
  {
    text: 'CLI',
@ -24,7 +26,7 @@ export const zh: NavbarConfig = [
  },
  {
    text: `v${version}`,
-    children: [
+    items: [
      {
        text: 'v2.0',
        link:
@ -38,11 +40,11 @@ export const zh: NavbarConfig = [
  },
  {
    text: '了解更多',
-    children: [
+    items: [
      {
        text: '更新日志',
        link:
-          'https://github.com/WeBankFinTech/fes.js/blob/next/CHANGELOG.md',
+          'https://github.com/WeBankFinTech/fes.js/blob/master/CHANGELOG.md',
      },
      {
        text: 'fes-design',
--- a/docs/.vitepress/configs/sidebar/index.ts
+++ b/docs/.vitepress/configs/sidebar/index.ts
--- a/docs/.vitepress/configs/sidebar/zh.ts
+++ b/docs/.vitepress/configs/sidebar/zh.ts
@ -0,0 +1,169 @@
+// import type { SidebarConfig } from '@vuepress/theme-default';
+
+export const zh = {
+    '/guide/': [
+        {
+            text: '开始',
+            items: [
+                {
+                    text: '介绍',
+                    link: '/guide/index.md'
+                },
+                {
+                    text: '快速上手',
+                    link: '/guide/getting-started.md'
+                }
+            ],
+        },
+        {
+            text: '基础',
+            items: [
+                {
+                    text: '目录结构',
+                    link: '/guide/directory-structure.md'
+                },{
+                    text: 'Vite 和 Webpack 双构建',
+                    link: '/guide/builder.md'
+                },{
+                    text: '编译时配置',
+                    link: '/guide/config.md'
+                },{
+                    text: '运行时配置',
+                    link: '/guide/runtime-config.md'
+                },{
+                    text: '环境变量',
+                    link: '/guide/env.md'
+                },{
+                    text: '路由',
+                    link: '/guide/route.md'
+                },{
+                    text: '插件',
+                    link: '/guide/plugin.md'
+                },{
+                    text: 'HTML 模板',
+                    link: '/guide/template.md'
+                },{
+                    text: 'Mock 数据',
+                    link: '/guide/mock.md'
+                },{
+                    text: '从 2.0.x 迁移到 3.0.x',
+                    link: '/guide/upgrade3.md'
+                }
+            ],
+        },
+        {
+            text: '样式和资源文件',
+            items: [
+                {
+                    text: '使用图片',
+                    link: '/guide/image.md'
+                },
+                {
+                    text: '使用 css',
+                    link: '/guide/css.md'
+                },
+                {
+                    text: '静态资源',
+                    link: '/guide/public.md'
+                }
+            ],
+        },
+        {
+            text: '贡献指南',
+            link: '/guide/contributing.md'
+        },
+        {
+            text: '常见问题',
+            link: '/guide/faq.md'
+        },
+    ],
+    '/reference/plugin/': [
+        {
+            text: '介绍',
+            link: '/reference/plugin/index.md'
+        },
+        {
+            text: 'Plugins',
+            items: [
+                {
+                    text: '@fesjs/plugin-access',
+                    link: '/reference/plugin/plugins/access.md'
+                },
+                {
+                    text: '@fesjs/plugin-enums',
+                    link: '/reference/plugin/plugins/enums.md'
+                },
+                {
+                    text: '@fesjs/plugin-icon',
+                    link: '/reference/plugin/plugins/icon.md'
+                },
+                {
+                    text: '@fesjs/plugin-jest',
+                    link: '/reference/plugin/plugins/jest.md'
+                },
+                {
+                    text: '@fesjs/plugin-layout',
+                    link: '/reference/plugin/plugins/layout.md'
+                },
+                {
+                    text: '@fesjs/plugin-locale',
+                    link: '/reference/plugin/plugins/locale.md'
+                },
+                {
+                    text: '@fesjs/plugin-model',
+                    link: '/reference/plugin/plugins/model.md'
+                },
+                {
+                    text: '@fesjs/plugin-request',
+                    link: '/reference/plugin/plugins/request.md'
+                },
+                {
+                    text: '@fesjs/plugin-vuex',
+                    link: '/reference/plugin/plugins/vuex.md'
+                },
+                {
+                    text: '@fesjs/plugin-qiankun',
+                    link: '/reference/plugin/plugins/qiankun.md'
+                },
+                {
+                    text: '@fesjs/plugin-windicss',
+                    link: '/reference/plugin/plugins/windicss.md'
+                },
+                {
+                    text: '@fesjs/plugin-sass',
+                    link: '/reference/plugin/plugins/sass.md'
+                },
+                {
+                    text: '@fesjs/plugin-editor',
+                    link: '/reference/plugin/plugins/editor.md'
+                },
+                {
+                    text: '@fesjs/plugin-pinia',
+                    link: '/reference/plugin/plugins/pinia.md'
+                },
+                {
+                    text: '@fesjs/plugin-watermark',
+                    link: '/reference/plugin/plugins/watermark.md'
+                },
+                {
+                    text: '@fesjs/plugin-login',
+                    link: '/reference/plugin/plugins/login.md'
+                },
+                {
+                    text: '@fesjs/plugin-swc',
+                    link: '/reference/plugin/plugins/swc.md'
+                },
+            ],
+        },
+        {
+            text: '插件开发',
+            items: [{
+                text: '插件介绍',
+                link: '/reference/plugin/dev/index.md'
+            }, {
+                text: '插件API',
+                link: '/reference/plugin/dev/api.md'
+            }],
+        },
+    ],
+};
--- a/docs/.vitepress/theme/components/HomeContent.vue
+++ b/docs/.vitepress/theme/components/HomeContent.vue
@ -0,0 +1,32 @@
+<template>
+    <div class="VPFeatures">
+        <div class="container">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+    position: relative;
+    padding: 0 24px;
+    margin-top: 32px;
+}
+
+@media (min-width: 640px) {
+    .VPFeatures {
+        padding: 0 48px;
+    }
+}
+
+@media (min-width: 960px) {
+    .VPFeatures {
+        padding: 0 64px;
+    }
+}
+
+.container {
+    margin: 0 auto;
+    max-width: 1152px;
+}
+</style>
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@ -0,0 +1,8 @@
+:root {
+  --vp-c-brand: #5384ff;
+  --vp-button-brand-border: #5384ff;
+  --vp-button-brand-hover-border: #5384ff;
+  --vp-button-brand-hover-bg: #759dff;
+  --vp-local-search-highlight-bg: #7da6ff;
+  --vp-c-brand-light: #747bff;
+}
--- a/docs/.vitepress/theme/index.js
+++ b/docs/.vitepress/theme/index.js
@ -0,0 +1,10 @@
+import DefaultTheme from 'vitepress/theme'
+import HomeContent from './components/HomeContent.vue'
+import './custom.css';
+
+export default {
+    extends: DefaultTheme,
+    enhanceApp(ctx) {
+        ctx.app.component('HomeContent', HomeContent);
+    }
+}
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@ -1,94 +0,0 @@
-import { defineUserConfig } from '@vuepress/cli';
-import { defaultTheme } from '@vuepress/theme-default';
-import { docsearchPlugin } from '@vuepress/plugin-docsearch';
-import { pwaPopupPlugin } from '@vuepress/plugin-pwa-popup';
-import { pwaPlugin } from '@vuepress/plugin-pwa';
-import { backToTopPlugin } from '@vuepress/plugin-back-to-top'
-import { navbar, sidebar } from './configs';
-
-export default defineUserConfig({
-    base: process.env.BASE ? `/${process.env.BASE}/` : '/',
-
-    head: [
-        ['link', { rel: 'manifest', href: '/manifest.webmanifest' }],
-        ['link', { rel: 'icon', href: `/logo.png` }],
-    ],
-
-    // site-level locales config
-    locales: {
-        '/': {
-            lang: 'zh-CN',
-            title: 'Fes.js',
-            description: '一个好用的前端应用解决方案',
-        },
-    },
-
-    theme: defaultTheme({
-        logo: '/logo.png',
-
-        repo: 'WeBankFinTech/fes.js',
-
-        docsDir: 'docs',
-
-        docsBranch: 'next',
-
-        // theme-level locales config
-        locales: {
-            /**
-             * English locale config
-             *
-             * As the default locale of @vuepress/theme-default is English,
-             * we don't need to set all of the locale fields
-             */
-            '/': {
-                navbar: navbar.zh,
-                selectLanguageName: '简体中文',
-                selectLanguageText: '选择语言',
-                selectLanguageAriaLabel: '选择语言',
-
-                // sidebar
-                sidebar: sidebar.zh,
-
-                // page meta
-                editLinkText: '在 GitHub 上编辑此页',
-                lastUpdatedText: '上次更新',
-                contributorsText: '贡献者',
-
-                // custom containers
-                tip: '提示',
-                warning: '注意',
-                danger: '警告',
-
-                // 404 page
-                notFound: ['这里什么都没有', '我们怎么到这来了？', '这是一个 404 页面', '看起来我们进入了错误的链接'],
-                backToHome: '返回首页',
-
-                // other
-                openInNewWindow: '在新窗口打开',
-            },
-        },
-    }),
-
-    plugins: [
-		docsearchPlugin({
-			appId: '4ZF3BCJTP5',
-			apiKey: '09ff75bbe16bc6e166e103ffb57e10ea',
-			indexName: 'fesjs',
-			locales: {
-				'/': {
-					placeholder: '搜索文档',
-				},
-			},
-		}),
-		pwaPlugin(),
-		pwaPopupPlugin({
-			locales: {
-				'/': {
-					message: '发现新内容可用',
-					buttonText: '刷新',
-				},
-			},
-		}),
-        backToTopPlugin()
-    ],
-});
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/docs/.vuepress/configs/sidebar/zh.ts
@ -1,68 +0,0 @@
-import type { SidebarConfig } from '@vuepress/theme-default';
-
-export const zh: SidebarConfig = {
-    '/guide/': [
-        {
-            // isGroup: true,
-            text: '介绍',
-            children: ['/guide/README.md', '/guide/getting-started.md'],
-        },
-        {
-            // isGroup: true,
-            text: '基础',
-            children: [
-                '/guide/directory-structure.md',
-                '/guide/builder.md',
-                '/guide/config.md',
-                '/guide/runtime-config.md',
-                '/guide/env.md',
-                '/guide/route.md',
-                '/guide/plugin.md',
-                '/guide/template.md',
-                '/guide/mock.md',
-                '/guide/upgrade3.md',
-            ],
-        },
-        {
-            // isGroup: true,
-            text: '样式和资源文件',
-            children: ['/guide/image.md', '/guide/css.md', '/guide/public.md'],
-        },
-        '/guide/contributing.md',
-        '/guide/faq.md',
-    ],
-    '/reference/config/': ['/reference/config/README.md'],
-    '/reference/api/': ['/reference/api/README.md'],
-    '/reference/plugin/': [
-        '/reference/plugin/README.md',
-        {
-            // isGroup: true,
-            text: 'Plugins',
-            children: [
-                '/reference/plugin/plugins/access.md',
-                '/reference/plugin/plugins/enums.md',
-                '/reference/plugin/plugins/icon.md',
-                '/reference/plugin/plugins/jest.md',
-                '/reference/plugin/plugins/layout.md',
-                '/reference/plugin/plugins/locale.md',
-                '/reference/plugin/plugins/model.md',
-                '/reference/plugin/plugins/request.md',
-                '/reference/plugin/plugins/vuex.md',
-                '/reference/plugin/plugins/qiankun.md',
-                '/reference/plugin/plugins/windicss.md',
-                '/reference/plugin/plugins/sass.md',
-                '/reference/plugin/plugins/editor.md',
-                '/reference/plugin/plugins/pinia.md',
-                '/reference/plugin/plugins/watermark.md',
-                '/reference/plugin/plugins/login.md',
-                '/reference/plugin/plugins/swc.md',
-            ],
-        },
-        {
-            // isGroup: true,
-            text: '插件开发',
-            children: ['/reference/plugin/dev/README.md', '/reference/plugin/dev/api.md'],
-        },
-    ],
-    '/reference/cli/': ['/reference/cli/README.md'],
-};
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@ -1,3 +0,0 @@
-.page
-    .page-meta, .page-nav, .theme-default-content:not(.custom)
-        max-width: 1000px
--- a/docs/guide/builder.md
+++ b/docs/guide/builder.md
@ -1,4 +1,4 @@
-# 支持 Vite 和 Webpack 双构建
+# Vite 和 Webpack 双构建

 `Fes.js@3.0.x` 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:

--- a/docs/guide/contributing.md
+++ b/docs/guide/contributing.md
@ -1,5 +1,9 @@
 # 贡献指南

+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
 ## 包概览

 项目仓库借助于 [pnpm 工作区](https://pnpm.io/pnpm-workspace_yaml) 来实现 [ Monorepo](https://en.wikipedia.org/wiki/Monorepo) ，在 `packages` 目录下存放多个互相关联的独立包。
@ -60,7 +64,7 @@ pnpm docs:dev
 如果想添加图片，则可以先把图片添加至`/docs/.vuepress/public`，在代码中使用：

 ```html
-<img :src="$withBase('framework.png')" alt="架构" />
+<img :src="withBase('framework.png')" alt="架构" />
 ```

 #### 第三步：查看更新
--- a/docs/guide/env.md
+++ b/docs/guide/env.md
@ -17,24 +17,20 @@ set PORT=3000 && fes dev
 ```

 如果要同时考虑 OS X 和 Windows，可借助三方工具 [cross-env](https://github.com/kentcdodds/cross-env)
-<CodeGroup>
-<CodeGroupItem title="PNPM" active>

-```bash
+::: code-group
+
+```sh [pnpm]
 pnpm add cross-env --dev
 cross-env PORT=3000 fes dev
 ```

-  </CodeGroupItem>
-  <CodeGroupItem title="NPM">
-
-```bash
+```sh [npm]
 npm i cross-env --save-dev
 cross-env PORT=3000 fes dev
 ```

-  </CodeGroupItem>
-</CodeGroup>
+:::

 ### `.env` 文件配置

--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@ -1,5 +1,9 @@
 # 快速上手

+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
 ## 依赖环境

 首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
@ -63,7 +67,7 @@ npx @fesjs/create-fes-app myapp

 如果项目文件夹 `workspace/myapp` 已经存在，会提示目录已存在：

-<img :src="$withBase('pickTemplateTip.png')" alt="目录已存在提示">
+<img :src="withBase('pickTemplateTip.png')" alt="目录已存在提示">

 你可以选择：

@ -71,7 +75,7 @@ npx @fesjs/create-fes-app myapp
 -   `Merge` 保留原项目文件夹，存在相同文件则用模板文件覆盖当前目录文件。

 当选择 `Overwrite` 或者 `Merge` 或者项目目录 `workspace/myapp` 不存在，会提示选取一个 `template`：
-<img :src="$withBase('pickTemplate.png')" alt="选择模板类型">
+<img :src="withBase('pickTemplate.png')" alt="选择模板类型">

 你可以选默认适用于中后台前端应用的 `PC` 类型，也可以选适用于移动端的 `H5` 类型。

@ -142,7 +146,7 @@ Starting the development server http://localhost:8000 ...

 Fes.js 会在 [http://localhost:8000](http://localhost:8000) 启动一个热重载的开发服务器。当你修改你的 .vue 文件时，浏览器中的内容也会自动更新。

-<img :src="$withBase('home.png')" alt="home">
+<img :src="withBase('home.png')" alt="home">

 ## 部署发布

--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@ -1,11 +1,13 @@
-
 # 介绍

-
+<script setup>
+import { withBase } from 'vitepress'
+</script>

 ## 痛点

 在开发一个前端项目之前，我们可能需要做如下准备工作：
+
 -   搭建开发环境
 -   约定代码规范
 -   封装 API 请求
@ -22,35 +24,38 @@
 Fes.js 是一个好用的前端应用解决方案。Fes.js 以 Vue 3.0 和路由为基础，同时支持配置式路由和约定式路由，并以此进行功能扩展。配以覆盖编译时和运行时生命周期完善的插件体系，支持各种功能扩展和业务需求。

 它主要具备以下特点：
- 🚀  __快速__ ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API请求、数据字典、SvgIcon等插件，可以满足大部分日常开发需求。  

- 🧨  __简单__ ，基于Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的API入口，一致化的体验，学习起来更轻松。
+-   🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
+-   🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。

- 💪  __健壮__ ，只需要关心页面内容，减少写BUG的机会！提供单元测试、覆盖测试能力保障项目质量。
+-   💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。

- 📦  __可扩展__ ，借鉴Umi实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
-
- 📡  __面向未来__ ，在满足需求的同时，我们也不会停止对新技术的探索。已使用Vue3.0来提升应用性能，已使用webpack5提升构建性能和实现微服务，未来会探索vite等新技术。
+-   📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。

+-   📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 提升构建性能和实现微服务，未来会探索 vite 等新技术。

 ## Fes.js 如何工作？

 ### 架构
+
 <!-- ![架构](/framework.png "架构") -->
-<img :src="$withBase('framework.png')" alt="架构">
+<img :src="withBase('framework.png')" alt="架构">

 Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。

 ### 插件和插件集
+
 <p>
-    <img :src="$withBase('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 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

 ### .fes 临时文件
+
 .fes 临时目录是整个 Fes.js 项目的发动机，你的入口文件、路由等等都在这里，这些是由 fes 内部插件及三方插件生成的。

 你通常会在 .fes 下看到以下目录
+
 ```
 + .fes
  + core     # 内部插件生成
@ -63,8 +68,6 @@ Fes.js 支持插件和插件集，通过这张图应该很好理解到他们的

 你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 fes 时都会被删除并重新生成。

-
-
 ## 为什么不是 ...?

 ### Vue CLI
--- a/docs/README.md
+++ b/docs/README.md
@ -1,14 +1,20 @@
 ---
-home: true
-title: 首页
-heroImage: /logo.png
+layout: home
+title: Fes.js
+
+hero:
+    name: Fes.js
+    tagline: 一个好用的前端应用解决方案
+    image:
+        src: /logo.png
+        alt: VitePress
    actions:
        - text: 快速上手
          link: /guide/getting-started.html
-      type: primary
+          theme: brand
        - text: 项目简介
          link: /guide/
-      type: secondary
+          theme: alt
 features:
    - title: Fast
      details: Fes.js 内置路由、构建、插件管理，提供测试、布局、权限、国际化、状态管理、请求、数据字典、SVG等插件，可以满足大部分日常开发需求。
@ -22,16 +28,15 @@ features:
      details: 在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
    - title: 令人愉悦
      details: 我们的主要重点是开发人员体验。我们喜欢 Fes.js，并且会不断改进框架，所以您也喜欢它！期待有吸引力的解决方案，描述性的错误消息，强大的默认值和详细的文档。如果有问题或疑问，我们有用的社区将为您提供帮助。
-footer: MIT Licensed | Copyright © 2020-present Webank
 ---

+<HomeContent>
+
 ## 像数 1, 2, 3 一样容易

+::: code-group

-<CodeGroup>
-  <CodeGroupItem title="PNPM" active>
-
-```bash
+```bash [pnpm]
 # 创建模板
 pnpm create @fesjs/fes-app myapp

@ -42,11 +47,7 @@ pnpm i
 pnpm dev
 ```

-  </CodeGroupItem>
-
-  <CodeGroupItem title="NPM">
-
-```bash
+```bash [npm]
 # 创建模板
 npx @fesjs/create-fes-app myapp

@ -57,11 +58,12 @@ npm install
 npm run dev
 ```

-  </CodeGroupItem>
-</CodeGroup>
+:::

 ## 反馈

 | Github Issue                                                           | Fes.js 开源运营小助手                                                                            |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
 | [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
+
+</HomeContent>
--- a/docs/.vuepress/public/framework.png
+++ b/docs/.vuepress/public/framework.png
--- a/docs/.vuepress/public/home.png
+++ b/docs/.vuepress/public/home.png
--- a/docs/.vuepress/public/left-right.png
+++ b/docs/.vuepress/public/left-right.png
--- a/docs/.vuepress/public/logo.png
+++ b/docs/.vuepress/public/logo.png
--- a/docs/.vuepress/public/manifest.webmanifest
+++ b/docs/.vuepress/public/manifest.webmanifest
--- a/docs/.vuepress/public/mixin.png
+++ b/docs/.vuepress/public/mixin.png
--- a/docs/.vuepress/public/pickTemplate.png
+++ b/docs/.vuepress/public/pickTemplate.png
--- a/docs/.vuepress/public/pickTemplateTip.png
+++ b/docs/.vuepress/public/pickTemplateTip.png
--- a/docs/.vuepress/public/plugins.png
+++ b/docs/.vuepress/public/plugins.png
--- a/docs/.vuepress/public/side.png
+++ b/docs/.vuepress/public/side.png
--- a/docs/.vuepress/public/top.png
+++ b/docs/.vuepress/public/top.png
--- a/docs/reference/api/README.md
+++ b/docs/reference/api/README.md
@ -1,21 +1,26 @@
 ---
-sidebar: auto
+aside: left
+outline: [2, 3]
 ---

 # API
+
 Fes.js 统一了 API 的出口，所有运行时 API（包含 Fes.js 内置 API 和插件提供的 API）全部通过`@fesjs/fes`导出。
+
 ```js
-import { someApi  } from "@fesjs/fes"
+import { someApi } from '@fesjs/fes';
 ```

 ## 基础 API

 ### plugin
+
 ::: tip
 主要在插件里面使用，项目代码中一般用不到。
 :::

 运行时插件接口，是 Fes.js 内置的跑在浏览器里的一套插件体系。
+
 ```js
 import { plugin, ApplyPluginsType } from '@fesjs/fes';

@ -38,17 +43,15 @@ plugin.applyPlugins({
    args: {},
    async: false,
 });
-
 ```

 #### **plugin.register** 参数包含:
+
 -   apply 插件文件导出的内容
 -   path 插件文件路径

-
-
-
 #### **plugin.applyPlugins** 参数包含:
+
 -   key，坑位的 key
 -   type，执行方式类型，详见 [ApplyPluginsType](#applypluginstype)
 -   initialValue，初始值
@ -56,118 +59,140 @@ plugin.applyPlugins({
 -   async，是否异步执行且返回 Promise

 ### ApplyPluginsType
+
 ::: tip
 主要在插件里面使用，项目代码中一般用不到。
 :::

 运行时插件执行类型，enum 类型，包含三个属性：
+
 -   compose，用于合并执行多个函数，函数可决定前序函数的执行时机
 -   modify，用于修改值
 -   event，用于执行事件，前面没有依赖关系

 ### defineRouteMeta
+
 定义页面的元信息

 ### defineBuildConfig
+
 定义构建配置

 ### defineRuntimeConfig
-定义运行时配置

+定义运行时配置

 ## 路由 API

 Fes.js 路由基于 [Vue Router 4.0](https://next.router.vuejs.org/introduction.html)，想了解更多的同学可以看看官方文档。

 ### getRouter
+
 返回当前 `router` 实例。
+
 ```js
-import { getRouter } from "@fesjs/fes";
+import { getRouter } from '@fesjs/fes';
 const router = getRouter();
 router.push();
 ```

 ### getHistory
+
 返回当前路由的 History

-
 ### useRoute
+
 返回当前 `route` 实例，相当于在模板内使用 `$route`。必须在 `setup` 函数内调用。
+
 ```js
-import { useRoute } from "@fesjs/fes";
+import { useRoute } from '@fesjs/fes';
 export default {
    setup() {
-        const route = useRoute()
-    }
-}
+        const route = useRoute();
+    },
+};
 ```

 ### useRouter
+
 返回 `router` 实例，相当于在模板语法中使用 `$router`。必须在 `setup` 函数内调用。
+
 ```js
-import { useRouter } from "@fesjs/fes";
+import { useRouter } from '@fesjs/fes';
 export default {
    setup() {
-        const router = useRouter()
-    }
-}
+        const router = useRouter();
+    },
+};
 ```

 ### onBeforeRouteUpdate
+
 添加导航守卫，在当前路由即将更新时触发。类似于之前的`beforeRouteUpdate`，但是可用于任何组件。卸载组件时，将移除守卫。
+
 ```js
-import { onBeforeRouteUpdate } from "@fesjs/fes";
+import { onBeforeRouteUpdate } from '@fesjs/fes';
 export default {
    setup() {
-        onBeforeRouteUpdate((to, from, next)=>{
-        })
-    }
-}
+        onBeforeRouteUpdate((to, from, next) => {});
+    },
+};
 ```
+
 ### onBeforeRouteLeave
+
 添加导航守卫，在当前路由即将离开时触发。类似于之前的`beforeRouteLeave`，但可用于任何组件。卸载组件时，将移除守卫。
+
 ```js
-import { onBeforeRouteLeave } from "@fesjs/fes";
+import { onBeforeRouteLeave } from '@fesjs/fes';
 export default {
    setup() {
-        onBeforeRouteLeave((to, from, next)=>{
-        })
-    }
-}
+        onBeforeRouteLeave((to, from, next) => {});
+    },
+};
 ```

 ### createWebHashHistory
+
 ::: tip
 在开发插件时可能用上，平时一般用不上
 :::
 创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，你应该使用 `createWebHistory`。

 ### createWebHistory
+
 ::: tip
 在开发插件时可能用上，平时一般用不上
 :::
 创建 HTML5 历史记录。单页应用程序最常见的历史记录。必须通过 http 服务打开页面地址 。

 ### createMemoryHistory
+
 ::: tip
 在开发插件时可能用上，平时一般用不上
 :::
 创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。

 ### createRouter
+
 创建一个路由器实例，该实例可用于 Vue 应用程序。查看[路由器选项](https://next.router.vuejs.org/api/#routeroptions)，了解可以传递的所有属性的列表。

 ### RouterLink
+
 使用自定义组件路由器链接来创建链接，而不是使用常规标签。这使得 Vue 路由器无需重新加载页面即可更改 URL、处理 URL 生成及其编码。
+
 ```html
 <router-link to="/about">Go to About</router-link>
 ```
+
 可以查看[官方文档](https://next.router.vuejs.org/api/#router-link-props)了解更多 RouterLink 的 Porps。查看[官方文档](https://next.router.vuejs.org/api/#router-link-s-v-slot)了解 RouterLink 的作用域插槽。

 ### useLink
+
 返回的结果跟 RouterLink 的作用域插槽的属性一致，查看[官方 API](https://next.router.vuejs.org/api/#router-link-s-v-slot)了解更多。
+
 ```js
-import { RouterLink, useLink } from '@fesjs/fes'
+import { RouterLink, useLink } from '@fesjs/fes';

 export default {
    name: 'AppLink',
@ -180,25 +205,28 @@ export default {

    setup(props) {
        // `props` contains `to` and any other prop that can be passed to <router-link>
-    const { navigate, href, route, isActive, isExactActive } = useLink(props)
+        const { navigate, href, route, isActive, isExactActive } = useLink(props);

        // profit!

-    return { isExternalLink }
+        return { isExternalLink };
    },
-}
+};
 ```

 ### RouterView
+
 router-view 将显示当前 URL 的对应的路由组件。你可以把它放在任何地方，以适应你的布局。
+
 ```html
 <router-view></router-view>
 <router-view v-slot="{ Component, route }">
    <component :is="Component" />
 </router-view>
 ```
+
 可以查看[官方文档](https://next.router.vuejs.org/api/#router-view-props)了解更多 RouterView 的 Porps。查看[官方文档](https://next.router.vuejs.org/api/#router-view-s-v-slot)了解 RouterView 的作用域插槽。

 ### 其他 Router Methods
-查看[vue-router 官方文档](https://next.router.vuejs.org/api/#router-methods)了解更多。

+查看[vue-router 官方文档](https://next.router.vuejs.org/api/#router-methods)了解更多。
--- a/docs/reference/cli/README.md
+++ b/docs/reference/cli/README.md
@ -1,5 +1,6 @@
 ---
-sidebar: auto
+aside: left
+outline: [2, 3]
 ---

 # 命令行工具
--- a/docs/reference/config/README.md
+++ b/docs/reference/config/README.md
@ -1,5 +1,6 @@
 ---
-sidebar: auto
+aside: left
+outline: [2, 3]
 ---

 ## 配置文件
--- a/docs/reference/plugin/README.md
+++ b/docs/reference/plugin/README.md
@ -1,28 +0,0 @@
-# 介绍
-## 插件列表
- 
-|  插件   | 介绍  | 
-|  ----  | ----  |
-| [@fesjs/plugin-access](./plugins/access.md)  | 提供对页面资源的权限控制能力 | 
-| [@fesjs/plugin-enums](./plugins/enums.md)  | 提供统一的枚举存取及丰富的函数来处理枚举 | 
-| [@fesjs/plugin-icon](./plugins/icon.md)  | svg 文件自动注册为组件 |  
-| [@fesjs/plugin-jest](./plugins/jest.md)  | 基于 `Jest`，提供单元测试、覆盖测试能力 | 
-| [@fesjs/plugin-layout](./plugins/layout.md) |  简单的配置即可拥有布局，包括导航以及侧边栏 |
-| [@fesjs/plugin-locale](./plugins/locale.md) |  基于 `Vue I18n`，提供国际化能力 |
-| [@fesjs/plugin-model](./plugins/model.md) |  简易的数据管理方案 |
-| [@fesjs/plugin-request](./plugins/request.md) |  基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
-| [@fesjs/plugin-vuex](./plugins/vuex.md) |  基于 `Vuex`, 提供状态管理能力 |
-| [@fesjs/plugin-qiankun](./plugins/qiankun.md) |  基于 `qiankun`，提供微服务能力 |
-| [@fesjs/plugin-sass](./plugins/sass.md) |  样式支持sass |
-| [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力，  基于`monaco-editor`（VS Code使用的代码编辑器） |
-| [@fesjs/plugin-windicss](./plugins/windicss.md) | 基于 `windicss`，提供原子化 CSS 能力 |
-| [@fesjs/plugin-pinia](./plugins/pinia.md) | 基于 `pinia`，提供状态管理 |
-| [@fesjs/plugin-watermark](./plugins/watermark.md) | 水印 |
-| [@fesjs/plugin-swc](./plugins/swc.md) | swc |
-
-## 架构
-
-<!-- ![架构](/framework.png "架构") -->
-<img :src="$withBase('framework.png')" alt="架构">
-
-Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
--- a/docs/reference/plugin/dev/README.md
+++ b/docs/reference/plugin/dev/README.md
--- a/docs/reference/plugin/index.md
+++ b/docs/reference/plugin/index.md
@ -0,0 +1,33 @@
+# 介绍
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
+## 插件列表
+
+| 插件                                               | 介绍                                                                    |
+| -------------------------------------------------- | ----------------------------------------------------------------------- |
+| [@fesjs/plugin-access](./plugins/access.md)        | 提供对页面资源的权限控制能力                                            |
+| [@fesjs/plugin-enums](./plugins/enums.md)          | 提供统一的枚举存取及丰富的函数来处理枚举                                |
+| [@fesjs/plugin-icon](./plugins/icon.md)            | svg 文件自动注册为组件                                                  |
+| [@fesjs/plugin-jest](./plugins/jest.md)            | 基于 `Jest`，提供单元测试、覆盖测试能力                                 |
+| [@fesjs/plugin-layout](./plugins/layout.md)        | 简单的配置即可拥有布局，包括导航以及侧边栏                              |
+| [@fesjs/plugin-locale](./plugins/locale.md)        | 基于 `Vue I18n`，提供国际化能力                                         |
+| [@fesjs/plugin-model](./plugins/model.md)          | 简易的数据管理方案                                                      |
+| [@fesjs/plugin-request](./plugins/request.md)      | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
+| [@fesjs/plugin-vuex](./plugins/vuex.md)            | 基于 `Vuex`, 提供状态管理能力                                           |
+| [@fesjs/plugin-qiankun](./plugins/qiankun.md)      | 基于 `qiankun`，提供微服务能力                                          |
+| [@fesjs/plugin-sass](./plugins/sass.md)            | 样式支持 sass                                                           |
+| [@fesjs/plugin-monaco-editor](./plugins/editor.md) | 提供代码编辑器能力， 基于`monaco-editor`（VS Code 使用的代码编辑器）    |
+| [@fesjs/plugin-windicss](./plugins/windicss.md)    | 基于 `windicss`，提供原子化 CSS 能力                                    |
+| [@fesjs/plugin-pinia](./plugins/pinia.md)          | 基于 `pinia`，提供状态管理                                              |
+| [@fesjs/plugin-watermark](./plugins/watermark.md)  | 水印                                                                    |
+| [@fesjs/plugin-swc](./plugins/swc.md)              | swc                                                                     |
+
+## 架构
+
+<!-- ![架构](/framework.png "架构") -->
+<img :src="withBase('framework.png')" alt="架构">
+
+Fes.js 把大家常用的技术栈封装成一个个插件进行整理，收敛到一起，让大家只用 Fes.js 就可以完成 80% 的日常工作。
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@ -1,3 +1,7 @@
+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
 # @fesjs/plugin-layout

 ## 介绍
@ -35,22 +39,22 @@
 ### side

 <!-- ![side](/side.png) -->
-<img :src="$withBase('side.png')" alt="side">
+<img :src="withBase('side.png')" alt="side">

 ### top

 <!-- ![top](/top.png) -->
-<img :src="$withBase('top.png')" alt="top">
+<img :src="withBase('top.png')" alt="top">

 ### mixin

 <!-- ![mixin](/mixin.png) -->
-<img :src="$withBase('mixin.png')" alt="mixin">
+<img :src="withBase('mixin.png')" alt="mixin">

 ### left-right

 <!-- ![mixin](/mixin.png) -->
-<img :src="$withBase('left-right.png')" alt="left-right">
+<img :src="withBase('left-right.png')" alt="left-right">

 ### 页面个性化

--- a/package.json
+++ b/package.json
@ -13,9 +13,9 @@
    "build": "node scripts/build.mjs",
    "release": "node scripts/release.mjs",
    "clean": "rm -rf ./node_modules & rm -rf packages/**/node_modules & rm -rf packages/**/.cache",
-    "docs:dev": "vuepress dev docs --clean-cache",
-    "docs:build": "vuepress build docs --clean-cache",
-    "docs:build-pages": "BASE=fes.js vuepress build docs --clean-cache",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:build-pages": "BASE=fes.js vitepress build docs",
    "test": "fes test",
    "lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
@ -34,18 +34,12 @@
    "enquirer": "^2.3.6",
    "execa": "^6.1.0",
    "minimist": "^1.2.6",
-    "semver": "^7.3.6",
-    "vuepress": "2.0.0-beta.53"
+    "semver": "^7.3.6"
  },
  "devDependencies": {
-    "@babel/core": "^7.21.3",
-    "@babel/preset-env": "^7.20.2",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
-    "@vuepress/plugin-back-to-top": "2.0.0-beta.53",
-    "@vuepress/plugin-docsearch": "2.0.0-beta.53",
-    "@vuepress/plugin-pwa": "2.0.0-beta.53",
-    "@vuepress/plugin-pwa-popup": "2.0.0-beta.53",
+    "@vite-pwa/vitepress": "^0.0.5",
    "@webank/eslint-config-webank": "1.2.7",
    "chokidar": "^3.5.2",
    "commitizen": "^4.2.1",
@ -54,8 +48,8 @@
    "fs-extra": "^11.1.1",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.1.0",
+    "vite-plugin-pwa": "^0.14.7",
+    "vitepress": "1.0.0-alpha.73",
    "yargs-parser": "^21.1.1"
  },
  "lint-staged": {
--- a/packages/fes-template-vite/.fes.js
+++ b/packages/fes-template-vite/.fes.js
@ -1,7 +1,7 @@
 import { defineBuildConfig } from '@fesjs/fes';

 export default defineBuildConfig({
-    builder: 'vite',
+    builder: 'webpack',
    define: {
        __DEV__: false,
    },
--- a/packages/fes-template-vite/package.json
+++ b/packages/fes-template-vite/package.json
@ -43,10 +43,10 @@
    "access": "public"
  },
  "dependencies": {
-    "@fesjs/fes-design": "^0.7.0",
    "@fesjs/builder-vite": "workspace:*",
    "@fesjs/builder-webpack": "workspace:*",
    "@fesjs/fes": "workspace:*",
+    "@fesjs/fes-design": "^0.7.0",
    "@fesjs/plugin-access": "workspace:*",
    "@fesjs/plugin-enums": "workspace:*",
    "@fesjs/plugin-icon": "workspace:*",
@ -59,7 +59,6 @@
    "@fesjs/plugin-request": "workspace:*",
    "@fesjs/plugin-sass": "workspace:*",
    "core-js": "^3.29.1",
-    "cssnano": "^6.0.0",
    "pinia": "^2.0.11",
    "vue": "^3.2.47"
  },
--- a/packages/fes-template-vite/postcss.config.js
+++ b/packages/fes-template-vite/postcss.config.js
@ -1,7 +0,0 @@
-module.exports = {
-    plugins: [
-        require('cssnano')({
-            preset: 'default',
-        }),
-    ],
-};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/vetur.config.js
+++ b/vetur.config.js
@ -1,16 +0,0 @@
-// vetur.config.js
-/** @type {import('vls').VeturConfig} */
-module.exports = {
-    // **optional** default: `{}`
-    // override vscode settings
-    // Notice: It only affects the settings used by Vetur.
-    settings: {
-        'vetur.useWorkspaceDependencies': true,
-        'vetur.experimental.templateInterpolationService': true
-    },
-    // **optional** default: `[{ root: './' }]`
-    // support monorepos
-    projects: [
-        './packages/fes-template' // shorthand for only root
-    ]
-};