一、首页

效果图（图片经压缩，模糊请忽略）

实现功能：

• 导航栏随滚动高度背景色变化；

• 轮播图文字下坠效果（轮播图采用ElementUI走马灯插件）；

• 图片、文字等trasition过渡效果；

• 缓慢回到顶部效果；

二、产品中心

1、白光划过效果（鼠标放logo上时显示）

2、①分类吸顶效果；②按钮特效；③插入、移除节点效果；④图片hover效。

三、产品详情

  没什么好说，直接上图

四、404页面

  参考 kickpush 网站，效果图：

五、500页面

  参考 zcool 网站，效果图：

六、Loading动画

  采用经典的吃豆豆loading，另外安利一个不错的loading效果合集文章 点这里

结语

• 采用 vuejs-admin 模板开发

• 技术栈：vuejs、vue-router、vuex、axios、element-ui、animate.css

题外话

开发官方网站应该是采用SSR，但我听到的声音是SSR的坑挺多的，我原本的计划就是做个demo出来，提升实战能力的，工作都是以后台管理系统和小程序为主，SSR也未接触到，所以未采用SSR

计划

未来会采用vue3.0做一个新版本出来，未来将不会采用CSS库，自己实现各种组件，预计会添加的功能：

• 手写轮播图：图片切换效果
• 鼠标单击：跳方块的效果
• 主题效果
• 中英文切换i18
• 单图上传
• 手写数字框组件
• 滚动时图文上浮显示，懒加载
• 大数据虚拟列表
• 文件导出
• 收藏拖拽
• 放大镜效果
• 瀑布流
• 骨架屏
• 手写switch按钮

想到再添加，目前在学习webpack前端工程化、解读vue源码...