estel_docs/content/blog/1.技术栈/01.index.md

title, description, date, img, navigation

title	description	date	img	navigation
记录技术栈	记录日常开发中遇到的技术问题和解决方案	2025-08-07	https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250806105153532.png	icon lucide-house

博客

使用过市面上的很多文档系统，但是或多或少都有一些自己不满意的功能.
于是自己动手，丰衣足食.
同时在 Markdown 语法的基础上增加了许多魔法(自定义组件),比如:

::code-group

在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
::card
这里是卡片里的内容
::

<!-- Card组件: components/content/Card.vue -->
<template>
  <div class="p-2 border bg-white dark:bg-black dark:border-gray-700 rounded">
    <slot />
  </div>
</template>

:::code-preview{icon="i-lucide-eye" label="Preview"} ::::example-card 这里是卡片里的内容 :::: :::

::

:::UPageCard{icon="lucide-code" title="代码组" description="这个组件使用 自定义的 Markdown 语法,从 Markdown 中提取代码块,并展示在页面上 (而其自身亦是一个卡片组)"}

::code-tree{defaultValue="nuxt.config.ts"}

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
});

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "typecheck": "nuxt typecheck"
  },
  "dependencies": {
    "@iconify-json/lucide": "^1.2.18",
    "@nuxt/ui-pro": "3.0.0-alpha.10",
    "nuxt": "^3.15.1"
  },
  "devDependencies": {
    "typescript": "^5.7.2",
    "vue-tsc": "^2.2.0"
  }
}

{
  "extends": "./.nuxt/tsconfig.json"
}

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],

  future: {
    compatibilityVersion: 4
  },

  css: ['~/assets/main.css']
});

# Nuxt 3 Minimal Starter

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

Start the development server on `http://localhost:3000`:

```bash
# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm run build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm run preview

# yarn
yarn preview

# bun
bun run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

:: :::

::code-group

#### 此组件打开一个模态搜索框,进行搜索
  ::::example-fulltext-content-search
  ::::

#### 此组件建立一个mini搜索框,进行搜索
  ::::example-fulltext-mini-search
  ::::

:::code-preview{label="预览模态组件" icon="i-lucide-eye"} ::::example-fulltext-content-search :::: ::: :::code-preview{label="预览搜索框组件" icon="i-lucide-eye"} ::::example-fulltext-mini-search :::: :::

::

::tip{icon="lucide-info" color="primary" class="text-black dark:text-white"} 阅读更多关于 自定义组件 的内容. ::

特性

• 基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
• 完美支持 Markdown 和 相关扩展。
• 和 Vue 组件高度集成。
• 支持搜索,由Content v3 赋能。
• 支持多主题,使用Nuxt UI Pro。
• 开源且免费。
• 支持移动端。

致谢

• Nuxt Content：为 Vue 开发者简化内容管理。
• Nuxt UI Pro ：文档系统 UI 组件。
• Docus：获取灵感及一些文档组件源代码。

License

MIT