docs(ui): added details when using @nolebase/ui

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

Author: nekomeowww

docs/pages/en/ui/index.md

@@ -2,12 +2,86 @@
 import { NuButton } from '@nolebase/ui'
 </script>
 
-# UI Components
+# UI Components <Badge type="danger" text="Alpha" />
+
+::: danger 🛑 This package is in Alpha stage.
+This package is still in the Alpha stage, and it is not recommended to use it in production. The API may change in the future, and there may be bugs in the current version. Please use it with caution.
+:::
 
 ::: warning 🚧 Constructing
 Nice to meet you! But sorry, this page is still under construction. If you don’t find the information you are interested in, you can first find the content you are interested in in the navigation in the sidebar to start reading.
 :::
 
+## How to use
+
+::: tip 🙋 Before install
+
+Currently `@nolebase/ui` is still under development, and will be used by other [Nolebase Integrations](https://nolebase-integrations.ayaka.io) components now (such as [`vitepress-plugin-git-changelog`](/pages/en/integrations/vitepress-plugin-git-changelog/)). And those components and integrations of [Nolebase Integrations](https://nolebase-integrations.ayaka.io) will configure the needed options and settings to bundle and transform the underlying dependencies.
+
+Therefore, if you would ever want to install `@nolebase/ui` as one of your dependencies, you would need to configure a few configurations before proceeding:
+
+#### 1. Additional configurations for Vite
+
+##### 1.1 For users who imported `<NuLazyTeleportRiveCanvas />` component
+
+Since `<NuLazyTeleportRiveCanvas />` depends on `@rive-app/canvas`. If you also use Vite as your bundler, you will need to add the following configurations to your `vite.config.ts` file like this:
+
+```typescript
+export default defineConfig(() => {
+  return {
+    optimizeDeps: { // [!code ++]
+      include: [ // [!code ++]
+        // Add this line to your vite.config.ts's optimizeDeps.include array // [!code ++]
+        '@nolebase/ui  @rive-app/canvas', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }
+})
+```
+
+For more information about why configure this, please refer to the [Dep Optimization Options | Vite](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude) documentation.
+
+##### 1.2 For users who imported VitePress related components
+
+If you are using VitePress, and imported components relies on VitePress, you will need to add the following configurations to your `vite.config.ts` file like this:
+
+```typescript
+export default defineConfig(() => {
+  return {
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // Add this line to your vite.config.ts's ssr.noExternal array // [!code ++]
+        '@nolebase/ui', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }
+})
+```
+
+For more information about why configure this, please refer to the [Server-Side Rendering | Vite](https://vitejs.dev/guide/ssr.html#ssr-externals) documentation.
+
+:::
+
+### Installation
+
+You can install `@nolebase/ui` as one of your Vue or VitePress project dependencies with the following command:
+
+::: code-group
+
+```shell [pnpm]
+pnpm add @nolebase/ui -D
+```
+
+```shell [npm]
+npm install @nolebase/ui -D
+```
+
+```shell [yarn]
+yarn add @nolebase/ui -D
+```
+
+:::
+
 ## Buttons
 
 <div>

docs/pages/zh-CN/ui/index.md

@@ -2,12 +2,84 @@
 import { NuButton } from '@nolebase/ui'
 </script>
 
-# UI 组件
+# UI 组件 <Badge type="danger" text="Alpha 测试" />
+
+::: danger 🛑 此包仍处于 Alpha 测试阶段
+此包仍处于 Alpha 测试阶段，不建议在生产中使用。未来 API 可能会发生变化，当前版本可能存在错误。请谨慎使用。
+:::
 
 ::: warning 🚧 施工中
 很高兴见到你！但很抱歉，这个页面还在施工中，如果没有找到你感兴趣的信息，你可以先在侧边栏的导航中寻找你感兴趣的内容来开始阅读
 :::
 
+## 如何开始
+
+::: tip 🙋 安装前须知
+
+目前 `@nolebase/ui` 仍在开发中，将被其他 [Nolebase Integrations](https://nolebase-integrations.ayaka.io) 组件使用（例如 [`vitepress-plugin-git-changelog`](/pages/en/integrations/vitepress-plugin-git-changelog/)），而这些 [Nolebase Integrations](https://nolebase-integrations.ayaka.io) 组件都会自动帮忙配置好依赖解析和依赖打包等复杂操作。如果你想把 `@nolebase/ui` 作为你的依赖项之一来安装并使用，就需要仿照其他 [Nolebase Integrations](https://nolebase-integrations.ayaka.io) 组件，对 Vite 进行配置：
+
+#### 1. 针对 Vite 的额外配置
+
+##### 1.1 对于导入了 `<NuLazyTeleportRiveCanvas />` 组件的用户
+
+由于 `<NuLazyTeleportRiveCanvas />` 底层依赖于 `@rive-app/canvas`，如果您也使用 Vite 作为打包器和开发环境服务器，则需要像这样在 `vite.config.ts` 文件中添加以下配置：
+
+```typescript
+export default defineConfig(() => {
+  return {
+    optimizeDeps: { // [!code ++]
+      include: [ // [!code ++]
+        // 添加这一行到你的 vite.config.ts 的 optimizeDeps.include 数组中 // [!code ++]
+        '@nolebase/ui  @rive-app/canvas', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }
+})
+```
+
+有关为何要这样配置的更多信息，请参阅 [Dep Optimization Options | Vite](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude) 文档。
+
+##### 1.2 针对导入 VitePress 相关组件的用户
+
+如果您使用的是 VitePress，且导入的组件依赖于 VitePress，则需要像这样在 `vite.config.ts` 文件中添加以下配置：
+
+```typescript
+export default defineConfig(() => {
+  return {
+    ssr: { // [!code ++]
+      noExternal: [ // [!code ++]
+        // 添加这一行到你的 vite.config.ts 的 ssr.noExternal 数组中 // [!code ++]
+        '@nolebase/ui', // [!code ++]
+      ], // [!code ++]
+    }, // [!code ++]
+  }
+})
+```
+
+有关为何如此配置的更多信息，请参阅 [Server-Side Rendering | Vite](https://vitejs.dev/guide/ssr.html#ssr-externals) 文档。
+
+:::
+
+### 安装
+
+您可以使用以下命令将 `@nolebase/ui` 安装为 Vue 或 VitePress 项目的依赖项之一：
+
+::: code-group
+
+```shell [pnpm]
+pnpm add @nolebase/ui -D
+```
+
+```shell [npm]
+npm install @nolebase/ui -D
+```
+
+```shell [yarn]
+yarn add @nolebase/ui -D
+```
+
+:::
+
 ## 按钮
 
 <div>