@142vip工程化

切换主题

@142vip/vitepress ​

NPM version

基于 VitePress 框架搭建静态站点的常用工具包，提供 Element Plus 相关组件和主题

安装 ​

须满足 peerDependencies（版本见本包 package.json：vitepress、vue、element-plus、mermaid）。

shell
# npm
npm install @142vip/vitepress

# pnpm
pnpm add @142vip/vitepress

功能 ​

  • ✅ defineVipVitepressConfig：合并默认主题、head、favicon、Vite SSR 配置
  • ✅ 可选 Mermaid 支持（{ mermaid: true }）
  • ✅ getVipThemeConfig / enableVipFooter：导航、社交链接、全局页脚
  • ✅ defineVipExtendsTheme：扩展默认主题；VipMermaid / 首页区块异步加载；EP 由内置组件按需引入
  • ✅ 文档组件：VipMermaid、VipHomePage、VipProjectTable
  • ✅ @142vip/vitepress/workspace：Monorepo package.json 索引工具
  • ✅ TypeDoc 默认配置 getVipTypedocDefaultConfig

配置 ​

.vitepress/config.ts 示例：

ts
import {
  defineVipVitepressConfig,
  enableVipFooter,
  getVipThemeConfig,
} from '@142vip/vitepress'

export default defineVipVitepressConfig({
  title: 'My Docs',
  themeConfig: getVipThemeConfig({
    nav: [{ text: 'Guide', link: '/guide' }],
    ...enableVipFooter({ showBackTop: true }),
  }),
}, { mermaid: true })

.vitepress/theme/index.ts：

ts
import { defineVipExtendsTheme } from '@142vip/vitepress/theme'

export default defineVipExtendsTheme(undefined, {
  homePage: { showTeam: true, showOpenSource: true },
})

使用 ​

Markdown 中使用 Mermaid（已启用时）：

markdown
```mermaid
flowchart LR
  A --> B
```

组件子路径：

ts
import { VipHomePage, VipMermaid } from '@142vip/vitepress/components'

升级 ​

shell
# 依赖更新
pnpm upgrade @142vip/vitepress

参考 ​

证书 ​

MIT

Copyright (c) 2019-present, @142vip 储凡

仅供学习参考，商业使用请保留作者版权信息，作者不保证也不承担任何软件的使用风险。