day14 ts前端技术栈Vite+React18+Eslint+Stylelint+TailwindCSS+Antd（java转ts全栈/3R教室）

• 今天正式开始学ts前端技术，也是我最关心的部分。全栈开发的话后端我用java也能做，但前端比起来就弱了，要能达到即使不看ui设计图，也能快速做出一个漂亮的响应式页面才行，这一方面是html css js的基本功，另外就是各种开发框架的辅助了。今天先来看看ts技术栈，常用的前端框架有哪些，对比我更熟悉的vue相关技术体系有什么区别。
  

---

• React vs Vue：都是js框架，vue react对于js来说，类似于SpringMVC, Spring这类后端框架对于Java, 都是基于先进的思想方便代码的开发；

  • 就差别简单来说： Vue 像自动挡汽车，React 像手动挡汽车。react学期曲线陡峭，但是会用了之后自由度更高。 React 和 VUE 的区别和优缺点，项目中改如何选择？ - 知乎 (zhihu.com)
  • 两者的设计思想是不同的：React 整体是函数式的思想，在 React 中是单向数据流，推崇结合 immutable 来实现数据不可变。而 Vue 的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM。
  • 初看起来感觉是差别挺大的，Vue 是把 HTML，CSS，JavaScript 组合到一起，用各自的方式分别处理。而React 的思路是 HTML in JavaScript 也可以说是 All in JavaScript，通过 JavaScript 来生成 HTML，所以设计了 JSX 语法，还有通过 JS 来操作 CSS，感觉看着比较混乱，但用上手之后就顺了，html，js用的时候不用跳来跳去的看，而且用tailwindcss之后css都不写了，简化了前端开发的复杂度。
    

• vite：对比起来vue有前端工程脚手架vuecli，react也有vite（并且也支持vue），都类似于spingboot在后端的作用，是用于快速构建前端项目的。Vite | 下一代的前端工具链 (vitejs.cn)

  • Vite和Vue Cli对比 - 掘金 (juejin.cn)
    

• Ant design：同vue中的element-ui都是前端通用型组件库 Ant Design - 一套企业级 UI 设计语言和 React 组件库，即使不会css直接引用现成的组件，设置属性就行，样式/功能/动效什么的都给做好了。
  

• tailwindcss：这个是一个css框架，就是方便写css的。只用写html，css只用配置已经封装好的css原子类就行，相当于只用写html就行。Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网

  • 对比element和antd这些组件库，Tailwindcss是一种css样式库，有大量样式，便于更细粒度的组件开发；不用在写css，而是用原子类来代替 [(77 封私信) 为什么国内类似 Tailwind CSS 这样的方案没有流行起来？ - 知乎 (zhihu.com)
    

• 前端框架：前端框架感觉比后java端可多多了，特别是css样式相关的框架有很多，什么bootstrap，elementui，antd，tailwindcss，headless，nestui，daisyui ，echart，threejs等，还有一些低代码前端开发框架之类的。我觉得大体可以分为几类（按照前端开发工作在进行复用和组合时的颗粒度大小、使用复杂度进行分类）：

  • 低代码开发平台：使用门槛最低，妥妥拽拽就行，比如ruoyi。适合与非前端人员来用，比如我在的公司后端比较多，还专门做了一套前端低代码开发平台，让后端也开始做页面，一方面是降低入门门开，一方面是同一UI风格，适合标准统一的自研产品。
  • UI组件库：比如常用的有elementui、antd这类通用组件库，使用与样式没啥特别要求的，比如一般的后台管理系统，快速搭建界面。不用写css。或者直接就是vue-admin这类模板项目，直接改改就能用。还有一些专用的组件库如画图表的echart，G2Plot等（目前我熟悉的层次）
  • css框架/js框架：如果有ui设计图，找不到现成样式的组件，或者嫌手撸css太费时间，就使用如Tailwindcss配合一些ui库辅助开发，提高开发效率。也有一些专用的如画图的用的D3.js，three.js等（希望下一阶段能到达这一层次）
  • 手撸css/js：这种自由度是最高的，也是最花时间的，一些复杂的css样式效果，以上都无法完成的就只能这样做了。

• 其他还有一些辅助开发的工具，比如没话代码格式的：Eslint与Prettier，还有Stylelint，css格式检查工具。

程序员提升&&转型交流群：954614622
文章代码出自3r教室，想报名的可以找我有内部优惠