近现代大师：尘猫 · 艺术家

今天想和大家分享一下我最近创建的一个艺术家展示网站——尘猫 · 艺术家。

网站设计理念

在设计这个网站时，我主要考虑了以下几点：

  • 简洁美观：界面设计以简洁为主，让观众能专注于艺术家介绍本身
  • 快速加载：优化图片和代码，确保页面加载速度

艺术家分类展示

网站目前主要展示了五大画派和近现代比较出名的艺术家。

  • 京津
  • 海派
  • 岭南
  • 新金陵
  • 长安
  • 当代全才
  • 融合中西
  • 漫画插图
  • 浙派
  • 书法家
  • 人物画
  • 山水画
  • 新生代

页面功能展示

  1. 首页：展示整个网站布局，页面变动自动刷新古诗词，使用今日诗词 API，如图：

    artlist0.png

  2. 搜索功能：通过输入艺术家名字或者头衔，可以快速找到该艺术家的详细信息，如图：

    artlist1.png

  3. 知识文档：使用markdown写的文化文档，方便用户查阅，如图：

    artlist2.png

  4. 天气小组件：我自己写的天气小组件，数据通过 API 盒子 - 天气接口 获取，如图：

    artlist3.png

  5. 艺术家介绍：一个卡片包含艺术家的图片、简介、作品、艺术成就等信息，如图：

    artlist4.png

设计亮点

UI/UX设计

  • 中国风配色：采用朱砂红、金黄色、米白色等中国传统色彩
  • 响应式布局：适配桌面端和移动端（兼容Android和iOS）设备
  • 卡片设计：竖向布局，精美艺术家介绍卡片
  • 动画效果：悬停动画和3D翻转过渡效果
  • 下拉菜单：导航栏支持下拉菜单展示更多分类

技术实现

  • 组件化架构：每个艺术家独立组件，便于维护和扩展
  • 配置驱动：艺术家数据通过配置文件管理
  • 路由管理：基于Vue Router的单页应用
  • 状态管理：使用Vue Composition API管理组件状态
  • 代码生成：提供代码生成器工具，便于快速添加新艺术家

项目依赖

主要技术栈：

  • Vue 3
  • Vue Router 4
  • Element Plus
  • JavaScript (ES6+)
  • pinia
  • pinyin-pro (汉字转拼音工具)

开发依赖：

  • Vite
  • @vitejs/plugin-vue

欢迎大家访问我的艺术空间：尘猫 · 艺术家，
也欢迎给我留言交流艺术创作心得。希望我的作品能给大家带来一些美的享受和灵感启发。

感谢大家的支持！