230 lines
5.0 KiB
Markdown
230 lines
5.0 KiB
Markdown
---
|
|
title: 入门指南
|
|
description: 欢迎使用简单文档
|
|
navigation:
|
|
icon: lucide-house
|
|
---
|
|
|
|
|
|
::::code-group
|
|
|
|
```bash [pnpm]
|
|
pnpm add @nuxt/ui-pro@next
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @nuxt/ui-pro@next
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @nuxt/ui-pro@next
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add @nuxt/ui-pro@next
|
|
```
|
|
::::
|
|
|
|
|
|
|
|
## Usage
|
|
::note
|
|
You can pass any property from the HTML `<img>` element such as `alt`, `loading`, etc.
|
|
::
|
|
|
|
::stack
|
|
::div{class="p-4 space-x-2"}
|
|
:icon{name="lucide:box" class="size-6"}
|
|
:icon{name="vscode-icons:file-type-js-official" class="size-6"}
|
|
:icon{name="vscode-icons:file-type-vue" class="size-6"}
|
|
:icon{name="vscode-icons:file-type-nuxt" class="size-6"}
|
|
::
|
|
|
|
```mdc
|
|
:icon{name="lucide:box"}
|
|
:icon{name="vscode-icons:file-type-js-official"}
|
|
:icon{name="vscode-icons:file-type-vue"}
|
|
:icon{name="vscode-icons:file-type-nuxt" :size="30"}
|
|
```
|
|
::
|
|
|
|
::ETabs
|
|
::div{label="PostgreSQL" icon="lucide:database"}
|
|
### PostgreSQL column types
|
|
|
|
```ts
|
|
import { integer, pgTable } from 'drizzle-orm/pg-core';
|
|
|
|
export const table = pgTable('table', {
|
|
int: integer('int')
|
|
});
|
|
```
|
|
::
|
|
::div{label="MySQL"}
|
|
### MySQL column types
|
|
|
|
```ts
|
|
import { int, mysqlTable } from 'drizzle-orm/mysql-core';
|
|
|
|
const table = mysqlTable('table', {
|
|
int: int('int')
|
|
});
|
|
```
|
|
::
|
|
::div{label="SQLite"}
|
|
### SQLite column types
|
|
|
|
```ts
|
|
import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';
|
|
|
|
const table = sqliteTable('table', {
|
|
id: integer('id')
|
|
});
|
|
|
|
// you can customize integer mode to be number, boolean, timestamp, timestamp_ms
|
|
integer('id', { mode: 'number' });
|
|
integer('id', { mode: 'boolean' });
|
|
integer('id', { mode: 'timestamp_ms' });
|
|
integer('id', { mode: 'timestamp' }); // Date
|
|
```
|
|
::
|
|
::
|
|
|
|
|
|
|
|
|
|
::ECard
|
|
---
|
|
img: https://lijue-me.oss-cn-chengdu.aliyuncs.com/20250727184358217.png
|
|
icon: simple-icons-tailwindcss
|
|
spotlight: true
|
|
title: Image Card
|
|
description: Beautifully designed **Nuxt Content** template with **shadcn-vue**. _Customizable. Compatible. Open Source._
|
|
---
|
|
#content
|
|
wow
|
|
|
|
::
|
|
|
|
|
|
::button-link{icon="lucide:arrow-up-right" variant="outline" to="/getting-started" target="_blank" size="md"}
|
|
Get Started
|
|
::
|
|
|
|
::button-link{trailing-icon="lucide:github" variant="outline" to="https://github.com/ZTL-UwU/shadcn-docs-nuxt" target="_blank"}
|
|
GitHub
|
|
::
|
|
|
|
::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/ZTL-UwU/shadcn-docs-nuxt" blank}
|
|
Ghost
|
|
::
|
|
|
|
|
|
::FileTree
|
|
---
|
|
title: File Tree
|
|
icon: lucide:folder-tree
|
|
tree:
|
|
- app:
|
|
- components:
|
|
- Header.vue
|
|
- Footer.vue
|
|
- composables:
|
|
- useErrorHandler.ts
|
|
- app.vue # This is highlighted
|
|
- docs:
|
|
- ^index.md^
|
|
---
|
|
::
|
|
|
|
::steps{level="4"}
|
|
#### Start a fresh new project
|
|
|
|
```bash [Terminal]
|
|
npx nuxi init -t github:nuxt-ui-pro/docus
|
|
```
|
|
|
|
#### Run docus CLI to run your dev server
|
|
|
|
```bash [Terminal]
|
|
docus dev
|
|
```
|
|
::
|
|
|
|
|
|
::card-group
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt
|
|
to: https://nuxt.com
|
|
---
|
|
The Nuxt website
|
|
:::
|
|
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt UI
|
|
to: https://ui.nuxt.com
|
|
---
|
|
The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
|
|
:::
|
|
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt Image
|
|
to: https://image.nuxt.com
|
|
---
|
|
The documentation of `@nuxt/image`
|
|
:::
|
|
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt Content
|
|
to: https://content.nuxt.com
|
|
---
|
|
The documentation of `@nuxt/content`
|
|
:::
|
|
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt Devtools
|
|
to: https://devtools.nuxt.com
|
|
---
|
|
The documentation of `@nuxt/devtools`
|
|
:::
|
|
|
|
:::card
|
|
---
|
|
icon: simple-icons-nuxtdotjs
|
|
target: _blank
|
|
title: Nuxt Hub
|
|
to: https://hub.nuxt.com
|
|
---
|
|
The best place to manage your projects, environments and variables.
|
|
:::
|
|
::
|
|
|
|
## Key Features
|
|
|
|
This template includes a range of features designed to streamline documentation management:
|
|
|
|
- **Powered by** [**Nuxt 3**](https://nuxt.com): Utilizes the latest Nuxt framework for optimal performance.
|
|
- **Built with** [**Nuxt UI**](https://ui.nuxt.com) **and** [**Nuxt UI Pro**](https://ui.nuxt.com/pro): Integrates a comprehensive suite of UI components.
|
|
- [**MDC Syntax**](https://content.nuxt.com/usage/markdown) **via** [**Nuxt Content**](https://content.nuxt.com): Supports Markdown with component integration for dynamic content.
|
|
- [**Nuxt Studio**](https://content.nuxt.com/docs/studio) **Compatible**: Offers integration with Nuxt Studio for content editing.
|
|
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
|
|
- **Full-Text Search**: Includes built-in search functionality for content discovery.
|
|
- **Optimized Typography**: Features refined typography for enhanced readability.
|
|
- **Dark Mode**: Offers dark mode support for user preference.
|
|
- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.
|