使用 pnpm 安装
pnpm add @whouu/geist-design使用 npm 安装
npm install @whouu/geist-design使用 yarn 安装
yarn add @whouu/geist-design在 main.ts 中引入下面内容
import { createApp } from 'vue'
import App from './App.vue'
import GeistDesign from '@whouu/geist-design'
import '@whouu/geist-design/dist/index.css'
createApp(App).use(GeistDesign).mount('#app')<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@whouu/geist-design/dist/index.css"
/>
</head>
<body>
<div id="app">
<g-button auto>欢迎使用 Geist Design！</g-button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@whouu/geist-design/dist/index.umd.js"></script>
<script>
const { createApp } = Vue
const app = createApp()
app.use(GeistDesign.default)
app.mount('#app')
</script>
</body>- 通用
- 按钮 Button
- 代码 Code
- 图标 Icons
- 布局
- 占位符 Spacer
- 栅格 Grid
- 布局 Layout
- 容器
- 卡片 Card
- 控件组 Fieldset
- 折叠框 Collapse
- 表单
- 输入框 Input
- 文本输入框 Textarea
- 滑块 Slider
- 开关 Toggle
- 多选框 Checkbox
- 单选框 Radio
- 下拉框 Select
- 数据展示
- 头像 Avatar
- 徽章 Badge
- 描述 Description
- 陈列框 Display
- 点 Dot
- 键盘 Keyboard
- 标签 Tag
- 用户 User
- 图片 Image
- 下拉菜单 Popover
- 提示框 Tooltip
- 表格 Table
- 反馈
- 通知 Toast
- 提示 Note
- 评级 Rate
- 指示器 Spinner
- 进度条 Progress
- 更多 More
- 对话框 Dialog
- 导航
- 链接 Link
- 选项卡 Tabs
- 其他
- 片段 Snippet