diff --git a/apps/vitepress-demo/.vitepress/config.ts b/apps/vitepress-demo/.vitepress/config.ts
new file mode 100644
index 0000000..37d984e
--- /dev/null
+++ b/apps/vitepress-demo/.vitepress/config.ts
@@ -0,0 +1,145 @@
+import path from 'node:path'
+import { defineConfig } from 'vitepress'
+import { getThemeConfig, getVipFooter, zhSearch } from '@142vip/vitepress'
+import { OPEN_SOURCE_ADDRESS, getDocSiteBase } from '@142vip/utils'
+import type { DefaultTheme } from 'vitepress/types/default-theme'
+import { name as pkgName, version as pkgVersion } from '../package.json'
+
+/**
+ * 导航栏
+ */
+const navbarConfig: DefaultTheme.NavItem[] = [
+  { text: '🔥 首页', link: '/docs/index.md' },
+  {
+    text: '💻 示例文档',
+    items: [
+      { text: '👩🏻‍💻 示例文档-1', link: '/docs/example/test-1.md' },
+      { text: '👨🏻‍💻 示例文档-2', link: '/docs/example/test-2.md' },
+      { text: '👨🏻 示例文档-3', link: '/docs/example/test-3.md' },
+    ],
+  },
+  {
+    text: `⚡ ${pkgVersion}`,
+    items: [
+      { text: '🎉 历史版本', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/releases` },
+      { text: '📄 更新日志', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/blob/main/CHANGELOG.md` },
+      {
+        text: '开源博客',
+        items: [
+          { text: '🤡 408CSFamily', link: 'https://142vip-cn.feishu.cn/share/base/view/shrcnuuRDWBoHLmYaknXWFuhR4d' },
+          { text: '📘 JavaScriptCollection', link: 'https://142vip.github.io/JavaScriptCollection/' },
+        ],
+      },
+    ],
+  },
+]
+
+/**
+ * 侧边栏
+ */
+const sidebarConfig: DefaultTheme.SidebarItem[] = [
+  {
+    text: '示例文档',
+    collapsed: false,
+    items: [
+      { text: '示例文档-1', link: '/docs/example/test-1.md' },
+      { text: '示例文档-2', link: '/docs/example/test-2.md' },
+      { text: '示例文档-3', link: '/docs/example/test-3.md' },
+    ],
+  },
+]
+
+/**
+ * 所有配置
+ */
+export default defineConfig({
+  base: getDocSiteBase('core-x'),
+  lang: 'zh-CN',
+  title: '@142vip/vitepress-demo',
+  titleTemplate: ':title - @142vip/core-x',
+  description: '@142vip/vitepress包的使用Demo演示',
+  srcDir: './',
+  // 排除部分
+  srcExclude: [
+  ],
+  // 编译输出目录
+  outDir: './dist',
+  // dev 模式下的缓存目录，默认cache
+  cacheDir: './.vitepress/.vite',
+  assetsDir: 'static',
+  metaChunk: true,
+  head: [
+    ['meta', { name: 'theme-color', content: '#3c8772' }],
+    ['meta', { property: 'og:url', content: 'https://github.com/142vip/core-x' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+    ['meta', { property: 'og:title', content: '@142vip/core-x' }],
+    ['meta', { property: 'og:description', content: `${pkgName} - @142vip/vitepress-demo演示项目` }],
+  ],
+  // markdown
+  markdown: {
+    theme: {
+      dark: 'dracula-soft',
+      light: 'vitesse-light',
+    },
+    attrs: {
+      leftDelimiter: '%{',
+      rightDelimiter: '}%',
+    },
+
+  },
+  // 配置主题
+  ...getThemeConfig({
+    // 导航栏
+    nav: navbarConfig,
+    sidebar: {
+      '/': sidebarConfig,
+    },
+    // 页脚
+    footer: getVipFooter({
+      license: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X,
+      pkgName,
+      pkgVersion,
+      orgLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_VIP,
+      ownerLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_MMDAPL,
+    }),
+
+    // 搜索
+    search: {
+      provider: 'algolia',
+      options: {
+        appId: '69JA242WYX',
+        apiKey: 'dec73bdf3277684a92aaa734e3b776c0',
+        indexName: 'core-x',
+        locales: {
+          // 支持中文搜索
+          ...zhSearch,
+        },
+      },
+    },
+    // 一些链接
+    socialLinks: [
+      { icon: 'github', link: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X },
+      { icon: 'npm', link: 'https://www.npmjs.com/~mmdapl' },
+    ],
+    // 编辑链接
+    editLink: {
+      pattern: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/edit/next/:path`,
+      text: '在 Github 上对本页提出修改建议',
+    },
+  }),
+  // 路径重写
+  rewrites: {
+    'CHANGELOG.md': 'changelog.md',
+    'README.md': 'index.md',
+  },
+  // 编译时路径别名
+  vite: {
+    resolve: {
+      alias: {
+        '@packages': path.resolve(__dirname, '../packages'),
+      },
+    },
+    plugins: [
+    ],
+  },
+})
diff --git a/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue b/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue
new file mode 100644
index 0000000..2daf09f
--- /dev/null
+++ b/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import { defineComponent, onMounted, ref } from 'vue'
+import {
+  VipBackTop,
+  VipContactAuthor,
+  VipProjectTable,
+  VipTeam,
+} from '@142vip/vitepress/components'
+import { useData } from 'vitepress'
+import { ElImage } from 'element-plus'
+
+const { isDark } = useData()
+const tableData = ref<any[]>([])
+
+defineComponent({
+  components: {
+    ElImage,
+  },
+})
+
+/**
+ * 异步加载表格数据
+ */
+onMounted(async () => {
+  tableData.value = []
+})
+</script>
+
+<!-- 首页 -->
+<template>
+  <section id="version-table">
+    <VipProjectTable :data="tableData" title="开源" />
+  </section>
+
+  <VipTeam />
+
+  <section id="sponsors">
+    <h2>赞赏列表</h2>
+    <blockquote>
+      排名不分先后， <strong>赞赏过的一定要微信跟我说呀！！！！！！</strong>
+    </blockquote>
+    <div>
+      <a href="https://github.com/ChiefPing" target="_blank">
+        <img
+          alt="ChiefPing"
+          class="image-border"
+          src="https://avatars2.githubusercontent.com/u/34122068?s=460&v=4"
+          title="ChiefPing"
+        >
+      </a>
+      <a href="https://github.com/xiaoliuxin" target="_blank">
+        <img
+          alt="xiaoliuxin"
+          class="image-border"
+          src="https://avatars2.githubusercontent.com/u/60652527?s=460&v=4"
+          title="xiaoliuxin"
+        >
+      </a>
+    </div>
+    <h2>赞助商</h2>
+    <blockquote>
+      以下排名不分先后! 还木有收到赞助，哈哈哈，先留坑
+    </blockquote>
+  </section>
+
+  <section id="contributions">
+    <h2>贡献</h2>
+
+    <blockquote>
+      感谢所有参与仓库建设的开发者
+    </blockquote>
+
+    <a href="https://github.com/142vip/core-x/graphs/contributors">
+      <img
+        alt="感谢向仓库提交PR的所有开发者"
+        src="https://contrib.rocks/image?repo=142vip/core-x"
+        title="@142vip/core-x"
+      >
+    </a>
+  </section>
+
+  <section id="trending">
+    <h2>趋势</h2>
+    <!-- 支持黑色主题 -->
+    <div class="star-history">
+      <ElImage
+        :src="`https://api.star-history.com/svg?repos=142vip/core-x,142vip/408CSFamily,142vip/JavaScriptCollection&type=Date${
+          isDark ? '&theme=dark' : ''
+        }`"
+        alt="Github Star History"
+        class="img-border"
+        title="Github Star History"
+      />
+    </div>
+  </section>
+
+  <section id="contact-author">
+    <VipContactAuthor />
+  </section>
+  <VipBackTop />
+</template>
+
+<style scoped>
+#trending {
+  .img-border {
+    border-radius: 5px;
+  }
+}
+
+#sponsors {
+  div {
+    display: flex;
+    justify-content: left;
+  }
+  .image-border {
+    border-radius: 5px;
+    width: 50px;
+  }
+  a {
+    margin: 5px;
+  }
+}
+
+.star-history {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+</style>
diff --git a/apps/vitepress-demo/.vitepress/theme/index.ts b/apps/vitepress-demo/.vitepress/theme/index.ts
new file mode 100644
index 0000000..627251b
--- /dev/null
+++ b/apps/vitepress-demo/.vitepress/theme/index.ts
@@ -0,0 +1,24 @@
+import { h } from 'vue'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+import type { Theme } from 'vitepress'
+import { VipBackTop } from '@142vip/vitepress/components'
+// 导入 element-plus样式
+// import 'element-plus/dist/index.css'
+
+/**
+ * 自定义主题
+ * 参考： https://vitepress.dev/guide/custom-theme
+ */
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      'doc-bottom': () => h(VipBackTop),
+    })
+  },
+  // todo 查看这里的app、router、siteData的作用
+  enhanceApp() {
+  },
+} satisfies Theme
diff --git a/apps/vitepress-demo/.vitepress/theme/style.css b/apps/vitepress-demo/.vitepress/theme/style.css
new file mode 100644
index 0000000..30d648b
--- /dev/null
+++ b/apps/vitepress-demo/.vitepress/theme/style.css
@@ -0,0 +1,130 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
diff --git a/apps/vitepress-demo/CHANGELOG.md b/apps/vitepress-demo/CHANGELOG.md
new file mode 100644
index 0000000..9786d45
--- /dev/null
+++ b/apps/vitepress-demo/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
+
+<!-- #region recent-alpha -->
+
+
+
+<!-- #endregion recent-alpha -->
diff --git a/apps/vitepress-demo/README.md b/apps/vitepress-demo/README.md
new file mode 100644
index 0000000..37908bc
--- /dev/null
+++ b/apps/vitepress-demo/README.md
@@ -0,0 +1,23 @@
+# vitepress-demo
+
+## 介绍
+
+```bash
+# 在项目根目录下载依赖
+pnpm i
+
+# 切换到vuepress-demo根目录
+cd apps/viteperss-demo
+
+# 本地启动
+pnpm dev
+
+# 本地编译
+pnpm build
+```
+
+## 证书
+
+[MIT](https://opensource.org/license/MIT)
+
+Copyright (c) 2019-present, 142vip 储凡
diff --git a/apps/vitepress-demo/docs/example/test-1.md b/apps/vitepress-demo/docs/example/test-1.md
new file mode 100644
index 0000000..f324fcc
--- /dev/null
+++ b/apps/vitepress-demo/docs/example/test-1.md
@@ -0,0 +1,3 @@
+# 示例文档-1
+
+这里是`示例文档-1`，内容随便写写
diff --git a/apps/vitepress-demo/docs/example/test-2.md b/apps/vitepress-demo/docs/example/test-2.md
new file mode 100644
index 0000000..e97a315
--- /dev/null
+++ b/apps/vitepress-demo/docs/example/test-2.md
@@ -0,0 +1,3 @@
+# 示例文档-2
+
+这里是`示例文档-2`，内容随便写写
diff --git a/apps/vitepress-demo/docs/example/test-3.md b/apps/vitepress-demo/docs/example/test-3.md
new file mode 100644
index 0000000..3a458c5
--- /dev/null
+++ b/apps/vitepress-demo/docs/example/test-3.md
@@ -0,0 +1,3 @@
+# 示例文档-3
+
+这里是`示例文档-3`，内容随便写写
diff --git a/apps/vitepress-demo/docs/index.md b/apps/vitepress-demo/docs/index.md
new file mode 100644
index 0000000..9753f95
--- /dev/null
+++ b/apps/vitepress-demo/docs/index.md
@@ -0,0 +1,35 @@
+---
+layout: home
+
+hero:
+  name: "@142vip/core-x"
+  text: "X代表一切都有可能"
+  tagline: "易学易用、性能出色，适用工程化的通用工具包"
+  actions:
+    - theme: brand
+      text: 快速开始 🚀
+      link: /packages/fairy-cli/index.html
+    - theme: alt
+      text: 🤡 408CSFamily
+      link: https://github.com/142vip/408CSFamily
+    - theme: alt
+      text: 📘 JavaScriptCollection
+      link: https://github.com/142vip/JavaScriptCollection
+# 功能页
+features:
+  - title: 易学易用
+    details: 文档丰富、提供完整、丰富的入门方案
+    icon: 🛡️
+  - title: 性能出色
+    details: 类型安全、基于TS编码的工具包
+    icon: 🚀
+  - title: 通用工具包
+    details: 适用工程化，可服用在各类项目中，支持Monorepo架构
+    icon: 🧰
+---
+
+<script setup>
+import HomePage from '@theme/components/HomePage.vue'
+</script>
+
+<HomePage/>
diff --git a/apps/vitepress-demo/package.json b/apps/vitepress-demo/package.json
new file mode 100644
index 0000000..254c284
--- /dev/null
+++ b/apps/vitepress-demo/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "vitepress-demo",
+  "type": "module",
+  "version": "0.0.1-alpha.0",
+  "private": true,
+  "packageManager": "pnpm@9.6.0",
+  "description": "@142vip/vitepress包的使用Demo演示",
+  "scripts": {
+    "dev": "npx vitepress dev --port 3080 --host --force --strictPort",
+    "build": "npx vitepress build --minify && pnpm build:proxy",
+    "build:proxy": "NEED_PROXY=true vitepress build --minify"
+  },
+  "devDependencies": {
+    "@142vip/utils": "workspace:*",
+    "@142vip/vitepress": "workspace:*"
+  }
+}
diff --git a/apps/vitepress-demo/tsconfig.json b/apps/vitepress-demo/tsconfig.json
new file mode 100644
index 0000000..ebc52d5
--- /dev/null
+++ b/apps/vitepress-demo/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "compileOnSave": true,
+  "compilerOptions": {
+    "target": "es2018",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "paths": {
+      "@theme/*": [
+        ".vitepress/theme/*"
+      ],
+      "@packages/*": [
+        "packages/*"
+      ]
+    },
+    "typeRoots": [
+      "./typings",
+      "./node_modules/@types"
+    ],
+    "strictNullChecks": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "inlineSourceMap": true,
+    "stripInternal": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "pretty": true
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "test"
+  ]
+}
diff --git a/package.json b/package.json
index 644ecdc..8842d57 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "build:packages": "npx turbo run build --filter @142vip/* --color --only",
     "build:docs": "vitepress build --minify",
     "build:docs-proxy": "NEED_PROXY=true vitepress build",
-    "build": "pnpm build:packages && pnpm build:docs && pnpm build:docs-proxy",
+    "build": "pnpm build:packages && pnpm build:apps && pnpm build:docs && pnpm build:docs-proxy",
     "preview:docs": "pnpm build:docs && npx vitepress preview --port 8081",
     "preview:docs-proxy": "pnpm build:docs-proxy && npx vitepress preview --port 8082 --base '/core-x'",
     "lint": "npx fa lint",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c8ecec..a0e2351 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,6 +64,15 @@ importers:
 
   apps/nest-demo: {}
 
+  apps/vitepress-demo:
+    devDependencies:
+      '@142vip/utils':
+        specifier: workspace:*
+        version: link:../../packages/utils
+      '@142vip/vitepress':
+        specifier: workspace:*
+        version: link:../../packages/vitepress
+
   apps/vuepress-demo:
     devDependencies:
       '@142vip/utils':