animal-island-vue

🏝 Animal-Island-Vue

简体中文 | English

介绍

本项目是基于 Vue 3 + TypeScript + Less 实现的轻量 UI 组件库，是 animal-island-ui（React 版）的 Vue 移植版本，设计风格为自然可爱的手绘小岛风，用于个人前端技术练习与组件化开发学习。

所有视觉元素、布局、图标、动画均为独立原创设计实现，不使用任何第三方受版权保护的美术素材、代码或资源文件。

🎉 React 版本

• animal-island-ui

预览

• 在线预览 (PC 端) animal-island-vue-pc

• 在线预览（移动端）animal-island-vue-mobile

🎨 图标

如需图标，推荐使用 naive-icons。

🚀 用 AI 工具一键生成 animal-island-vue 风格页面（无需写代码）

非研发人员，不想自己写代码？用 PROMPT.md 即可，不需要 npm，不需要打包工具。

4 步使用：

1. 复制 PROMPT.md 全文。
2. 粘贴到任意 AI 工具（Cursor / Claude / ChatGPT / Gemini / DeepSeek）发送。
3. AI 会反问做什么页面，用一句话回答即可（如「个人博客」「商品列表」「FAQ」）。
4. 保存 AI 输出的 index.html，双击即可预览。

安装

npm install animal-island-vue

快速上手

⚠️ 重要: 请务必导入样式文件 import 'animal-island-vue/style'，否则组件将没有样式与字体!

<script setup lang="ts">
import { ref } from 'vue';
import { Button, Card, Modal } from 'animal-island-vue';
import 'animal-island-vue/style';

const open = ref(false);
</script>

<template>
    <Title color="green">欢迎来到小岛</Title>
    <Card>
        <Button type="primary" @click="open = true">开始冒险</Button>
    </Card>

    <Modal v-model:open="open" title="Welcome"> 欢迎来到 animal-island-vue。 </Modal>
</template>

文档

面向不同场景的完整参考：

本地开发

# 克隆仓库
git clone https://github.com/guokaigdg/animal-island-vue.git
cd animal-island-vue

# 安装依赖
npm install

# 启动 Demo 开发服务器
npm run dev

# 构建组件库
npm run build

# 构建 Demo 站点
npm run build:docs

注意事项

• 本项目仅用于个人学习、研究与非商业展示，禁止任何形式的商业使用、二次售卖或盈利行为。

• 不用于任何商业产品、企业项目、对外服务或付费模板。

• 使用本组件库产生的任何风险由使用者自行承担。

版权与免责声明

• 本项目所有视觉元素、界面设计、图标与动画均为独立原创设计，不复制任何第三方游戏或产品的受版权保护的素材。

• 若版权方认为相关内容存在侵权嫌疑，可通过邮箱联系，本人将在第一时间进行整改或删除处理。

联系方式

如有问题或版权相关沟通，请通过 Issue 或邮件联系。

License

MIT 本项目基于 MIT 开源协议发布，仅限学习使用，作者不对因使用本库导致的任何法律问题或损失承担责任。