按属性分类的宝可梦列表怎么看？一篇文章告诉你怎么查！

今天给大家伙儿唠唠我做的这个“宝可梦列表”小玩意儿，纯属个人兴趣，边学边做，过程那是相当曲折，不过总算是搞出来了，所以就想跟大家伙儿分享分享，也算是个记录。

想法很简单，就是想做一个能展示所有宝可梦的小页面。毕竟宝可梦这么多，一个个查资料太麻烦，不如自己整个列表，想看哪个点哪个，多方便！

第一步，找数据。

巧妇难为无米之炊，没有数据那还玩个der。还好网上资源多，费了老劲儿，总算找到一个比较全的宝可梦数据接口。里面有名字、属性、图片啥的，基本够用了。

第二步，搭框架。

我用的是*，这玩意儿上手快，而且组件化开发很舒服。先用Vue CLI搭了个架子，把基本的页面结构搞出来。这部分没啥难度，就是照着文档敲代码，谁都能干。

第三步，渲染列表。

• 关键的一步来了，怎么把数据接口里的宝可梦信息展示到页面上？



• 用Axios发个请求，把数据拉回来。
• 然后，用v-for指令，把数据循环渲染成列表项。
• 每个列表项里，展示宝可梦的名字和图片。

这一步遇到个坑，图片路径死活不对。后来发现是接口返回的路径有问题，自己手动拼接了一下才搞定。

第四步，美化界面。

程序员嘛审美基本为负。不过为了看着舒服点，还是稍微折腾了一下CSS。加了点颜色，调整了一下布局，让列表看起来更整齐。

第五步，添加筛选功能。

宝可梦太多了，全部展示出来找起来也麻烦。所以我就加了个筛选功能，可以按属性筛选宝可梦。比如只想看火属性的，那就只显示火属性的宝可梦。

这个功能稍微有点复杂，要用到Vue的计算属性和监听器。不过还啃啃文档，看看示例，也总算是搞出来了。

第六步，优化体验。

列表加载速度有点慢，图片太多了。于是我就加了个loading动画，在图片加载完成之前，先显示一个loading图标。这样用户体验会好一点。

第七步，打包上线。

一步，把代码打包成静态文件，扔到服务器上。搞个域名，部署一下，就可以访问了。虽然简陋了点，但好歹是个完整的项目了。

整个过程下来，感觉学到了不少东西。Vue的用法更熟练了，对前端开发的流程也更了解了。虽然做的东西很简单，但也是一步一个脚印走出来的。以后有机会，再搞点更有意思的项目！

就这样，下次再见！