npm i peas-ui

// main.ts
import { createApp } from 'vue'
import PeasUI from 'peas-ui'
import "../node_modules/peas-ui/style.css"; //引入组件样式
import App from './App.vue'

const app = createApp(App)

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

<template>
   <pe-button type="primary">primary</pe-button>
</template>

<template>
  <pe-scrollbar height="200px">
    <div style="height: 500px;background-color: #cccccc;"></div>
  </pe-scrollbar>
</template>

<template>
    <pe-input v-model="value" style="width: 200px;" placeholder="请输入内容" clearable />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref<string>("")
</script>

<template>
  <pe-input-number v-model="value"></pe-input-number>
</template>

<script setup lang="ts">
import { ref } from "vue"

const value = ref<number>(0)
</script>

<template>
  <pe-textarea v-model="value" :maxlength="10"></pe-textarea>
</template>

<script setup lang="ts">
import { ref } from "vue"

const value = ref<string>("")
</script>

<template>
  <pe-date-picker v-model="date"></pe-date-picker>
</template>

<script setup lang="ts">
import { ref } from "vue"

const date = ref<string | Date | number>()
</script>

<template>
  <pe-time-picker v-model="date"></pe-time-picker>
</template>

<script setup lang="ts">
import { ref } from "vue"

const date = ref<string | number>()
</script>

<template>
  <pe-switch v-model="value1" active-value="1" inactive-value="2" active-text="1" inactive-text="2" :before-change="beforeChange1">
    <template #active-action>
      T
    </template>
    <template #inactive-action>
      F
    </template>
  </pe-switch>
  <pe-switch v-model="value2" active-value="1" inactive-value="2" active-text="1" inactive-text="2" :before-change="beforeChange2"></pe-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value1 = ref<boolean | string | number>("1")
const value2 = ref<boolean | string | number>("1")

const beforeChange1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(true)
    }, 1000)
  })
}

const beforeChange2 = () => {
  return new Promise((_, reject) => {
    setTimeout(() => {
      return reject(new Error('Error'))
    }, 1000)
  })
}
</script>

<template>
  <pe-radio-group v-model="value" @change="change">
    <pe-radio v-for="item in 5" :value="item">{{ item }}</pe-radio>
  </pe-radio-group>
  <pe-radio-group v-model="value" @change="change">
    <pe-radio-button v-for="item in 5" :value="item">{{ item }}</pe-radio-button>
  </pe-radio-group>
</template>

<script setup lang="ts">
import { ref } from "vue"

const value = ref<string | number | boolean>("")

const change = (val: string | number | boolean) => {
  console.log(val);
}
</script>

<template>
  <pe-checkbox-group v-model="value" @change="change">
    <pe-checkbox v-for="item in 5" :value="item">{{ item }}</pe-checkbox>
  </pe-checkbox-group>
  <pe-checkbox-group v-model="value" @change="change">
    <pe-checkbox-button v-for="item in 5" :value="item">{{ item }}</pe-checkbox-button>
  </pe-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue"

const value = ref<string[] | number[]>([])

const change = (val: string[] | number[]) => {
  console.log(val);
}
</script>

<template>
  <pe-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></pe-avatar>
</template>

<template>
  <pe-card header="title" shadow="hover"></pe-card>
</template>

<template>
  <pe-calendar v-model="date" title="Title" @change="change"></pe-calendar>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const date = ref<Date>(new Date())

const change = (val: Date) => {
  console.log(val);
}
</script>

<template>
  <pe-progress :percentage="percent" stroke-width="24" :indeterminate="false" type="line" striped striped-flow></pe-progress>
  <pe-button @click="onClick">按钮</pe-button>
</template>

<script setup lang="ts">
import { ref } from "vue"

const percent = ref<number>(0)
const onClick = () => {
  percent.value = Math.floor(Math.random() * 100)
}
</script>

<template>
  <pe-button @click="show = true">显示 Dialog</pe-button>
  <pe-dialog v-model="show"></pe-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"

const show = ref<boolean>(false)
</script>

<template>
  <pe-alert></pe-alert>
</template>

<template>
  <button @click="show = true">显示</button>
  <pe-drawer v-model="show" direction="left" title="Title">内容</pe-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue"

const show = ref<boolean>(false)
</script>