快速开始

本指南将帮助你在 Vue 3 项目中开始使用 Plaud UI Components。

安装

pnpm

pnpm add @plaud/ui-components

npm

npm install @plaud/ui-components

使用方式

完整引入

一次性引入所有组件：

import { createApp } from 'vue';
import App from './App.vue';
import PlaudUI from '@plaud/ui-components';
import '@plaud/ui-components/style.css';

const app = createApp(App);
app.use(PlaudUI);
app.mount('#app');

按需引入

只引入需要的组件：

import { Button } from '@plaud/ui-components';
import '@plaud/ui-components/style.css';

// 在你的组件中
export default {
  components: {
    Button,
  },
};

TSX 用法

import { defineComponent } from 'vue';
import { Button } from '@plaud/ui-components';

export default defineComponent({
  setup() {
    const handleClick = () => {
      console.log('按钮被点击了！');
    };

    return () => <Button onClick={handleClick}>点击我</Button>;
  },
});

TypeScript 支持

本库使用 TypeScript 编写，提供完整的类型定义。无需额外的类型包。

import type { ButtonProps } from '@plaud/ui-components';

const props: ButtonProps = {
  type: 'primary',
  size: 'large',
};

下一步

• 浏览组件文档
• 查看 Button API 文档