---
title: "介绍"
description: "了解 Movk Nuxt 的核心特性、双模式（Nuxt / Vue + Vite）与分层架构，从安装到上手 AutoForm、DataTable、API System 和独立组件。"
seo_title: "Introduction"
seo_description: "Movk Nuxt is a UI engineering suite built on Nuxt UI — schema-driven AutoForm (Zod v4), a typed DataTable, standalone UI components and composables. Full capabilities (incl. API integration with auth and progress) in Nuxt 4, plus a Vite plugin to use its UI, forms, tables and theming in plain Vue + Vite (the API domain is Nuxt-only)."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/getting-started"
---
# 介绍

> 了解 Movk Nuxt 的核心特性、双模式（Nuxt / Vue + Vite）与分层架构，从安装到上手 AutoForm、DataTable、API System 和独立组件。

## 介绍

Movk Nuxt 是一套**构建在 [Nuxt UI](https://ui.nuxt.com){rel="[\"nofollow\"]"} 之上的 UI 工程套件**，采用**分层架构**，通过高度抽象的自动化系统（如 AutoForm、API System）解决重复性工作，同时提供高质量的独立组件和组合式函数以满足定制化需求。它遵循 Nuxt UI 相同的设计原则：美观、可访问、开发者友好。

它提供**两种使用方式**：

- **Nuxt 4** —— 获得包括 API 集成（认证、进度追踪）在内的完整能力。
- **纯 Vue + Vite** —— 经 `@movk/nuxt/vite` \+ `@movk/nuxt/vue-plugin`，使用其 UI 层：独立组件、AutoForm、DataTable、主题与非服务端 Composables。**API 集成域依赖 Nuxt 服务端运行时，仅 Nuxt 模式可用。**

> \[\!NOTE\]
> 
> 遵循
> 
> 渐进式采用
> 
> 原则——你可以只用它的日期处理工具或 UI 组件，使用全自动化的 
> 
> AutoForm
> 
> ，在 Nuxt 中接入 
> 
> API System
> 
> ，或在纯 Vue + Vite 项目中引入其 UI 层（详见 
> 
> Vue / Vite
> 
> ）。

## 核心特性

**Schema 驱动表单 · Nuxt / Vue+Vite**

AutoForm

 通过 Zod Schema 自动生成完整表单界面，一份 Schema 同时定义数据结构、验证规则与 UI 配置。

**类型安全表格 · Nuxt / Vue+Vite**

DataTable

 提供数据/选择/索引/展开/操作等列类型，支持排序、列锁定、树形数据、分页与加载更多。

**独立组件与工具 · Nuxt / Vue+Vite**

DatePicker

、

SearchForm

、

ColorChooser

、

Tree

 等组件与 

useDateFormatter

、

useTheme

、

useMessageBox

 等 composables，均可独立使用。

**API 集成系统 · 仅 Nuxt**

useApiFetch

 系列封装多端点、自动认证、业务状态码检查与 Toast 提示，并提供带进度的上传/下载（依赖 Nuxt 服务端运行时）。

## 架构分层

Movk Nuxt 采用清晰的分层架构：

> \[\!NOTE\]
> 
> **架构层级**
> 
> - **Core Systems** \- AutoForm（Schema 驱动表单）、DataTable（类型安全表格）
> - **API System** \- useApiFetch、useLazyApiFetch、useClientApiFetch、useUploadWithProgress、useDownloadWithProgress
> - **Standalone Components** \- DatePicker、SearchForm、ColorChooser、SlideVerify、PillGroup、输入增强组件等
> - **Composables** \- useDateFormatter、useAutoForm、useTheme、useMessageBox 等通用组合式函数
> - **Vite/Vue 兼容层** \- `@movk/nuxt/vite` \+ `@movk/nuxt/vue-plugin`，让上述 UI 层（Core Systems、Standalone Components、非服务端 Composables）在纯 Vue + Vite 可用（不含 API System）
> - **Foundation** \- 基于 [Nuxt UI](https://ui.nuxt.com){rel="[\"nofollow\"]"}、[Zod v4](https://zod.dev){rel="[\"nofollow\"]"}、[VueUse](https://vueuse.org){rel="[\"nofollow\"]"}

## 核心模块

### AutoForm - Schema 驱动的表单系统

基于 Zod Schema 的「定义即渲染」表单解决方案，支持多种控件类型、布局系统、依赖联动等高级特性。

> \[\!TIP\]
> See: /docs/auto-form
> 
> 深入了解 AutoForm 的核心概念和使用方法

### DataTable - 类型安全的数据表格

基于 `@tanstack/vue-table` 的声明式列配置表格，支持数据/选择/索引/展开/操作等列类型，以及排序、列锁定、拖拽列宽、树形数据、分页与加载更多。

> \[\!TIP\]
> See: /docs/data-table
> 
> 了解 DataTable 的列配置与高级特性

### API System - 统一的请求与认证

提供完整的 API 请求方案：

- `useApiFetch` \- 基于 useFetch 封装，支持自动认证、业务状态码检查、Toast 提示
- `useUploadWithProgress` / `useDownloadWithProgress` \- 带进度监控的文件上传下载

> \[\!TIP\]
> See: /docs/api
> 
> 了解 API System 的使用方法

### 独立组件 - 开箱即用

无需依赖 AutoForm，可直接使用的高质量 UI 组件：

- `DatePicker` \- 基于国际化标准的日期选择器（单选/范围/多选）
- `WithCopy` / `WithClear` / `WithPasswordToggle` \- 输入增强组件
- `SlideVerify` / `ColorChooser` \- 交互组件

> \[\!TIP\]
> See: /docs/components/as-phone-number-input
> 
> 浏览所有可用组件

### 通用工具函数

- `useDateFormatter` \- 日期格式化、解析、范围处理工具
- `useAutoForm` \- AutoForm 的核心逻辑封装
- `useTheme` \- 主题状态读写与 CSS/配置导出
- `useMessageBox` \- 命令式 alert / confirm 弹窗

> \[\!TIP\]
> See: /docs/composables/use-auto-form
> 
> 查看所有 Composables


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.