你们这些阿猫🐱阿狗🐶,做只猫🐱做只狗🐶不要做情人啊

229

缘起

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

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

Demo

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

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

Vue

后记

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

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


技术栈/库(补)

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

API

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)