Capri.js 使用教程

Capri.js 使用教程

capri Build static sites with interactive islands 项目地址: https://gitcode.com/gh_mirrors/ca/capri

1. 项目介绍

Capri 是一个用于构建静态网站的开源项目，它允许开发者使用自己喜欢的前端框架（如 React、Preact、Vue、Solid 或 Svelte）来创建网站。Capri 的特点是在默认情况下不会向浏览器发送任何 JavaScript 代码（zero KB），而是通过将某些组件转变为“岛屿”（islands），仅在需要时发送相应的 JavaScript 代码，从而实现客户端的交互性。

2. 项目快速启动

环境准备

在开始之前，确保你的系统中已经安装了 Node.js 和 npm。

克隆项目

git clone https://github.com/capri-js/capri.git
cd capri

安装依赖

npm install

运行项目

npm run dev

现在，你应该能够通过浏览器访问 http://localhost:3000 来查看你的 Capri 项目。

3. 应用案例和最佳实践

使用路由

Capri 支持服务器端渲染的路由库。选择一个支持服务器端渲染的路由库，并按照库的文档进行配置。

创建岛屿组件

如果你希望一个组件在客户端变得交互式，你只需要将其命名为 *.island.*。例如，MyComponent.island.tsx。

服务器端渲染

Capri 默认支持服务器端渲染。确保你的路由库和组件支持服务器端渲染，这样 Capri 就会在构建时预渲染页面。

4. 典型生态项目

Capri 生态系统中的一些典型项目包括：

• 静态站点生成器：Capri 可以作为静态站点生成器使用，帮助你快速构建静态网站。
• 头less CMS 集成：Capri 可以与头less CMS 集成，实现内容的实时预览。
• 性能优化：通过 Capri 的岛屿架构，你可以只加载需要的 JavaScript 代码，从而优化网站性能。

以上就是 Capri.js 的基本使用教程，希望对你有所帮助。

capri Build static sites with interactive islands 项目地址: https://gitcode.com/gh_mirrors/ca/capri