快速开始

X-Next 是一套 Vue 3 UI 组件库。当前文档站使用源码包直接渲染示例，方便开发时同步验证组件表现。

安装

pnpm add x-next

完整引入

import { createApp } from 'vue';
import XNext from 'x-next';
import 'x-next/dist/style.css';
import App from './App.vue';

const app = createApp(App);

app.use(XNext);
app.mount('#app');

按需引入

在 Vue SFC 的 <script setup> 中导入组件后，模板使用对应的局部名称。下面的例子不需要 app.use(XNext)；构建工具会按实际使用裁剪组件代码。

<script setup lang="ts">
import { ref } from 'vue';
import { Button } from 'x-next';
import 'x-next/style/base.css';
import 'x-next/style/button.css';

const count = ref(0);
</script>

<template>
  <Button type="primary" @click="count++">已点击 {{ count }} 次</Button>
</template>

如果希望使用全局 <x-button> 标签，需要显式安装单个组件：

import { createApp } from 'vue';
import { Button } from 'x-next';
import 'x-next/style/base.css';
import 'x-next/style/button.css';
import App from './App.vue';

createApp(App).use(Button).mount('#app');

局部导入名称与全局标签是两种用法；仅写 import { Button } 不会自动全局注册 <x-button>。

样式侧可按组件或完整包引入，按项目需要选择其一。

方式一：按组件引入样式（推荐）

每个组件都有独立样式，再引入一次共享基础层。基础层包含主题 token、动画、图标和内部共享组件样式，多个组件共用同一份，打包器会去重：

import { Button, Input } from 'x-next';
import 'x-next/style/base.css';
import 'x-next/style/button.css';
import 'x-next/style/form-input.css';

也可以直接引入样式入口模块，由它同时带上基础层：

import 'x-next/style/button';

只使用少量组件时，这种方式的样式体积明显小于整包。

方式二：引入完整样式

引入整包样式，适合组件使用范围很广、或先跑通功能再优化的场景：

import { Button } from 'x-next';
import 'x-next/dist/style.css';

体积参考

引入方式	CSS 体积（gzip）
x-next/dist/style.css 整包	约 55.8 KiB
base.css + button.css	约 22.6 KiB

以上为 1.2.0 构建的 gzip 参考值；实际产物随组件与主题变化，使用 pnpm run check:bundle-size 查看当前结果。

完整引入或 app.use(Button) 注册后，模板可以使用全局标签：

<template>
  <x-button type="primary">提交</x-button>
</template>

本地文档开发

pnpm run docs:dev

构建文档

pnpm run docs:build