懂AI
shoelace

shoelace

面向未来的网页组件库 多框架兼容 高度可定制

Shoelace 是基于 LitElement 构建的开源网页组件库，支持多框架集成、CDN 部署、CSS 自定义和无障碍设计。它提供官方暗黑主题，使用 esbuild 进行高效打包。开发者可利用 Shoelace 快速创建现代化、响应式的用户界面，同时该项目欢迎社区贡献，推动网页开发技术进步。

ShoelaceWeb组件库前端开发开源项目跨框架兼容Github
GitHub文档

Shoelace

一个前瞻性的 Web 组件库。

  • 适用于所有框架 🧩
  • 支持 CDN 🚛
  • 可通过 CSS 完全自定义 🎨
  • 包含官方深色主题 🌛
  • 注重可访问性设计 ♿️
  • 开源 😸

由 Cory LaViska 在新罕布什尔州设计。

文档：shoelace.style

源码：github.com/shoelace-style/shoelace

Twitter：@shoelace_style

鞋匠 🥾

鞋匠，或称"Shoelace 开发者"，可以使用此文档学习如何从源码构建 Shoelace。您需要 Node >= 14.17 来在本地构建和运行项目。

使用 Shoelace 不需要执行以下任何操作！ 本页面适用于想要为项目贡献、修改源码或创建自定义 Shoelace 构建的人。

如果这不是您想做的，文档网站才是您需要的地方。

您使用什么来构建 Shoelace？

组件使用 LitElement 构建，这是一个自定义元素基类，提供直观的 API 和响应式数据绑定。构建过程是一个自定义脚本，由 esbuild 提供打包支持。

复刻仓库

首先在 GitHub 上复刻仓库，然后在本地克隆并安装依赖。

git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install

开发

克隆仓库后，运行以下命令。

npm start

这将启动开发服务器。初始构建完成后，浏览器将自动打开。目前没有热模块重载（HMR），因为浏览器不提供重新注册自定义元素的方法，但对源码的大多数更改都会自动重新加载浏览器。

构建

要生成生产构建，运行以下命令。

npm run build

创建新组件

要搭建新组件，运行以下命令，将 sl-tag-name 替换为所需的标签名。

npm run create sl-tag-name

这将为您生成源文件、样式表和文档页面。启动开发服务器后，您可以在侧边栏的"Components"部分找到新组件。

贡献

Shoelace 是一个开源项目，欢迎贡献！如果您有兴趣贡献，请先查看贡献指南。

许可证

Shoelace 由 Cory LaViska 创建，并根据 MIT 许可证条款提供。

无论您是构建 Shoelace 还是使用 Shoelace 构建项目 — 祝您创作愉快！🥾

编辑推荐精选

GPT Plus｜Pro充值

GPT Plus｜Pro充值

GPT充值

支持 ChatGPT Plus / Pro 充值服务，支付便捷，自动发货，售后可查。

GPT Image 2中文站

GPT Image 2中文站

AI 图片生成平台

GPT Image 2 是面向用户的 AI 图片生成平台，支持文生图、图生图及多模型创意工作流。

Vecbase

Vecbase

你的AI Agent团队

Vecbase 是专为 AI 团队打造的智能工作空间，将数据管理、模型协作与知识沉淀整合于一处。算法、产品与业务在同一平台无缝协同，让从数据到 AI 应用的落地更快一步。

音述AI

音述AI

全球首个AI音乐社区

音述AI是全球首个AI音乐社区，致力让每个人都能用音乐表达自我。音述AI提供零门槛AI创作工具，独创GETI法则帮助用户精准定义音乐风格，AI润色功能支持自动优化作品质感。音述AI支持交流讨论、二次创作与价值变现。针对中文用户的语言习惯与文化背景进行专门优化，支持国风融合、C-pop等本土音乐标签，让技术更好地承载人文表达。

QoderWork

QoderWork

阿里Qoder团队推出的桌面端AI智能体

QoderWork 是阿里推出的本地优先桌面 AI 智能体，适配 macOS14+/Windows10+，以自然语言交互实现文件管理、数据分析、AI 视觉生成、浏览器自动化等办公任务，自主拆解执行复杂工作流，数据本地运行零上传，技能市场可无限扩展，是高效的 Agentic 生产力办公助手。

lynote.ai

lynote.ai

一站式搞定所有学习需求

不再被海量信息淹没，开始真正理解知识。Lynote 可摘要 YouTube 视频、PDF、文章等内容。即时创建笔记，检测 AI 内容并下载资料，将您的学习效率提升 10 倍。

AniShort

AniShort

为AI短剧协作而生

专为AI短剧协作而生的AniShort正式发布，深度重构AI短剧全流程生产模式，整合创意策划、制作执行、实时协作、在线审片、资产复用等全链路功能，独创无限画布、双轨并行工业化工作流与Ani智能体助手，集成多款主流AI大模型，破解素材零散、版本混乱、沟通低效等行业痛点，助力3人团队效率提升800%，打造标准化、可追溯的AI短剧量产体系，是AI短剧团队协同创作、提升制作效率的核心工具。

seedancetwo2.0

seedancetwo2.0

能听懂你表达的视频模型

Seedance two是基于seedance2.0的中国大模型，支持图像、视频、音频、文本四种模态输入，表达方式更丰富，生成也更可控。

nano-banana纳米香蕉中文站

nano-banana纳米香蕉中文站

国内直接访问，限时3折

输入简单文字,生成想要的图片，纳米香蕉中文站基于 Google 模型的 AI 图片生成网站，支持文字生图、图生图。官网价格限时3折活动

扣子-AI办公

扣子-AI办公

职场AI，就用扣子

AI办公助手，复杂任务高效处理。办公效率低？扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作，覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应，生活工作无缝切换，提升50%效率！

下拉加载更多