后端程序员想要学习一下前端，有无比较好的学习路线推荐

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 980 天前的主题，其中的信息可能已经有所发展或是发生改变。

情况

后端开发（主力 JAVA ，平时也会写写 Go 玩儿）
前端 JS 还行（自己玩玩的程度，工作肯定不够），CSS 老大难！
喜欢看文档学，视频辅助，但是不喜欢一直看视频学习。
学习更倾向项目驱动，有需求让我练手我就能很快上手一门新技术，但是纯学习就比较枯燥。

问题

想要闲暇时学习一门前端框架，不用于工作，只为了自己也能写点页面什么的玩玩儿，算是兴趣爱好。Vue 、React 、Angular 纠结选择哪一个作为刚开始学习的框架以及该语言的学习路线。
除了语言框架，有无一些比较好的 CSS 样式的框架推荐
有没有什么比较好的练手的项目推荐（个人目前想法是，自己挺喜欢阮一峰博客那个样式，看起来也不是特别复杂，就准备决定了语言和框架后做仿一套练练手，不知是否合适）

第 1 条附言 · 2022-03-19 18:04:59 +08:00

看见大家如此热情地帮忙解答疑惑，十分感谢。

我看了大家的讨论后决定先学学 react 吧，js 和 css 的确需要巩固巩固，现在个疑问就是有必要再专门学习 ts 吗？

学习

框架

CSS

语言

77 条回复 • 2022-03-19 09:52:07 +08:00

monster1priest

2022-03-17 11:40:24 +08:00 via iPhone

React 直接开撸，配合蚂蚁的 antd 都不用写 css
真感兴趣后面再细学

murmur

2022-03-17 11:42:47 +08:00

vue 一把唆，学什么 react ，有学 react 的时间 vue 都做完了

Jwyt

2022-03-17 11:45:27 +08:00

虽然我不懂前端，但是看了前两楼，op 不如学 angular 吧

kensoz

2022-03-17 11:48:19 +08:00

看了前三楼，建议 Svelte.js （狗头）

irytu

2022-03-17 11:49:02 +08:00 via iPhone

还是 Reactjs 吧理念很好易懂不过 css 确实是难啊…

raaaaaar

2022-03-17 11:52:14 +08:00

月经

cweijan

2022-03-17 11:52:47 +08:00

必须是 vue, 语法类似后端的 template, 对于非专业前端而言是不二之选, 直接从官方文档和官方构建工具 vite 文档学习就好了, 很简单.

gotonull

2022-03-17 11:58:43 +08:00

css 真的太难了

siteshen

2022-03-17 12:16:59 +08:00

推荐 react ，react 学起来可能比 vue 麻烦些，但概念比较少。

darknoll

2022-03-17 12:26:15 +08:00

react 生态更好，建议学 react ，vue 生态真的不怎么样

SingeeKing

2022-03-17 12:29:44 +08:00

非得谈框架的话，Javaer 建议 Angular

另外，CSS 怎么都是必备的吧，推荐 https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/welcome 学习基本的 CSS 知识，然后 flex 之类的直接看 MDN ，再之后看看 tailwind 就够了

hsuyeung

2022-03-17 12:31:00 +08:00 via iPhone

@monster1priest
@irytu
@siteshen
@darknoll
react 的话很早之前跟着官网把 reactjs 文档过了一遍但是有些忘了，需要再去看看，再往后的学习路线有什么推荐的吗

hsuyeung

2022-03-17 12:35:15 +08:00 via iPhone

@SingeeKing 感谢～ css 的确还是需要补一补

hsuyeung

2022-03-17 12:39:52 +08:00 via iPhone

@cweijan vue 在生态（文档、ui 、各种轮子）方面和 react 相比如何呢？ vite 倒是没有接触过，我去瞅瞅

xiaxichenSama

2022-03-17 13:04:54 +08:00

我也是做后端的，现在也是 vue 一把梭。react 没学过。

Hanggi

2022-03-17 13:06:48 +08:00

首先还是推荐学习 React ，目前当之无愧的主流。
如果你需要做一些处理大量页面数据的项目，推荐 Angular ，他的双向绑定会提供很好的体验。

Vue 属于后来者，它借鉴了 React 和 Angular 等其他优秀项目，在国内拉拢了一波人气，如果公司技术栈的是 Vue 的话可以学习。

sjhhjx0122

2022-03-17 13:40:18 +08:00

学 angular 啊，理念想通，入门快，学完 ng 就会 vue 了，差不多的

ahswch

2022-03-17 13:54:38 +08:00

fullstackopen （ react 全栈） vue 的话直接看文档撸

error523

2022-03-17 13:55:00 +08:00

css 试试 tailwind ？

gitdoit

2022-03-17 13:55:39 +08:00

我也是后端, 对前端感兴趣. 静下心来看个三天 css,只要不整花活,就足够支撑日常开发了. js 也是,有语言基础学起来很快; 框架我用的 vue,直接整最新的. 上慕课网上找了个项目跟着来一遍就差不多了

sinnosong1

2022-03-17 14:01:13 +08:00

@j4talias https://chinese.freecodecamp.org/learn ，把前端相关的撸完就差不多了。我也是后端目前已经在写前端部分的了。

AilF

2022-03-17 14:05:59 +08:00

🐴一个

dcsuibian

2022-03-17 14:07:30 +08:00

后端程序员，我的路线是：
阮一峰 ES5 、ES6 。Vue 全家桶视频。Node.js 。Webpack 。《精通 CSS 》。Ant Design Pro Vue 。React 。。。

yangzzzzzz

2022-03-17 14:10:57 +08:00

前端入门基础百度 “表严肃” ，实战时 vue 和 react 都行，vue 的话推荐直接学 vue3 吧

zhaol

2022-03-17 14:18:39 +08:00

别理楼上生态的，以你的需求，vue 和 react 都足够了。vue 反倒是全家桶比较简单，可以直接撸代码。react 还要学其他的概念，后端的话推荐 vue ，简单粗暴，容易理解

mxT52CRuqR6o5

2022-03-17 14:27:01 +08:00 via Android

熟悉 spring 的话可以去看看 angular ，不熟悉 spring 就去学 react/vue

murmur

2022-03-17 14:27:52 +08:00

什么叫生态，vue 不能干活么，前端的脸面是 css ，css 是要自己画出来的

你需要 rn ，那叫生态，大的组件都是纯 js 的，不存在 react 能干 vue 就干不了

sy20030260

2022-03-17 14:28:25 +08:00

我自己是 React ，因为油管上 React 的优质教程比 Vue 多一些，但其实入门的话资源都不少，区别不大。CSS 的话蛮推荐简单了解下之后直接上 Tailwind CSS 的，既可以避开一些新手不友好的 CSS 技术细节，但又不至于像 ant 这类组件库一样完全屏蔽了 CSS ，达不到学习目的

Dragonphy

2022-03-17 14:31:09 +08:00

Vue ，里面提到的学一下 https://www.v2ex.com/t/831969

murmur

2022-03-17 14:42:51 +08:00

@sy20030260 tailwindcss 是看上去美好用起来坑，你还要自己组合各种东西

btn-warning 、btn-success 和 btn color-green height-30 fontsize-14 哪个更友好，很明显前者语义性更强

既然学不会 css 就慢慢学，用组件自带的主题不一定好看，但是也不会太丑

zhwithsweet

2022-03-17 14:48:17 +08:00

你看看这楼上的，哪个不是前端高手，哪个不是行业专家？你一个后端学得过他们？学个锤子，不学了

sy20030260

2022-03-17 15:03:09 +08:00

@murmur 问题不是组件库好不好看，而是用 ant 这类组件库基本就屏蔽了 css 达不到学习目的。用 Tailwind 也可以直接抄别人写好的 UI ，不需要自己组合，而且根据 className 直接就可以知道对应的 native css 是怎样的，后面转 css 就容易多了。反正我自己用 ant 这类组件库是没搞懂 css ，而用 Tailwind 写了两三个小项目基本就知道 css 该咋写了。Tailwind 语义性确实是个问题，但更多影响的大项目的可维护性，对于新手学习来说没有太大影响

vsitebon

2022-03-17 15:27:11 +08:00

react 走一遍初始教程，然后就直接上手项目，项目中学习会快很多

dfkjgklfdjg

2022-03-17 15:27:30 +08:00

React 和 Vue 还是 NG 的抉择

如果有 Java 和 JS 的基础，你可以学 React 并没有那么麻烦，很快就可以理解上手。
如果想要所有的问题都有一个明确解的可以选择 Vue ，只需要记住一些 API 和语法糖即可。
NG 真的不怎么推荐，国内应用太少了解决问题老大难，没有多少人可以和你聊起来。

生态的问题其实很虚，React 是很活跃，但不是所有人都想要从脚手架到状态管理都要自己搞定或者去一个一个辨别是否好用。
Vue 看起来没有那么活跃，但是都给出了一个工具给你用，大部分的人都在维护那么几个官方库，并不用自己去找很多基础的东西，心智负担会很少，可以没有顾虑的使用，只是有些地方确实有点黑盒。

-----

CSS 的问题其实不是靠学，而是靠积累，多自己纯手撸一些 CodePen 上好看的样式持续一段时间就清楚了，
然后就是组合 css 所需要的脑洞了。

libook

2022-03-17 15:42:16 +08:00

看 MDN ，即便很多东西你都知道了，有些边边角角的你不知道的信息可能对你解决问题有很大帮助，建议认真看一看。
教程部分： https://developer.mozilla.org/zh-CN/docs/Web/Tutorials
Reference 部分：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

都看完之后，MDN 上其他主题可以按需来看。

框架可以随便挑一个看，因为很多东西都是相通的，求快就看 Vue ，中文文档写得很好。

CSS 样式框架有两种，一种是跟前端框架绑定在一起的如 Element 、Ant Design ；还有一种是无框架依赖的，可以看看 Bulma ，主要用的是 flex 布局。

liuw666

2022-03-17 16:23:33 +08:00 via iPhone

学 vue 概念的时间，react 都写完了

kidonng

2022-03-17 16:27:06 +08:00 via Android

前端框架推荐 Alpine.js ，可以说是“设计给后端”的框架，几乎无学习负担
CSS 框架自然是 Bootstrap 默秒全🐶

Terry05

2022-03-17 16:31:27 +08:00

不要吵了，不要吵了，学 Solid.js

10bkill1p

2022-03-17 16:34:45 +08:00

看到上面这么多人推框架，就没有人推荐 Vanilla JS 吗（狗头）

murmur

2022-03-17 16:38:01 +08:00

@liuw666 vue 的概念就是模板引擎，这玩意是个后端程序员都应该接触过，

if->v-if
for->v-for

这就是编程语言

还需要学的

到底是 v-if 好学，还是 useEffect 好学

usapla

2022-03-17 16:44:47 +08:00

@sinnosong1 #21 谢谢，已经收藏了

pengtdyd

2022-03-17 17:00:24 +08:00

一点前端基础都没有就推荐框架？？？我觉的先把基础学学吧

henryhu

2022-03-17 17:16:14 +08:00

没人提 css 的框架 Bulma ？

plzcomeon

2022-03-17 17:22:37 +08:00

学 PHP （手动狗头）

licoycn

2022-03-17 17:25:01 +08:00

还是先从基础学走，HTML 、CSS 、JavaScript ，等熟悉而后再慢慢接触 Vue 及 TypeScript 这一类。

看楼上大多数都说 CSS 很难，如果不是特别炫酷的效果，CSS 无非就是边距、边框、定位、层级、阴影、过渡等一些效果，语法都是固定的，基础的学会了再上手 Less 或 Sass 就会发现新大陆。

cr217

2022-03-17 17:25:23 +08:00

@murmur 比起 ref 、reactive 、toRefs 、toRef ，还是 useEffect 好学😂

WispZhan

2022-03-17 19:40:56 +08:00 via Android

Java or go 后端学前端，如果想系统性的，推荐先从 Angular 开始。
原因是知识点全，框架理念，逻辑概念类似。而且你不需要到处找你不熟悉的各种插件和组件。

你等把所有 Angular 概念吃透了，就可以安心折腾任何一个前端框架了

Envov

2022-03-17 19:42:55 +08:00

推荐后端学习前端必经路线：
1:学习 nodejs v14 和 npm 包管理工具，产出 [js 操作计算机文件] 、 [js 操作 excel 表格] 的小工具就可以结束了。这时候你需着重了解 commonJS 的模块化 js 概念
2:学习 webpack 4.x ，它使用 nodejs 给前端提供了强大的工程化能力，产出一个自定义打包工具就行
3:学习 vue.js,利用 webpack 产出一个脚手架
4:使用 vue-cli 脚手架

x86

2022-03-17 19:45:22 +08:00

标记下，css 和 js 头疼

cz5424

2022-03-17 19:56:49 +08:00 via iPhone

同后端，学了 vue2 ，表示 vue2 要过时，vue3 要重学，css 也没那么难，感觉 webpack 被 vue cli ，vite 代替，或者说隐藏了起来。另外，本人招前端的时候发现前端的简历都是会用 xxx 框架，xxx 组件，非常不解，有人解答吗

dNib9U2o8x

2022-03-17 20:14:34 +08:00

@sy20030260 tailwind 维护性还好，项目大了肯定要拆分组件的，里面不会有大量的 html, 基本组件本身的语义就够用了，如果觉的还不够，还有 @layer 呢

redtech

2022-03-17 20:25:40 +08:00

@cz5424 你一个后端面面前端这么卷了吗

BaiLinfeng

2022-03-17 20:59:06 +08:00

我是比较喜欢看视频，不喜欢看文档，总感觉文档是外来语

P233

2022-03-17 21:09:41 +08:00

给自己打个广告 /t/841029

ruoxie

2022-03-17 21:12:01 +08:00

到底 css 难在哪？

cz5424

2022-03-17 21:26:11 +08:00 via iPhone

@redtech 不是全栈是全干工程师了

v2eb

2022-03-17 21:37:12 +08:00

https://web.qianguyihao.com/
https://v3.cn.vuejs.org/
css 布局

yunyuyuan

2022-03-17 22:25:53 +08:00

框架的话，建议 vue3 ，vue3 挺灵活的，这有个视频详细介绍了 vue3 的思维 https://www.bilibili.com/video/BV1rC4y187Vw

waltcow

2022-03-17 22:50:24 +08:00

tailwindcss/windicss + react

qqqqqcy

2022-03-18 00:53:26 +08:00

5 年大厂前端发言，当然是 vue 好，react 概念太多了，如果要面试装逼或者造轮子才推荐 react ，非前端学这个纯粹找虐

a132811

2022-03-18 01:12:45 +08:00

前端工程的概念很多都麻烦要死，还不通用，
webpack 什么的概念太多了，哪年就淘汰了，增加不少调试的复杂性，调试 async-wait 编译后的代码我就遇到不少断点错误的问题。

不过我想说基于 deno 的框架可能是未来比如 https://alephjs.org/ 看起来还不错

不过现在 deno 没有任何生态可言，千万别用于生产。目前适合喜欢造轮子的把玩

anguiao

2022-03-18 01:21:24 +08:00

@pengtdyd JS 的基础，学过其他语言的没必要再仔细看，其他的坑可以以后再踩。

shuimugan

2022-03-18 02:32:47 +08:00

Angular 简单啊，一两天上手不是什么问题，还带 AOT ，在我看来这才是真正的企业级框架。
看一下官方一个小案例 https://angular.io/generated/live-examples/reactive-forms/stackblitz.html 代码结构工整又符合直觉。

再看看隔壁 React 的帖子 https://v2ex.com/t/840200 一个发布了 9 年的框架，在 2022 年状态管理这个问题上，居然有 20 个库在解决，不觉得很搞笑吗？

当然最简单的还要数 amis ，纯 json 定义页面，非常无脑，做东西贼快。

wangyzj

2022-03-18 09:12:51 +08:00

永远 vue2

phinex

2022-03-18 09:27:54 +08:00

这是引战啊一二楼要干起来了

GoogleJP

2022-03-18 09:34:27 +08:00

React

Daiwf

2022-03-18 09:58:33 +08:00

阮一峰的博客这么丑。。他主要是靠内容。只要内容写的好。哪怕直接 html 里纯文字也有人抢着看。

liuw666

2022-03-18 10:56:20 +08:00 via iPhone

@murmur #40 模版语法我不认为是个后端程序员都学过。如果只说写页面，react 用 jsx 随便写个方法就是一个组件，而 vue 写组件就麻烦些，要写模版，模版语法个人觉得不好用，使用组件的时候还得注册一下。重要的是 ts 在 react 支持的好，写 java 的人用 ts 肯定写的更舒服。

要说 v-if 的话，我只能说 jsx 的判断比 v-if 写的顺手 🤦‍♂️ useEffect 就是生命周期的问题，不管哪个前端框架都会遇到吧

这些东西都太主观了，要学习的人不一定就都认为这个东西好学，大家对同一个概念的理解是不同。反正我是觉得 react 上 ts 支持的好，更自由，写起来方便，虽然默认支持的功能没 vue 多…。没有 ts 我是不想写 js 代码的……

ZiLong

2022-03-18 11:03:57 +08:00

看了回答，卑微后端表示还是不学了

NCry

2022-03-18 11:38:29 +08:00

没有任何经验的话肯定是先从基础开始的，就算是学 Java 也不大可能一上手就推荐 Spring 吧。

murmur

2022-03-18 11:52:23 +08:00

@ruoxie 面试，css 有 n 种方法，理论上你学 1 种兼容性最好的就可以，但是面试希望你会 n 种，还知道最炫酷的那种，比如别的要 4 行，你在 chrome 里 1 行就可以

WhateverYouLike

2022-03-18 12:48:06 +08:00 via Android

@murmur tailwindcss 也可以封装组件呀，最后封一个 btn 出来就可以

EPr2hh6LADQWqRVH

2022-03-18 12:56:47 +08:00

百家争鸣，谁都不行

bobo2

2022-03-18 13:32:03 +08:00

大佬不要学了，给我们前端留条生路吧>_<

laravel

2022-03-18 15:40:59 +08:00

依次学 html css (后端来说主要就是各种布局 flex 布局 grid 布局，动画这些锦上添花吧) javascript （这个才是主要的）最好学学 javascript 设计模式
然后 nodejs webpack vue/react 挑一个，然后学 vue/react 生态系统里常用的东西比如 vue-router 、react-router-dom 、vuex 、redux 这些
然后学 ui 框架，Vue 的 element-ui ，react 的 antd 这种的

MrDavidJones

2022-03-18 20:04:20 +08:00 via iPhone

别学了互联网都别碰

bthulu

2022-03-19 09:52:07 +08:00

react 自身是简单, 但是 react 你想做点像样的项目, 那 react 全家桶里的 redux 啥的, 光概念就能绕晕你. 如果只是学着玩不打算做项目或者打算学个很长时间,那就 react. 想短时间学个七七八八拿来做项目, 那就 vue.