SaaS 样板

这款开源 Web 应用可帮助您在构建自己的 SaaS 产品时节省大量时间。样板文件包含许多基本的 SaaS 功能（请参阅下方的功能），让您可以专注于打造差异化的产品功能。

如果您想了解如何从头开始构建这个项目，请查看我们的书：https://builderbook.org/book

开源项目位于saas文件夹中。如果您购买了我们的书，本书各章节的代码库都位于该book文件夹中。

现场演示：

• 应用程序：https://saas-app.async-await.com
• API：https://saas-api.async-await.com

展示

查看借助此开源应用构建的项目。欢迎通过创建拉取请求 (Pull Request) 来添加您自己的项目。

• Earl Lee出品的Retaino：保存、注释、审阅和分享精彩网页内容。接收智能邮件摘要，轻松保留关键信息。
• Builder Book：用于发布文档或书籍的开源网络应用程序……

react-beautiful-dnd ^(rbd)

核心特征

• 物品美丽自然的移动 💐
• 可访问：强大的键盘和屏幕阅读器支持 ♿️
• 性能卓越 🚀
• 简洁、强大的 API，易于上手
• 与标准浏览器交互效果极佳
• 不固执己见的造型
• 无需创建额外的包装器 dom 节点 - flexbox 和焦点管理友好！

开始 👩‍🏫

我们创建了一个免费课程egghead.io 🥚 react-beautiful-dnd帮助您尽快开始。

当前支持的功能集 ✅

• 垂直列表 ↕
• 水平列表 ↔
• 列表之间的移动 (▤ ↔ ▤）
• 虚拟列表支持 👾 - 以 60fps 的速度解锁 10,000 个物品
• 合并项目
• 老鼠 🐭 ， 键盘 🎹 ♿️ 并触摸 👉 📱 （手机、平板电脑等）支持
• 多拖拽支持
• 令人难以置信的屏幕阅读器支持 ♿️ -…

维维布斯

拖放网站构建器 javascript 库。

对于使用 VvvebJs 的全功能 CMS，请查看Vvveb CMS

使用 jQuery 和 Bootstrap 4 构建。

双面板现场演示

单面板现场演示

使用Startbootstrap 登录页面作为演示页面和 Bootstrap 4 组件。

特征

• 组件和块/片段拖放。
• 撤消/重做操作。
• 一个或两个面板接口。
• 文件管理器和组件层次结构导航。
• 添加新页面。
• 实时代码编辑器。
• 包含示例 php 脚本的图像上传。
• 页面下载或导出 html 或在服务器上保存页面，其中包含示例 php 脚本。
• 组件/块列表搜索。
• Bootstrap 4 组件。
• Youtube、Google 地图、Charts.js 等小部件。

默认情况下，编辑器附带 Bootstrap 4 和 Widgets 组件，并且可以使用任何类型的组件和输入进行扩展。

用法

<!-- jquery--> 
< script  src =" js/jquery.min.js " > </ script > 
< script  src =" js/jquery.hotkeys.js " > </ script > 
<!-- 引导程序-->

十一 🕚 ⚡️

一个更简单的静态网站生成器。Jekyll 的替代品。用 JavaScript 编写。将包含各种类型的模板目录转换为 HTML。

适用于 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript 模板文字。

➡ 文档

• 请在 GitHub 上为该 repo加注星标！
• 在 Twitter 上关注我们@eleven_ty
• 在 Open Collective 上支持11ty
• npm 上的 11ty
• GitHub 上的 11ty
• 持续集成
  • GitHub Actions

安装

npm install @11ty/eleventy --save-dev

阅读我们的入门指南。

测试

npm run test

• 我们使用ava JavaScript 测试运行器（断言文档）
• ℹ️ 为了保持测试快速，应尽量避免在测试中编写文件。
• 代码覆盖率统计
• 性能回归基准

主要路线图功能

• 热门功能请求（使用 👍 反应）
• 文档请求（使用 👍 反应）
• 最主要的漏洞 😱 （使用 👍 …

更好的滚动

中文文档

1.x 文档

2.x 文档

2.x 演示

注意：1.x未维护。请尽快迁移您的版本

安装

npm install better-scroll -S #安装 2.x，包含完整功能插件。 
npm install @better-scroll/core #仅安装 CoreScroll

 从“better-scroll”导入BetterScroll  

让 bs  =  new  BetterScroll ( '.wrapper' ,  {
  可移动: true ,
  缩放: true 
} )

 从'@better-scroll/core'导入BScroll  

让 bs  =  new  BScroll ( '.wrapper' ,  { } )

CDN

BetterScroll 具有全功能插件。

< script  src = " https://unpkg.com/better-scroll@latest/dist/better-scroll.js " > </script>​

<!-- 最小化 --> 
< script  src =" https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js " > </ script >

让 包装器 = 文档. getElementById ( “包装器” )
让 bs  =  BetterScroll . createBScroll (包装器， { } )

仅限 CoreScroll

<脚本 src =“ https://unpkg.com/@better-scroll/core@latest/dist/core.js ” > </脚本>

<!-- 最小化 --> 
< script  src =" https://unpkg.com/@better-scroll/core@latest/dist/core.min.js " > </ script >

让

Webamp

使用 HTML5和JavaScript 重新实现 Winamp 2.9，并提供完整皮肤支持，如TechCrunch 、Motherboard、Gizmodo、Hacker News（1、2、3、4 ）和其他地方所见。

查看此Twitter 帖子，查看图文并茂的功能列表。适用于 Edge、Firefox、Safari 和 Chrome 的现代版本。不支持IE 。

将 Webamp 添加到您的网站

以下是将 Webamp 添加到页面的最简单的示例：

< div  id = " app " > </ div > 
< script  src = " https://unpkg.com/webamp " > </ script > 
< script > 
    const  app  =  document . getElementById ( "app" ) 
    const  webamp  =  new  Webamp ( ) ; 
    webamp . renderWhenReady ( app ) ; 
</ script >

有关更多示例，包括如何添加音频文件，请查看examples/目录和API 文档。

关于此

高度可定制且功能多样的 GraphQL 客户端

✨ 特征

• 📦 一个软件包即可在 React、Preact 和 Svelte 中运行 GraphQL 客户端
• ⚙️ 通过“交换”实现完全可定制的行为
• 🗂 逻辑但简单的默认行为和文档缓存
• 🌱 通过以下方式进行规范化缓存@urql/exchange-graphcache
• 🔬 使用devtools 浏览器扩展轻松调试urql

urql是一个 GraphQL 客户端，它为多个框架提供了一组辅助函数。它高度可定制且功能多样，因此您可以从第一个 GraphQL 项目入门，一直到构建复杂的应用程序并尝试使用 GraphQL 客户端。

虽然 GraphQL 是一种优雅的协议和模式语言，但如今的客户端库通常占用大量的 API。我们的目标是创建更轻量级的库。

安装

yarn add urql graphql
 #或者
npm install --save urql graphql

📃 文档

该文档包含您需要了解的有关urql...的所有信息。

Reactjs-弹出窗口

Reactjs-popup是一个简单的反应弹出组件，可帮助您为下一个 React App 创建简单和复杂的模态框、工具提示和菜单。

您应该考虑使用 reactjs-popup，原因如下：

• ✅ 模态框、工具提示、菜单：全部包含在一个库中 🏋️
• ✅ 非常小的库（3kb） ⚡️
• ✅ 完全无障碍
• ✅ 充当子模式，在代码中的任何位置控制弹出窗口 💪
• ✅ 便于使用 🚀
• ✅ TypeScript 支持 👌
• ✅ IE 支持。 🚀
• ✅ 完全风格定制 👌 （js、CSS、样式组件）
• ✅ 支持受控模式和工具提示
• ✅ 默认和自定义动画

演示

这是一个简单的演示，用于演示如何使用创建模态框、工具提示和菜单reactjs-popup。

现场演示

安装/入门

此软件包在 NPM 仓库中以 reactjs-popup 的形式提供。它可以与所有流行的打包工具兼容。

npm 安装 reactjs-popup --save

使用纱线

Docker课程

学习使用 Docker 轻松构建分布式应用程序并将其部署到云中

关注docker-curriculum.com上的课程

Spectre.css

Spectre.css 是一个轻量级、响应迅速且现代的 CSS 框架。

• 为您的项目提供轻量级（压缩后约 10KB）的起点
• 基于 Flexbox 的响应式、移动友好型布局
• 精心设计和开发的元素和组件

Spectre 是一个基于多年大型 Web 服务项目 CSS 开发经验的副项目。Spectre 仅包含现代基础样式、响应式布局系统、CSS 组件和实用程序，您可以使用 Sass/Scss 编译器根据项目需求进行修改。

Spectre.css 完全免费使用。如果您喜欢它，请考虑通过 Paypal或Patreon 进行捐赠，以支持其进一步开发。 ♥

入门

有 5 种方法可以在项目中使用 Spectre CSS 框架。您可以手动安装，也可以使用 NPM、Yarn 和 Bower。

手动安装

下载已编译并压缩的Spectre CSS 文件。并将其spectre.css包含在/docs/dist您的网站或 Web 应用程序的 <head> 部分中。

<link rel="stylesheet" href="spectre.min.css">