Franken UI 开源项目教程

最新推荐文章于 2024-09-04 07:29:22 发布

石菱格Maureen

最新推荐文章于 2024-09-04 07:29:22 发布

阅读量466

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01063/article/details/141879609

Franken UI 开源项目教程

franken-uiFranken UI is an HTML-first, open-source library of UI components that works as a standalone or as a Tailwind CSS plugin. It is compatible with UIkit 3. The design is influenced by shadcn/ui.项目地址:https://gitcode.com/gh_mirrors/fr/franken-ui

1、项目介绍

Franken UI 是一个以 HTML 为先的开源 UI 组件库，可以独立使用或作为 Tailwind CSS 插件使用。它兼容 UIkit 3，设计灵感来源于 shadcn/ui。该项目旨在提供一套灵活且易于集成的 UI 组件，适用于各种前端开发需求。

2、项目快速启动

安装

首先，克隆项目仓库到本地：

git clone https://github.com/sveltecult/franken-ui.git

进入项目目录：

cd franken-ui

安装依赖：

npm install

运行

启动开发服务器：

npm run dev

示例代码

以下是一个简单的示例，展示如何使用 Franken UI 组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Franken UI 示例</title>
    <link rel="stylesheet" href="path/to/franken-ui.css">
</head>
<body>
    <div class="franken-ui-button">点击我</div>
</body>
</html>