docs: add architecture introduction

Author: meteorlxy

docs/.vuepress/configs/navbar/en.ts

@@ -53,9 +53,10 @@ export const en: NavbarConfig = [
       {
         text: 'Advanced',
         children: [
-          '/guide/advanced/markdown.md',
-          '/guide/advanced/theme.md',
+          '/guide/advanced/architecture.md',
           '/guide/advanced/plugin.md',
+          '/guide/advanced/theme.md',
+          '/guide/advanced/markdown.md',
         ],
       },
       {

docs/.vuepress/configs/navbar/zh.ts

@@ -50,9 +50,10 @@ export const zh: NavbarConfig = [
       {
         text: '深入',
         children: [
-          '/zh/guide/advanced/markdown.md',
-          '/zh/guide/advanced/theme.md',
+          '/zh/guide/advanced/architecture.md',
           '/zh/guide/advanced/plugin.md',
+          '/zh/guide/advanced/theme.md',
+          '/zh/guide/advanced/markdown.md',
         ],
       },
       {

docs/.vuepress/configs/sidebar/en.ts

@@ -25,9 +25,10 @@ export const en: SidebarConfig = {
       isGroup: true,
       text: 'Advanced',
       children: [
-        '/guide/advanced/markdown.md',
-        '/guide/advanced/theme.md',
+        '/guide/advanced/architecture.md',
         '/guide/advanced/plugin.md',
+        '/guide/advanced/theme.md',
+        '/guide/advanced/markdown.md',
       ],
     },
   ],

docs/.vuepress/configs/sidebar/zh.ts

@@ -25,9 +25,10 @@ export const zh: SidebarConfig = {
       isGroup: true,
       text: '深入',
       children: [
-        '/zh/guide/advanced/markdown.md',
-        '/zh/guide/advanced/theme.md',
+        '/zh/guide/advanced/architecture.md',
         '/zh/guide/advanced/plugin.md',
+        '/zh/guide/advanced/theme.md',
+        '/zh/guide/advanced/markdown.md',
       ],
     },
   ],

docs/.vuepress/public/images/guide/vuepress-architecture-overview.png

@@ -0,0 +1,29 @@
+# Architecture
+
+## Overview
+
+![vuepress-architecture-overview](/images/guide/vuepress-architecture-overview.png)
+
+The above figure shows a brief overview of the VuePress architecture:
+
+- Node App will generate temp files, including the layouts, pages, routes, etc.
+- Bundler will handle Client App together with the temp files, just like a common Vue SPA.
+
+As a developer, you must be aware of that VuePress has two main parts: **Node App** and **Client App**, which is important when developing plugins and themes:
+
+- The entry file of a plugin or a theme will be loaded in Node App. So you need to use CommonJS format for them.
+- Client files will be loaded in Client App, which will be handled by bundler. For example, layouts, components, app setup files, app enhance files, etc. You'd better use ESM format for them.
+
+## Core Process and Hooks
+
+![vuepress-core-process](/images/guide/vuepress-core-process.png)
+
+The above figure shows the core process of VuePress Node App and the hooks of [Plugin API](../../reference/plugin-api.md):
+
+- In the **init** stage:
+  - Theme and plugins will be loaded. That means all the plugins should be used before initialization.
+  - Page files will be loaded. As we are using markdown-it to parse the markdown file, the [extendsMarkdown](../../reference/plugin-api.md#extendsmarkdown) hook will be processed before that.
+- In the **prepare** stage:
+  - Temp files will be generated, so all hooks related to client files will be processed here.
+- In the **dev / build** stage:
+  - Bundler will be resolved. The [alias](../../reference/plugin-api.md#alias) and [define](../../reference/plugin-api.md#define) hooks depend on bundler configuration, so they will be processed here.

docs/.vuepress/public/images/guide/vuepress-core-process.png

@@ -0,0 +1,3 @@
+# 架构
+
+> TODO