Fyoimiya UI

Appearance

Quick Start 快速开始 ​

本节将介绍如何在项目中使用 Fyoimiya UI。

安装 ​

推荐使用包管理器进行安装。

NPM ​

bash
npm install @fyoimiya-ui/components

Yarn ​

bash
yarn add @fyoimiya-ui/components

PNPM ​

bash
pnpm add @fyoimiya-ui/components

引入 ​

完整引入 ​

如果你对打包后的文件大小不是很在乎，可以进行完整引入。

typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import FyoimiyaUI from '@fyoimiya-ui/components'
import '@fyoimiya-ui/theme-chalk/dist/index.css'

const app = createApp(App)

app.use(FyoimiyaUI)
app.mount('#app')

按需引入 ​

你也可以只引入需要的组件。

typescript
import { createApp } from 'vue'
import App from './App.vue'
import { FyoButton, FyoInput } from '@fyoimiya-ui/components'
import '@fyoimiya-ui/theme-chalk/dist/index.css'

const app = createApp(App)

app.use(FyoButton)
app.use(FyoInput)
app.mount('#app')

全局配置 ​

在引入 Fyoimiya UI 时，可以传入一个全局配置对象。该对象目前支持 size 和 zIndex 字段。 size 用于设置表单组件的默认尺寸，zIndex 用于设置弹框组件的初始 z-index。

typescript
app.use(FyoimiyaUI, {
  size: 'small',
  zIndex: 3000
})

开始使用 ​

至此，你已经可以在项目中使用 Fyoimiya UI 的组件了。各个组件的使用方法请参考组件文档。

vue
<template>
  <fyo-button>Default Button</fyo-button>
  <fyo-button type="primary">Primary Button</fyo-button>
</template>