vexip-ui / vexip-ui Goto Github PK

View Code? Open in Web Editor NEW

1.6K 10.0 140.0 22.04 MB

A Vue 3 UI library, highly customizability, full TypeScript, performance pretty good.

Home Page: https://www.vexipui.com

License: MIT License

JavaScript 0.15% HTML 0.05% Vue 28.07% TypeScript 59.12% SCSS 12.58% Shell 0.03%

typescript ui-components vitejs vue vue-components vexipui javascript config css html

vexip-ui's Introduction

Vexip UI

Highly customizability, full TypeScript, performance pretty good

If you have created any awesome thing with Vexip UI and would like to showcase it on the official website, you can contact me. If you would like to contribute code, you are very welcome!

English | 中文 [含技术支持群]

Vexip (pronounced /ˈvesɪp/) UI provides a series of out-of-box components.

This library is written using composition API, and the components are designed and written in a traditional Vue way possible, with full TypeScript support.

Almost all default property values of each component can be easily customized through injected configurations, making it easy to achieve customization.

Meanwhile, the component code pays great attention to reducing the threshold of source code reading, and the code layout is as close as possible to the habits of daily business code, avoiding fancy and showy code.

Currently, there are 78 components, some of which may be familiar to you, and even better, while others may brighten your eyes.

Features

📦 Out-of-box high quality Vue 3 components
📐 Intuitive, minimalistic Api design
🔧 Configurable default value of props, quickly complete global/local modifications
⚡ Composition Api, good performance base
🔨 With TypeScript, fully types
💪 1100+ unit tests to provide good stability
🎨 Support CSS variable, built-in dark theme
🚩 Support i18n
🛫 Provide resolver, support unplugin
🚤 Support SSR
🩹 Good a11n
👀 Close to business code arrangement, low source code reading threshold

The design tokens are base on Open Color, and have some adjustments.

Install

It is recommended to use pnpm or yarn to install:

# use pnpm
pnpm add vexip-ui

# use yarn
yarn add vexip-ui

Documentation

Here you can view the online document.

Author is not good at English. If you have any advice to improve the English document, you can create an issue or a PR.

Help

Open a issue to request help.

If you take maybe some bugs, please use the Vexip UI Playground to provide a minimal reproduction.

Contributing

Welcome to join us! You can check out the Contributing Guide to learn how to get started.

Or you can sponsor us to help the project grow better!

WeChat:

Alipay:

Contributors

Thanks for all their contributions!

Environment

All components supported in modern browsers, I try to ensure the support of nearly two or three versions.

Edge	Firefox	Chrome	Safari	iOS Safari	Opera	Electron
last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

License

All in MIT license.

vexip-ui's People

Stargazers

Watchers

Forkers

hesitanting fucora zbczbc2006 lyh0371 lantzshaw vickeywei bluesyoung-web shuaxindiary zyyv doom-9-zz ccakee leno23 bxtizen cgd199158 asbstty wz930206 webstudy323-fork mrwhitebare jackwiy shuzhiweb jiecaigen dongmeng22 sanyuesiyuewuyue iamyefan jumpingfinger gxuebin wangshufen66 xzz-1005 yangfong zz541843 kev1nzh37 thetejasmagade zmm-fe guanlola tydd nelsonyong boardev saber-kurama sechi747 gltjk devricklin cnlhb cklwblove sight-wcg flingyp songjianet marlboro029 snowingfox qinran0423 priority3 xavierluo zxhjam windjus moawiaab hujianboo radiumag radium-vue sgodf zhaooa altq1231 memoryleft maomincoding gogogosir wjys995 thearasu daguanren21 jeffrey-mu wincheshe fan5530 iamdin jay6697117 7quigranoviuka jiuranya frontenddog yang1206 li-jia-nan qqqias atthegarden szjhtz chz kinggq jjyu937 windlil bluex-xx pzzyf anhlbt gigabyte-18c y4sh1k4 debajoti vaibhavwakde52 7agabond ngogiaphat hq222222 pinuo520 ahmedoashery coldtherain leleshuo yioyoiyioys222 plag-it-hub aichatd

<Tree
  id-key="id"
  label-key="label"
  children-key="children"
  parent-key="parent"
></Tree>

When extend, it will add too much props.

In the new case:

<template>
  <Tree
    key-config="keyConfig "
  ></Tree>
</template>

<script setup>
const keyConfig = {
  id: 'id',
  label: 'label',
  children: 'children'
  parent: 'parent'
}
</script>

Good extensibility and reusability.

通过直播知道了这个组件库，希望能够参与其中的一些开源工作，向作者大佬学习。

<template>
  <Wheel>
    <WheelItem>1<WheelItem>
    <WheelItem>2<WheelItem>
  </Wheel>
</template>

Refactored:

<template>
  <Wheel :options="[1, 2]">
    <template #default="{ option }">
      {{ option.value }}
    </template>
  </Wheel>
</template>

pnpm i

Then

pnpm run serve:docs

报错截图：

请问我少了哪个步骤吗？