后端学前端的无力感

[kevinguoCN]

学习路线：
1.学习 vue3 + mitt + pinia + vue-router + vite
2.学习 promise,async await 的用法
3.学习 axios
4.学习 TS 的基本用法
然后尝试做了一些项目，发现遇到的问题特别多。
1. 前端开发遇到的各种版本问题，node 版本，vite 版本， 各种库的版本
2. vue2 和 vue3 的 api 的改变， 会导致网上一些教程不匹配
3. eslint 和 prretier 的一些配置问题
4. “@” 别名的设置 webstrom 不停的报错飘红
5. ts 的类型检查， 不停的类型提示飘红。
6. css 的一些难以发现的问题，文本框输入框的默认尺寸会导致浏览器样式问题。

[chloerei]

建议看 DHH 去年的演讲：no build

技术发展不应该一直叠加复杂度，随着发展回到平台原生是更好选择。

[zjh7890]

为什么要学，用 ChatGPT 一把梭，能看懂代码不就行了吗？

[angrylid]

郑重向你推荐一个叫做 Blazor 的玩意

[wunonglin]

你一上来就来了个大的，那可不是么。

反对 1L 说的，工具的出现是需求需要，如果不需要可以不引入

同时建议 lz 试试 angular ，会有新发现

[Philippa]

学 react ，都是 javascript ，我觉得 vue 很难学，不知道为什么。

[layden]

这几个技术栈全堆一起学肯定头大，更别说你还加了 ts ，它的类型检查如果不熟悉的话，那必是一写一停顿。

不过重点还是理解思路，还是建议尽量明白透彻一个技术栈之后，再进行下一个的学习。不然的话可能会没完没了地在几个技术栈之间来回跳，这会非常难受。

[molvqingtai]

一上来不要整全套，eslint 配置这些没有什么标准，特别是现在刚升级到 eslint8 ，全是兼容性问题，专业前端都要搞好久，一开始学习专注写代码就行了

[molvqingtai]

eslint 9

[kevinguoCN]

@wunonglin 就是写项目练手，发现 需要配 ts ，然后就去学 ts ，学完发现有需要 eslint preitter 然后就去看这个。 各种该问题，学一下 停一下的。

[kevinguoCN]

@wunonglin 市面上还是更多的用 vue 或者 react 的吧。angular 感觉用的 不是很多。

[wunonglin]

@kevinguoCN #10

3 个我都用，说白了还是根据不同的场景用不同的工具。对于你入门的，还是写 java 的，你还是先试试再回来，不要感觉

[kevinguoCN]

感谢
@wunonglin

[JetMac]

你这弯路走得有点多，react.dev , nextjs.org 看这两个就行了。ESLint 、Prretier 这些根本不需要你配置，nextjs 脚手架都搭配好了，你只需写业务就行。

[kevinguoCN]

@molvqingtai 另外问一下 npm 的官方库地址 是 npmjs.com 吗？ 国内是打不开了吗？

[cmdOptionKana]

没看出来什么无力感，这不是学的挺正常的吗？

[kevinguoCN]

@JetMac 这是重新在学 react 啊？刚把 vue3 看完尝试做点项目然后就屡屡碰壁。

[iorilu]

别学了， 要么你看你想搞那个网站， 找个类似的开源的直接改

要么就用 cursor 等， 让 ai 搞， 你改改细节完事

[kevinguoCN]

@iorilu 开源的更看不懂，下载的 vue-admin 后台管理系统的 开源项目，里面各种写法 看不懂怎么去加载组件，怎么去控制页面和按钮权限的。

[shizhibuyu2023]

eslint 、prretier 用默认配置，ts 砍掉，这些都不是必须的，等你上手企业级项目，才考虑这些东西吧

[molvqingtai]

@kevinguoCN #14 对的，很少打开，一般找项目都是在 github 上找，然后安装就是了

[dcsuibian]

看起来你没有系统学过 js 啊，这样真的能看懂 vue 么

[abcbuzhiming]

1-5 这些问题都不是啥问题，基本都是你搜搜资料都能解决的，本质都没有超脱传统编程的套路。

真正的麻烦 CSS 你放在最后一个了，其实这才是前端的叹息之墙。虽然这东西看起来简单，大部分人也用不了高深的特性，但是这个玩意出问题的时候，你是没有办法用传统编程思维去解决的，这才是前端真正的“房间里的大象”，不可解的问题。

[abccccabc]

前端最讨厌的就是编译，搞的像后端一样。直接把我给劝退了。挺讨厌编译的。

想当初，在 512M 内存的机器上编译 php5.3 ，那真叫一个酸爽。

[zeromake]

有兴趣可以看看我这篇不使用任何打包方案的 preact 博文： https://blog.zeromake.com/pages/not-pack-tool-use-react/

[wu67]

直接把 ts 和 vue3 从你的计划里剔除，从 vue2 开始，你就会直接从困难模式降级到简单模式了

[BeautifulSoap]

我建议 lz 先学 js,ts 然后试着用 ts 配合一些框架开发下 node 后端联，这样正好就是你最熟悉的领域

等你这方面熟悉了再转前端会好点

[jiayouzl]

既然会后端就直接 Mvc 模式开发不香吗?vue3 就是前后端分离设计的,我都会但最后还是直接 Mvc 模式开发,效率杠杠的!

[Felldeadbird]

你遇到的问题都是 VUE 2 和 3 的版本过渡历史问题。这点和当年 py2 到 3 一样情况。但是我觉得 vue 比 py 严重好多。因为好多教程都是 2 的，然后语法会混杂在选项式和组合式，然后部分代码优势选项式。

1.我推荐你的开发路线：vue3 选项式 + route + axios 。 先把东西跑起来再说。遇到问题就问 AI 。

2. 我在使用 VUE 过程心得就是，组件化是 VUE 的核心，掌握组件的参数传递。你就已经掌握了 VUE 了。

3. vue route 的话，你写过 php laravle 或者 go gin 。你就明白了，这玩意就是定义路由，打开页面（组件）。APP.vue 作为入口，layout 加载你对应的路由页面。

4. axios 这玩意没啥好说的。你 jq 年代没用过$.ajax 这些吗？写法都是一样的。xhr 你会吧？ promise,async await 可以先忽略。axios 默认就是异步。等你需要 promise,async await ，你已经掌握了 axios 了。

5. css 问题，多练。less ，sass 这些随便学一个这两个玩意就是给你把 CSS 结构化。css 现在核心就是 flex 和 gird ，多写你就懂了。

[Felldeadbird]

再补充一点，去了解一下 vue 声明周期。 一个 vue 文件，常用就是 data, watch ,mounted ，和 method 。data 就是定义模板变量，watch 就是你遇到数据变化，页面没跟着变就需要考虑了。mounted 就是页面加载时，你要先把后端数据请求好。method 就是 页面所有逻辑的方法。

[aloxaf]

是这样的，学前端时最让我头疼的，一是各类工具和库都没有大一统，不知道究竟选哪个好；二是 css ，这个我是真的真是怕

后面放弃了，改用 flutter 了（先前学的是 react ），反正只是自己的业余爱好，有个能 work 的 GUI 就行。
不过白嫖 cf worker 的过程中渐渐发现 ts 确实挺香的，也试着在后端引入，终于是慢慢理清了这套工具链……

顺便吐槽一下，我个人认为上来就让初学者用模板创建项目真的不好。你这模板老手看不上，新手看了又一脸懵逼，就不能先用最少的依赖让项目跑起来，后面再教人引入其他依赖么。

[crackidz]

CSS 是绕不过的东西，但是 TailwindCSS 给了你一种很方便的使用方式，结合各种 LLM ，突然就变得很好用了，很多时候你只需要结合 AI 生成的代码调整一下就足够了。

至于 Vue 之类的玩意，如果你觉得学的很复杂，要么考虑一下 Vanilla js ？生态这玩意刚开始上手很复杂也很正常，前端娱乐圈是这样的。

使用了 VanillaJS 之后网上的很多资料就可以用了（毕竟几十年了），如果希望更加复杂的页面模块化设计，htmx 之类的框架可以很容易的和后端 HTML 引擎合作，你的工作模式会和原有的后端模式区别不大。等你更熟悉之后再往 Vue/React 之类的框架迁移也不晚。

[siweipancc]

……从 angular 过来 vue 的觉得这里缺那里也缺囧
最缺的还是官网的入门项目，hero 教程太经典了

[maxwellz]

@kevinguoCN #18
看不懂就说明你可能连 vue 和 js 的基础都还没有学会，建议过一遍 js 基础和 vue 的官方教程

[dingyaguang117]

走上坡路总是难的

[cookii]

坚持下去就会了，学东西不踩坑只有两种可能
1 太简单
2 没深入学进去

[wandererchenxyz]

主要学完前端，在已有项目里写东西没多大压力（有 UED ），让自己从头搭建一个前端项目，或者无 ued 开发，感觉整个人都不知道做啥了，蒙圈

[asuraa]

js 啥的都简单，我觉得最难的是 css

[sir283]

前端是这样抽象的，最好系统性学习一下，从头到尾那种，因为有一些坑很恶心，比如明明编译运行都没有任何错误，浏览器控制台里面也是没有任何错误，但是就是加载不出来数据或者页面，有可能是你字母拼错了，但是 ide 跟控制台也不会提示错误信息，这是非常坑的。我之前刚开始学，就遇到过这个问题，排查了一天，最后一个一个字母对照，才发现的。

[jqtmviyu]

我觉得前端学后端也挺无力的呀

特别是 java 的代码, 类套类, 套得头晕.

[hedwi]

后端学 angular 简单，另外就是 css 用 flex

[shintendo]

首先，去掉 TS ，难度降低一半以上
我在对其它技术栈很熟悉的情况下，第一次上 TS 都是一写一停顿，更别说你这一大堆一起学了

[shintendo]

不管 Vue 还是 React ，都是对三件套的封装，如果你本身三件套就没掌握，那肯定困难。我记得 Vue 的文档一开头就有提示，需要中级前端基础为前提。

所谓“React 只有 JavaScript”也不用当真，这个只是说它 API 少一点，该学 HTML 和 CSS 一样要学的。

我的建议：去掉 TS 只用 JS ，Vue 的文档拨到 Options API ，CSS 用 flex 一把梭，搜索引擎查问题筛选一年内的。

[glcolof]

可能先学会用原始的 HTML+JS+CSS 制作前端页面更重要一些。

[jancing]

C# 后端，写 Angular 前端，感觉前段技能是白送的，没啥负担就上手工作了

[default996]

我最开始学习的是 angularJs ，然后是 Angualr （目前主要用的），后面开发小程序就顺手学了 Vue2 ，后面又用到 taro 就学了 Vue3 …… 一直想学 react 但就是没有场景能用到，所以我现在还是不会 react 。
你的学习路线感觉有点太深了
1 。vue3+ vute-router —— 应该就可以啦，mitt + pinia + vite 新手应该不需要吧（我还没去学过）
2 。promise, async, await —— 应该也不需要吧
3 。axios —— 这个就是 http 请求呀，新手自己封装一下，至多设置个 token 之类的认证应该就够用了呀
4 。TS 基本用法 —— 这个要的

遇到飘红的，我直接在 eslint 里面各种 disabled,close 关掉就完事了

[NoOneNoBody]

前后端最重要的思维方式不同
后端是请求驱动，前端是事件推动，事件多样性是后端不具备的
input --> compute --> output
后端是 compute 复杂，大量线程进程控制，逻辑分支，input/output 主要是类型适应
前端是 input 复杂，且面向的是用户，也就是人，行为难以预测，只有限定
output 是展示，也是要面对人，合理的工业设计很重要

例如，一个 click 事件衍生出来包括 单击、双击、按下、弹起、左右键、键盘+click……等等，甚至不可预料的手抖引发单击变双击、点击变拖动……做事件响应时，除了响应，可能还要做排除，不然“误操作”引发信号错误就麻烦了

[yooomu]

我一个后端觉得前端最难的就是 CSS ，始终学不明白，其他都没什么

[GoNtte]

刚开始就用官方提供的脚手架搭起来，或者把 ts 去掉也行

[chihiro2014]

学 angular ，一把梭，完美无视这些问题

[dreamusername]

我是一边写项目一边学，用 cursor 写，代码有问题 cursor 解决不了的时候，用 chatgpt o1 分析，目前还算顺利，这样优缺点都比较明显，优点是产出明显容易坚持，缺点是东拼西凑效率低下。

[Dogtler]

@wu67 拉倒吧，我是 vue2 开始学的 至今没学会。。。布局和 CSS

[zywscq]

找个小项目熟悉下各种框架的使用，一段时间后就会发现其实最费时间的是调 css

[kevinguoCN]

@abcbuzhiming 5 对我来说其实最不重要， 我大部分写的还是 后台管理系统， 总之就是能用就行， 可能写的页面就是为了展示，并不是有多么好的用户体验。或者说也不考虑用户体验。 这部分东西其实感觉用现成的组件库，css 主要能用的就是 调一下布局，调字体颜色啥的。hhhh

[kevinguoCN]

@zywscq 这个确实也是。 我主要是写后台管理系统， 各种 css 其实也比较模板化。

[TimPeake]

认真看了下 ，你说的这些都是工具链而已....甚至跟纯前端没什么关系。就好比你骑车 咋地，没骑行服，没锁鞋是骑不了？个人建议： 去掉那些所有没用的东西， 连路由/状态管理器都不要的那种，开始学，直接 html 页面引入 vue 都行。

[tonytonychopper]

vue 挺好用的，但是如果频繁切换项目的话，vue 那些语法会忘的很快

[kevinguoCN]

@tonytonychopper 因为我还是做后端比较多，前端是在企业里没有办法，必须接手一些前端项目 前后端一起。 所以对前端的哪些什么复杂的动画没有过多要求，所以对工具的要求大于对原理的要求。

[tonytonychopper]

@kevinguoCN 不是主力的话那确实不用要求太多，只是写些简单的后台项目，什么技术栈都可以用

[guili618]

@abcbuzhiming 赞同，CSS 是这里面最难得

[daiisdai]

版本问题应该看看 Android ，要多恶心有多恶心

[Bingchunmoli]

@wunonglin 刚入行的时候同事用的 angular 看着写着好爽 mvc 挺适合后端用户

[lesismal]

原来前端才是 "学无止境"

[chouvel]

关于 css：css 的盒子模型； css 脱离文档流的几种方法和实际应用场景；遇到布局直接 flex 梭哈就行，搜索黑马或者别的讲解，flexbox 大概两个小时就把各种属性和使用场景讲清楚了。

[Er1c0]

前端真是 shit ，远离前端

[luvxy]

很多配置性的东西不要学，没吊用，那是一帮闲人整出来的东西，对项目的帮助是微乎其微

[meteor957]

前端学后端的无力感又有哪些

[sead]

@kevinguoCN 硬着头皮撸就行了，今年入坑的 ts ，开始还是有点痛苦的，习惯之后，没有 ts 会很不习惯😖

[kevinguoCN]

@sead 关键是 自己一个人硬着头皮撸 效率太低了。。。

[kevinguoCN]

@luvxy 配置问题大部分都是 cv 去解决。hh

[akimisen]

五年前我跟你一样头疼，但是现在，上 Claude 啊，先让他给你一个项目结构和 hello world 代码然后慢慢加组件

[mascteen]

对于你这种情况推荐项目驱动学习

[wangshuo6]

建议写 react ，新手先写 js

[wangshuo6]

直接看 mit weblab 课，你说的很多东西，作为新手都没必要引入，什么 promise 啥的，课上只用了两页 ppt 就说完了，只需要照着写就行，还有不推荐 vue ，

[likeman]

建议 react ，vue 反正我学不懂，react 简单的多

[kevinguoCN]

@likeman vue 学了， 现在开始看 react 。 在看 b 站尚硅谷的 react 课程。

[likeman]

@kevinguoCN https://www.roadtoreact.com/ 。建议直接看这本书，不要看视频，自己跟着写一遍，然后看完这本书后再去官网把几个常用的 hook 再看下，基本就能上手了。我反正从学到用就 5 天😂

[xwayway]

@kevinguoCN #53 同后端我只写过 jq 和 vue2 的前段到了 vue3 +ts 我就不跟了，浪费精力，我现在就用 amis

[kevinguoCN]

@wangshuo6 最近几天一直再看 react ， 发现一个问题就是。react 的版本问题也很严重。 教程好像开始就是 15 版本，然后 16 17 18 并存，react-router-dom 的 5 和 6 的版本 API 变化也确实挺大的。16 里面 类组件 ，到 18 里面又开始推荐函数组件和 hook 的组合？ 所以也挺迷的。 学的乱乱的。

[kevinguoCN]

@xwayway 可是 vue3 +ts 是现在的前端主流啊。 完全不能保证自己工作不接收 v3+ts 的内容。

[zbowen66]

axios 一个请求库有啥好学的，浏览器都自带 fetch 了

[kqz901002]

@angrylid #3 哈哈 C#.NET 统一全球

[xwayway]

@kevinguoCN 总不可能让你后端从头到尾搭框架啊，大致了解下，能写点 crud 页面就行了

[wangshuo6]

@kevinguoCN 有这个问题说明你教程看错了，为啥要看 react15 和类组件，router 直接用 6 ，现在函数组件才是主流

[wangshuo6]

@kevinguoCN https://weblab.mit.edu/schedule/ 别看国内的教程了，他们故意吧简单问题搞复杂，到 mit 这个里边就看 react 那两个 ppt ，或者直接看他的 github 仓库，模仿着写就是了，学个锤子

[ddpyjqtd]

如果不是为了专门的转前端岗位，就别学前端了。

要知道，后端的 Java 体系才是真正的庞大。 我 10 多年的 Java 后端经验，然后没怎么弄过前端，现在开发系统，去年是用 chatGPT ， 后面换了 github complot , 然后现在用上了 cursor ， 最近累计开发了 2 个前端项目了， 功能都实现了， 但实际上我也不知道前端技术用了哪些。

我只知道有什么问题，大概怎么问 AI ，然后怎么选择性的听 AI 的答案就可以了，丝毫不影响我实现功能。

[0xD800]

我也是后端，以前学前端最大的阻力是，上次 npm install 还正常，怎么删除后重新 install 就报错了呢，被 node-sass 害惨了。现在 vue3 用 vite ，css 直接用原生的别用那些 less scss ，开发起来还是很轻松的，慢慢来。

[kevinguoCN]

@0xD800 less 和 scss 几乎不用。 简单看了一下 webpack 或者 vite 的教程 基本知道是什么设置。

[075054hzj]

@chloerei 我失业 3 年没有一个超过半年工作 wx 号 strip5

[twig]

我前端学前端都有极大的无力感。

[twig]

@zbowen66 套在 react-query 下面其实还挺省事的。

[twig]

@zjh7890 还真不太行……因为前端各种东西叠床架屋太多了，很多概念不懂的话，都不知道怎么问 ChatGPT 。

[zbowen66]

@twig #89 react hooks 的优势跟一个请求库有毛关系

[boatrain1111]

太杂了，我也学得头疼

[unco020511]

在这里没人推荐 vue,哈哈哈

[sky3hao]

前端不值得学

[twig]

@zbowen66 你要是觉得没关系，那就没关系吧……

[fangxisama]

后端 Java ，前端学的 TS 和 React+NextJS ，加上 AI 。一路绿灯，嘎嘎爽。

[Dimen61]

也是后端学前端，和上面的同学一样感觉最难的部分是 css ，有木有人教教咋学 css 啊

[gesse]

要不先看看最基础的？
《 JavaScript 秘密花园》
https://shamansir.github.io/JavaScript-Garden/zh/

[deepshe]

@kevinguoCN 看不懂怎么去控制页面和按钮权限的，其实可以找个 vue-admin 有文档的框架，先看框架文档，文档过一遍后再针对看代码会好很多