安装

Vue 3

npm i @chufix-design/vue

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import '@chufix-design/vue/style.css';

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

<script setup lang="ts">
import { CfButton } from '@chufix-design/vue';
</script>

<template>
  <CfButton>Hello ChuFix</CfButton>
</template>

React

npm i @chufix-design/react

// main.tsx
import '@chufix-design/react/style.css';

import { CfButton } from '@chufix-design/react';

export default () => <CfButton>Hello ChuFix</CfButton>;

源码拷贝模式

如果你想完全控制组件源码：

npx chufix add button

执行后 ChuFix 会把 button/Button.vue（或 Button.tsx）+ 对应的 button.css 直接放进你项目里指定的目录，之后改成什么样都随你。

Tailwind CSS（可选）

// tailwind.config.ts
import preset from '@chufix-design/tokens/tailwind';

export default {
  presets: [preset],
  content: ['./src/**/*.{vue,tsx,ts,html}'],
};

之后即可 <div class="bg-chufix-primary text-chufix-primary-fg" /> 这样使用。