Cocoen 开源项目使用教程

苗素鹃Rich

于 2024-08-26 09:14:36 发布

阅读量403

点赞数 4

本文链接：https://blog.csdn.net/gitblog_01003/article/details/141551061

版权

Cocoen 开源项目使用教程

cocoenMuch like the caterpillar, your image will undergo a clear transformation with Cocoen. Making comparison really easy, it’s as straightforward way of seeing your images in a new light.项目地址:https://gitcode.com/gh_mirrors/co/cocoen

1. 项目的目录结构及介绍

Cocoen 项目的目录结构如下：

cocoen/
├── LICENSE
├── README.md
├── after.jpg
├── babel.config.js
├── before.jpg
├── dts-bundle-generator.config.js
├── importsort.config.js
├── index.html
├── jest.config.js
├── package-lock.json
├── package.json
├── prettier.config.js
├── readme.gif
├── tsconfig.json
└── src/
    ├── cocoen.ts
    ├── index.ts
    └── styles.scss

目录结构介绍

LICENSE: 项目许可证文件。
README.md: 项目说明文档。
after.jpg 和 before.jpg: 示例图片。
babel.config.js: Babel 配置文件。
dts-bundle-generator.config.js: TypeScript 声明文件生成器配置。
importsort.config.js: 导入排序配置文件。
index.html: 示例 HTML 文件。
jest.config.js: Jest 测试框架配置文件。
package-lock.json 和 package.json: npm 包管理文件。
prettier.config.js: Prettier 代码格式化配置文件。
readme.gif: 示例动图。
tsconfig.json: TypeScript 配置文件。
src/: 源代码目录，包含主要代码文件和样式文件。

2. 项目的启动文件介绍

Cocoen 项目的启动文件是 index.html，它包含了 Cocoen 的基本使用示例。

<!DOCTYPE html>
<html>
<head>
    <title>Cocoen from CDN</title>
</head>
<body>
    <div class="cocoen">
        <img src="img/before.jpg" alt="" />
        <img src="img/after.jpg" alt="" />
    </div>
    <!-- Load Cocoen library -->
    <script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>
    <!-- Turns all `cocoen` elements into Cocoens -->
    <script>
        Cocoen.parse(document.body);
    </script>
</body>
</html>