V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
songteng0604
V2EX  ›  问与答

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

  •  
  •   songteng0604 · 2023-04-10 21:50:40 +08:00 · 2626 次点击
    这是一个创建于 577 天前的主题,其中的信息可能已经有所发展或是发生改变。
    最近学习了 vue 和 webpack ,自己跟着网课视频写代码,依然是一动手就错,根据报错信息搜索并解决太麻烦了。10 分钟的网课,看完,写代码,找解决方法,再整理到笔记,甚至要一个多小时。各种版本问题,依赖问题,语法问题等,甚至库文件安装,环境配置等,每个环节都可能报错,太麻烦了,而且网上搜索问题找到的解决方法多数都是当前不能用的。
    39 条回复    2023-04-12 08:14:21 +08:00
    gant
        1
    gant  
       2023-04-10 21:55:28 +08:00 via Android
    前端是这样的,去学 rust 吧。
    july1995
        2
    july1995  
       2023-04-10 22:46:39 +08:00 via Android   ❤️ 1
    太正常了。前端变化太快了。 假设,视频中安装了 webpak , 在视频录制的时间点,默认安装的最新版是 4.xx 。但是你现在安装,默认安装的是 5.xx ,一堆问题就来了。 如果你发现了这个问题 ,你也安装了 4.xx 。那么你以后安装的所有插件都要用去匹配 4.xx 的 webpack 。而且,基本上你的每一个插件都要去找对应的版本。因为默认安装的最新版基本上都不兼容。 比如 postcss 这个插件,你找到了 postcss 对应的 4.x 的 webpack 的兼容版本,那么 postcss 的插件你也需要去找对应 postcss 兼容版本。关键你根本不知道某个 postcss 兼容的插件版本是什么。 只能一个一个插件去看文档。 基本上你直接安装的默认版本,都有兼容性问题。 十分搞人心态。 最省事的就是找到源代码中的 package.json 一把梭。 自己配置,不停的有报错。
    imv2er
        3
    imv2er  
       2023-04-10 22:52:12 +08:00   ❤️ 1
    前端这个东西就别系统的学。工作用到现学现用就成。
    huijiewei
        4
    huijiewei  
       2023-04-10 22:59:04 +08:00
    npm create vite@latest

    不要看什么教程,直接啃官方文档。遇到不会的问 chatgpt 或者关键词搜索
    songteng0604
        5
    songteng0604  
    OP
       2023-04-10 23:03:19 +08:00
    我今晚已经浪费了大约 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
        6
    cookii  
       2023-04-10 23:21:43 +08:00 via Android
    问 GPT 或者 bing 解决这种问题很快
    gant
        7
    gant  
       2023-04-10 23:28:24 +08:00 via Android
    我是不喜欢前端的,app 我用 flutter 就行了。
    n18255447846
        8
    n18255447846  
       2023-04-11 00:28:10 +08:00   ❤️ 2
    学任何语言配置环境都是个门槛。你要用别人的框架当然要查文档了。

    npm install 的时候注意看输出,npm 会检查每个包的依赖问题,webpack@5 装一些 webpack-plugin-xxx@4 版本的插件安装是不会通过的,包括你所说的 vue3+element-ui
    n18255447846
        9
    n18255447846  
       2023-04-11 00:32:33 +08:00
    关于 npm 包你还没碰到更恶心的情况😂 有的包用 c++实现了部分功能,得 node-gyp 编译,如果安装时没有适合你电脑的预编译包的时候,这时候安装就得在你本地编译,,呵呵,这编译环境
    kdwnil
        10
    kdwnil  
       2023-04-11 02:58:28 +08:00 via Android
    我觉得一方面是前端的东西更新造成了前后不兼容的问题,另一方面是文档作者会按照自己设想的流程写文档,可能没考虑(又或者是根本不会想到)到不同用户的环境差异带来的奇奇怪怪的问题。(个人认为 element-plus 的文档里面有些内容就是在讲天书,看得云里雾里的)

    另外我就在用 vue3 + element-plus ,并没有遇到 op 提到的问题。
    Light1226
        11
    Light1226  
       2023-04-11 05:15:46 +08:00
    @july1995 看你的描述就觉得头大
    Chad0000
        12
    Chad0000  
       2023-04-11 05:27:00 +08:00 via iPhone
    @n18255447846
    你不是一个人
    kingfalse
        13
    kingfalse  
       2023-04-11 05:57:25 +08:00 via Android
    vaadin 一把梭子写写得了
    IsaacYoung
        14
    IsaacYoung  
       2023-04-11 07:24:10 +08:00 via iPhone
    前端是这样的
    chuck1in
        15
    chuck1in  
       2023-04-11 07:38:47 +08:00 via iPhone
    @songteng0604 是的,前端就是面相配置编程。
    你用的什么代码检查的插件呢现在?
    duke807
        16
    duke807  
       2023-04-11 08:03:16 +08:00 via Android
    angular 1 、2 一路用过来
    现在我只用 vanlina-js.com
    duke807
        17
    duke807  
       2023-04-11 08:04:39 +08:00 via Android
    duke807
        18
    duke807  
       2023-04-11 08:10:41 +08:00 via Android
    即便如此,上次我打包 ImageMagick 的 convert 命令到 wasm 还是花了一点点时间,一开始参考一个开源库,他搞了一个 docker 来编译,我参考他的指导,操作了半天,各种报错

    后来,我直接拿 ImageMagick 上游源码,不用 docker 直接编译,一下子就成功了
    murmur
        19
    murmur  
       2023-04-11 08:11:59 +08:00
    copilot 走起,造轮子你是造不过 AI 的,学前端某些时候就是不知道轮子再造轮子,也就写业务比 AI 好点
    0o0O0o0O0o
        20
    0o0O0o0O0o  
       2023-04-11 09:00:04 +08:00 via iPhone
    比如 npm init vue@latest ,扩展、lint 、测试之类的都准备好了,自己从零开始感觉确实麻烦,要了解学习太多东西了。

    比如可以试试从 element 的 https://github.com/element-plus/element-plus-vite-starter 开始?
    yaphets666
        21
    yaphets666  
       2023-04-11 09:00:45 +08:00
    建议转行
    blessyou
        22
    blessyou  
       2023-04-11 09:03:15 +08:00 via Android
    👀 这种破事你学完之后工作中超多。
    gp0119
        23
    gp0119  
       2023-04-11 09:08:11 +08:00
    时间充裕的情况下,我觉得这恰好是一种学习的过程,如果你想快速出效果,可以用脚手架
    me404
        24
    me404  
       2023-04-11 09:08:50 +08:00 via iPhone
    初学者很需要 chatgpt
    fzls
        25
    fzls  
       2023-04-11 09:17:49 +08:00
    学习就是这样一个过程啊,不断试错然后增长经验,从而不断掌握更多的东西
    awinds
        26
    awinds  
       2023-04-11 09:28:57 +08:00
    js 换成包后变成那么兼容了,还是之前 es5 时代舒服
    sky857412
        27
    sky857412  
       2023-04-11 09:31:21 +08:00
    如果只是学习使用,找个现成的脚手架。如果要自己去搭建脚手架,这不可避免
    zlhsvc
        28
    zlhsvc  
       2023-04-11 09:36:58 +08:00
    别说写代码了,我之前现成的代码编译下都能出各种各样的问题,是真的脑壳疼,之前 JQ 时代就没这些问题
    ljsh093
        29
    ljsh093  
       2023-04-11 10:00:50 +08:00
    @duke807 #17 我寻思哪里有什么香草 js ,直接看示例寻思这不就是原生 js 吗,往上看 no code at all 才懂
    webcape233
        30
    webcape233  
       2023-04-11 10:02:50 +08:00 via iPhone
    换个思路 , 增加 ai 取代的难度,版本一变 ai 机器直接冒烟
    horizon
        31
    horizon  
       2023-04-11 10:04:26 +08:00
    学 nextjs
    Rache1
        32
    Rache1  
       2023-04-11 11:06:56 +08:00
    @n18255447846

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

    node-sass: 没错,正是在下
    xiaoGeZB
        33
    xiaoGeZB  
       2023-04-11 14:01:11 +08:00
    sass 确实恶心
    marcong95
        34
    marcong95  
       2023-04-11 14:42:51 +08:00
    有 vite 的当下,别碰 webpack ,会变得不幸

    如果 npm 报各种 error 的话,有可能是网络问题,可以先设置淘宝源,但是偶然也会出问题。这时候可能就要设回官方源然后 npm set proxy/https-proxy ,但是 set proxy 也可能有各种奇奇怪怪的脚本不听你设置去直连,这种脚本基本上就是造成问题的罪魁祸首了
    july1995
        35
    july1995  
       2023-04-11 14:53:45 +08:00 via Android
    @Rache1 这玩意确实让我猝不及防,第一次负责项目基建。就用了这个玩意。 本地调试的都很完美。 结果一上构建机崩了。 这玩意用到了 nodegyp ,然后 nodegyp 又要 python 。 构建机又是 docker 环境,不让私自装软件,也没有 root 权限,也没外网。 第一次搞基建,本来就心里没底,这下搞得我彻底慌了。
    n18255447846
        36
    n18255447846  
       2023-04-11 18:56:20 +08:00
    @marcong95 vite 和 cra 都是基于 webpack 。。。

    设置 proxy 和第三方源可以解决 npm 的下载问题,但解决不了 postinstall 下预编译文件,这些包读不到 npm 的 proxy 配置或者根本不支持 proxy ,例如 sass/electron ,这种情况得看文档了,大部分包提供了环境变量配置下载源,可以直接写到 npmrc 里
    marcong95
        37
    marcong95  
       2023-04-11 19:35:31 +08:00
    @n18255447846 #36 vite 现在应该基于 rollup/esbuild 了吧,最新的 cra 我了解不多,好像也有 vite/snowpack 版本的 cra 来着。

    sass/electron 一类的环境变量配置我之前翻文档好像没翻到,反正我现在直接用 Clash 的 TUN Mode ,感觉省事一点
    chuck1in
        38
    chuck1in  
       2023-04-12 07:20:39 +08:00 via iPhone
    @july1995 说真的框架越简单越好,你也啥要选哪个东西?
    july1995
        39
    july1995  
       2023-04-12 08:14:21 +08:00 via Android
    @chuck1in 主要看中了 scss 的嵌套功能,嵌套写起来可以很好的看出来层级关系。 嵌套写法的最外面约定好一个唯一的类名, 也可以避免一些类名冲突问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2669 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 15:29 · PVG 23:29 · LAX 07:29 · JFK 10:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.