kevinzhang035 / contacts-web

contacts-web

contacts-web

实现一个 Web 版通讯录功能

Demo

Demo

Features

• 该项目基于Vue
• 样式尝鲜了时下流行的tailwindcss
• 时间处理使用dayjs
• 数据Mock使用mockjs
• 客户端数据的存储使用localStorage
• 列表虚拟渲染使用vue-virtual-scroller组件
• 骨架屏使用skeleton-loader-vue组件

To do list

• 列表支持查询
• 可以记录用户的查询记录(最近一天)
• 列表支持基于用户首字母的查询功能
• 点击某个条目时，弹出一个详情界面
• 详情界面模式下可点击上下箭头进行用户切换

Requirements

• 考虑模块化
  • 项目基于前端模块化**编写，在组件及通用的方法上都有体现，但仍有优化，解耦的空间。
• 考虑性能问题
  • 性能的优化体现在：
    • 1、加载数据过程中的骨架屏，给用户提供良好的体验；
    • 2、加载数据完成后，考虑到懒加载对长列表的体验以及跳转功能的影响，包括DOM节点多导致的滚动不流畅，故采用虚拟渲染的方式做处理；
    • 3、现数据由mock获得，后期有接口的加持，会获得进一步的优化。
    • 4、基于用户首字母的查询涉及DOM的滚动，在这里还做了一个节流

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build