轱辘UI：你的全功能Vue3组件库

前端

2023-12-09 11:10:58

轱辘UI：用Vue 3 + TypeScript打造全功能组件库

轱辘UI是我为了探索Vue 3的新特性而编写的UI组件库。我使用Vue 3和TypeScript制作了四个组件，并使用Vue 3 + Vue Router 4制作了官网。官网支持代码预览和代码高亮功能。

特性

基于Vue 3 + TypeScript
代码简洁易读
四个组件
官网支持代码预览和代码高亮

组件

轱辘UI包含以下组件：

按钮
输入框
下拉框
弹出框

官网

轱辘UI的官网位于https://luoguix.github.io/luogui-ui/。官网提供了组件的演示和文档。

使用

要使用轱辘UI，请按照以下步骤操作：

安装轱辘UI

npm install luogui-ui

在你的Vue项目中导入轱辘UI

import { LuoguiButton, LuoguiInput, LuoguiSelect, LuoguiModal } from 'luogui-ui'

Vue.component('luogui-button', LuoguiButton)
Vue.component('luogui-input', LuoguiInput)
Vue.component('luogui-select', LuoguiSelect)
Vue.component('luogui-modal', LuoguiModal)

在你的Vue项目中使用轱辘UI组件

<template>
  <luogui-button>按钮</luogui-button>
  <luogui-input placeholder="请输入"></luogui-input>
  <luogui-select>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
  </luogui-select>
  <luogui-modal title="标题">
    <p>内容</p>
  </luogui-modal>
</template>