缘起

考完 Final 又是一个 Spring Break，10 天很无聊啊，人一无聊就想写代码，但是前面写守望 UI CSS 的时候写伤了，而且 Spring Break 就 10 天，实在不想写一个大项目。

有一天听到了古巨基的《爱与诚》里面唱的：“做只🐱做只🐶不做情人”。不如就做一个阿猫阿狗的 APP 吧，当然单做一个简单的 APP 又是写写页面，不好玩，所以这个 APP 用了三大框架都写了一次。UI 框架也用了之前没怎么用过的 Material UI，NG-ZORRO。

Demo

每个框架产出的 APP 都放在不只的 URL 里，所以就写了个简陋的首面将它们集中一起啦

• Home page is here!

• Github: awesome-a-cat-a-dog

App 的布局就参照 XX 软件写的，咳咳，这个 XX 你们可以猜猜，下面是 Vue 版的阿猫阿狗。

后记

写了一遍对这三大框架的差异也有一个更大的了解，反正就是写 Vue 的时候觉得 React 简洁，没有太多约束想干嘛就干嘛，写 React 的时候又觉得 Vue 有约束爽，直接套 Vue 里的东西就搞定了，简单。写 Angular 又觉得啥都是官方的，用起来更放心，文档很全，就是太麻烦了文件名字也太长了点 8。

看了那么多知乎上的什么“三大框架对比”其实不如自己用一次来得舒服，理解更深刻。所以 纸上得来终觉浅，绝知此事要躬行 呀

技术栈/库（补）

这可能不是一个特别创新的项目，只是熟悉一下三大框架的同时，也用一下以前没用过的库。下面是这个项目的技术栈。

API

• 猫猫的 API：thecatapi.com
• 狗狗的 API：thedogapi.com

React

• React，React Router，Redux
• TypeScript
• Scss
• Axios
• Material UI x React

Vue

• Vue，Vue Router，Vuex
• Material x Vue (太坑了，写到一半实在写不下去了，还是用回 Element UI)
• Axios
• Scss

Angular

• Angular (TypeScript 路由什么的都包了)
• Axios (有个地方查了 Google 半天， 用 Angular 的 HttpClient 实在解决不了，只能用一下 Axios)