快速开始

欢迎使用 Ghuo Design！本指南将帮助您快速上手我们的 Vue 3 组件库。

安装

使用 npm

npm install ghuo-design

使用 yarn

yarn add ghuo-design

使用 pnpm

pnpm add ghuo-design

快速上手

1. 引入 Ghuo Design

在您的 main.js 文件中：

import { createApp } from 'vue'
import GhuoDesign from 'ghuo-design'
import 'ghuo-design/dist/ghuo-design.css'
import App from './App.vue'

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

2. 使用组件

现在您可以在 Vue 模板中使用 Ghuo Design 组件：

<template>
  <div>
    <g-button type="primary">主要按钮</g-button>
    <g-input placeholder="请输入内容" />
  </div>
</template>

按需引入

为了减少打包体积，您可以按需引入组件：

使用 babel-plugin-import

1. 安装插件：

npm install babel-plugin-import -D

2. 配置 babel.config.js：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'ghuo-design',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
}

3. 引入组件：

import { Button, Input } from 'ghuo-design'

手动引入

import Button from 'ghuo-design/es/button'
import 'ghuo-design/es/button/style'

TypeScript 支持

Ghuo Design 使用 TypeScript 编写，提供完整的类型定义：

import { Button, Input } from 'ghuo-design'
import type { ButtonProps, InputProps } from 'ghuo-design'

浏览器支持

Ghuo Design 支持所有现代浏览器：

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

开发环境搭建

如果您想为 Ghuo Design 贡献代码或在本地运行：

前置要求

• Node.js >= 16
• npm >= 7 或 yarn >= 1.22

克隆和安装

git clone https://github.com/ghuo-design/ghuo-design.git
cd ghuo-design
npm install

开发命令

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 运行测试
npm run test

# 运行代码检查
npm run lint

下一步

• 探索我们的组件库
• 了解主题定制
• 查看设计指南
• 加入我们的社区

需要帮助？

• 查看我们的常见问题
• 浏览 GitHub Issues
• 加入我们的Discord 社区
• 发送邮件至 support@ghuo.cn

祝您使用 Ghuo Design 开发愉快！🎉