为什么学习前端，一动手写代码就总是报错？各个环节都可能报错

[songteng0604]

最近学习了 vue 和 webpack ，自己跟着网课视频写代码，依然是一动手就错，根据报错信息搜索并解决太麻烦了。10 分钟的网课，看完，写代码，找解决方法，再整理到笔记，甚至要一个多小时。各种版本问题，依赖问题，语法问题等，甚至库文件安装，环境配置等，每个环节都可能报错，太麻烦了，而且网上搜索问题找到的解决方法多数都是当前不能用的。

[gant]

前端是这样的，去学 rust 吧。

[july1995]

太正常了。前端变化太快了。 假设，视频中安装了 webpak ， 在视频录制的时间点，默认安装的最新版是 4.xx 。但是你现在安装，默认安装的是 5.xx ，一堆问题就来了。 如果你发现了这个问题 ，你也安装了 4.xx 。那么你以后安装的所有插件都要用去匹配 4.xx 的 webpack 。而且，基本上你的每一个插件都要去找对应的版本。因为默认安装的最新版基本上都不兼容。 比如 postcss 这个插件，你找到了 postcss 对应的 4.x 的 webpack 的兼容版本，那么 postcss 的插件你也需要去找对应 postcss 兼容版本。关键你根本不知道某个 postcss 兼容的插件版本是什么。 只能一个一个插件去看文档。 基本上你直接安装的默认版本，都有兼容性问题。 十分搞人心态。 最省事的就是找到源代码中的 package.json 一把梭。 自己配置，不停的有报错。

[imv2er]

前端这个东西就别系统的学。工作用到现学现用就成。

[huijiewei]

npm create vite@latest

不要看什么教程，直接啃官方文档。遇到不会的问 chatgpt 或者关键词搜索

[songteng0604]

我今晚已经浪费了大约 4 个多小时来学习如何在 vue3 中使用 element-ui ，先是使用 element-ui 时报错，查询后得知这个只能用作 vue2.x ，然后改用 element-plus ，这个适用于 vue3.x ，然后通过 vue ui 创建项目，并安装 element-plus 插件，能运行程序，但只要一改代码就编译报错。又通过官网的说明的 npm 方式安装，结果报了一大推的 npm err 和 warn ，再使用官网推荐的第二种方式 yarn 来安装，又发现 win10 的 powershell 的执行策略需要修改，改了之后再执行 yarn 命令，又说某个文件夹已存在。。。。反正是正式写代码的事一点都没干，时间全浪费在配置环境了。。。。心烦气躁，就差摔鼠标了。

[cookii]

问 GPT 或者 bing 解决这种问题很快

[gant]

我是不喜欢前端的，app 我用 flutter 就行了。

[n18255447846]

学任何语言配置环境都是个门槛。你要用别人的框架当然要查文档了。

npm install 的时候注意看输出，npm 会检查每个包的依赖问题，webpack@5 装一些 webpack-plugin-xxx@4 版本的插件安装是不会通过的，包括你所说的 vue3+element-ui

[n18255447846]

关于 npm 包你还没碰到更恶心的情况😂 有的包用 c++实现了部分功能，得 node-gyp 编译，如果安装时没有适合你电脑的预编译包的时候，这时候安装就得在你本地编译，，呵呵，这编译环境

[kdwnil]

我觉得一方面是前端的东西更新造成了前后不兼容的问题，另一方面是文档作者会按照自己设想的流程写文档，可能没考虑（又或者是根本不会想到）到不同用户的环境差异带来的奇奇怪怪的问题。（个人认为 element-plus 的文档里面有些内容就是在讲天书，看得云里雾里的）

另外我就在用 vue3 + element-plus ，并没有遇到 op 提到的问题。

[Light1226]

@july1995 看你的描述就觉得头大

[Chad0000]

@n18255447846
你不是一个人

[kingfalse]

vaadin 一把梭子写写得了

[IsaacYoung]

前端是这样的

[chuck1in]

@songteng0604 是的，前端就是面相配置编程。
你用的什么代码检查的插件呢现在？

[duke807]

angular 1 、2 一路用过来
现在我只用 vanlina-js.com

[duke807]

@duke807

打错，是 http://vanilla-js.com/

[duke807]

即便如此，上次我打包 ImageMagick 的 convert 命令到 wasm 还是花了一点点时间，一开始参考一个开源库，他搞了一个 docker 来编译，我参考他的指导，操作了半天，各种报错

后来，我直接拿 ImageMagick 上游源码，不用 docker 直接编译，一下子就成功了

[murmur]

copilot 走起，造轮子你是造不过 AI 的，学前端某些时候就是不知道轮子再造轮子，也就写业务比 AI 好点

[0o0O0o0O0o]

比如 npm init vue@latest ，扩展、lint 、测试之类的都准备好了，自己从零开始感觉确实麻烦，要了解学习太多东西了。

比如可以试试从 element 的 https://github.com/element-plus/element-plus-vite-starter 开始？

[yaphets666]

建议转行

[blessyou]

👀 这种破事你学完之后工作中超多。

[gp0119]

时间充裕的情况下，我觉得这恰好是一种学习的过程，如果你想快速出效果，可以用脚手架

[me404]

初学者很需要 chatgpt

[fzls]

学习就是这样一个过程啊，不断试错然后增长经验，从而不断掌握更多的东西

[awinds]

js 换成包后变成那么兼容了，还是之前 es5 时代舒服

[sky857412]

如果只是学习使用，找个现成的脚手架。如果要自己去搭建脚手架，这不可避免

[zlhsvc]

别说写代码了，我之前现成的代码编译下都能出各种各样的问题，是真的脑壳疼，之前 JQ 时代就没这些问题

[ljsh093]

@duke807 #17 我寻思哪里有什么香草 js ，直接看示例寻思这不就是原生 js 吗，往上看 no code at all 才懂

[webcape233]

换个思路 ， 增加 ai 取代的难度，版本一变 ai 机器直接冒烟

[horizon]

学 nextjs

[Rache1]

@n18255447846

> 关于 npm 包你还没碰到更恶心的情况😂 有的包用 c++实现了部分功能，得 node-gyp 编译

node-sass： 没错，正是在下

[xiaoGeZB]

sass 确实恶心

[marcong95]

有 vite 的当下，别碰 webpack ，会变得不幸

如果 npm 报各种 error 的话，有可能是网络问题，可以先设置淘宝源，但是偶然也会出问题。这时候可能就要设回官方源然后 npm set proxy/https-proxy ，但是 set proxy 也可能有各种奇奇怪怪的脚本不听你设置去直连，这种脚本基本上就是造成问题的罪魁祸首了

[july1995]

@Rache1 这玩意确实让我猝不及防，第一次负责项目基建。就用了这个玩意。 本地调试的都很完美。 结果一上构建机崩了。 这玩意用到了 nodegyp ，然后 nodegyp 又要 python 。 构建机又是 docker 环境，不让私自装软件，也没有 root 权限，也没外网。 第一次搞基建，本来就心里没底，这下搞得我彻底慌了。

[n18255447846]

@marcong95 vite 和 cra 都是基于 webpack 。。。

设置 proxy 和第三方源可以解决 npm 的下载问题，但解决不了 postinstall 下预编译文件，这些包读不到 npm 的 proxy 配置或者根本不支持 proxy ，例如 sass/electron ，这种情况得看文档了，大部分包提供了环境变量配置下载源，可以直接写到 npmrc 里

[marcong95]

@n18255447846 #36 vite 现在应该基于 rollup/esbuild 了吧，最新的 cra 我了解不多，好像也有 vite/snowpack 版本的 cra 来着。

sass/electron 一类的环境变量配置我之前翻文档好像没翻到，反正我现在直接用 Clash 的 TUN Mode ，感觉省事一点

[chuck1in]

@july1995 说真的框架越简单越好，你也啥要选哪个东西？

[july1995]

@chuck1in 主要看中了 scss 的嵌套功能，嵌套写起来可以很好的看出来层级关系。 嵌套写法的最外面约定好一个唯一的类名， 也可以避免一些类名冲突问题。