---
title: 入门简介
description: Estel Docs 是一个基于 Nuxt 4 , Content v3 , Nuxt UI Pro 构建的文档系统。
navigation:
  icon: lucide-house
---

## 缘起

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


::code-group
```mdc [index.md]
在 Markdown 中使用::card 标签,即可创建一个卡片,卡片里可以放置任何内容。比如以下内容:
::card
这里是卡片里的内容
::
```

```html [Card.vue]
<!-- 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"}

```css [app/assets/main.css]
@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";
```

```ts [app/app.config.ts]
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'sky',
      colors: 'slate'
    }
  }
});
```

```vue [app/app.vue]
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
```

```json [package.json]
{
  "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"
  }
}
```

```json [tsconfig.json]
{
  "extends": "./.nuxt/tsconfig.json"
}
```

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

  future: {
    compatibilityVersion: 4
  },

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

````md [README.md]
# 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
```md [搜索.md]
#### 此组件打开一个模态搜索框,进行搜索
  ::::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"}
阅读更多关于 [`自定义组件`](/docs/简单文档/components/api) 的内容.
::


## 特性

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

## 致谢

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

## License

MIT