237 lines
4.1 KiB
Markdown
237 lines
4.1 KiB
Markdown
---
|
||
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 |