一名嵌入式开发学习前端技术的失败之旅

前言

这篇文章与标题相关的是前两节，后边是以如下界面为目标的一个超简洁小教程，请按需选择阅读📖。

为什么要学前端

TL;DR 不要问为什么学这玩意，问就是闲的。

作为一名嵌入式开发，前端技术似乎是八竿子打不着的东西。学这玩意儿，好像是费力不讨好？其实，还是有不少好处的：

解决需求：之前用 PySide6 开发了一个使用大模型辅助看文档与视频的开源、免费工具「Verbiverse（感兴趣就快来看看✨）」。虽然 QT 是跨平台的，但想在手机或 iPad 上使用却不太方便，这时候前端技术的优势就体现出来了。能跑浏览器的设备上都可以使用，而移植 Verbiverse-web 就是我的主要目的。

工作相关：如今的嵌入式产品为了追求用户体验，往往会搭配本地页面和 web 服务。这就免不了和前端开发的同事打交道。为了不被忽悠得加班加到怀疑人生，掌握点前端技术可太有用了🐶。

使用范围：前端技术三件套带来了无数的库和工具，学会了前端，你会感觉像是打通了任督二脉，世界突然开阔了。最不济，你也能通过 F12 看懂网页上一些神秘的信息😄。

为什么说是失败之旅

TL;DR 学习新技术永远是个怪圈，总想快速上手，但是总会遇到问题倒逼你去补课基础，就像你逃课幽魂但是最终总有 BOSS 会让你主动回去打的💀。

这一切都得从我想做 Verbiverse-web 版本说起，结果从零开始学前端，直接撞上了以下几个大坑：

教程海量：一搜教程，铺天盖地。硬着头皮啃，简直是对耐心的极限挑战。而且很多东西都超出了我的知识体系，根本搞不懂学这些有什么用；
工具泛滥：前端的工具、框架多得像是逛超市，而我又有点强迫症，总担心选了个不流行的东西，白白学了一通。于是，我花了大量时间在各种调研和纠结上，浪费了大量时间；
好教程难找：作为抠门的程序员，我实在找不到一个简洁、免费、基于简单的示例项目的教程来学习；

最终，我结合大模型和一些开源项目模板，硬是靠着死磕和生搬硬套勉强上手改了点代码。费了九牛二虎之力，终于能在浏览器里预览 PDF 了，可当我拿 iPad 操作时，发现触摸体验烂到爆。以为攻克了难关，结果才发现，这只是对手在热身😅。

是不是看上去挺像回事儿，但实际在触摸屏上难用得你怀疑人生😢，这打击简直是致命的，直接让我放弃了：

肯定你已经在心里说，都失败了那你还在这啰唆一大顿🤨

因为怎么说也是花了好几天学习，在这里整理了下，希望能帮助到有需要的人。

来让我看看你都记了啥

能看到这一节，说明你骨骼惊奇，必是学这门手艺的好苗子 👌。

这个教程大量依赖大模型辅助，尝试前确保有可用的大模型。当前免费的代码辅助工具有很多，请自行搜索。

目标

我不想只是罗列看到的那些文章链接，同时我也梳理下整体的知识体系，打算用如下这个页面为目标，把需要的知识点与对应的文档整理出来，因此接下来文章的特点：

超级简洁: 不包括任何深入的知识点介绍，会提出一步步的目标，因此你要懂得搜索，有自己解决问题的耐心。
有示例源码：我提供了一份源代码，每个提交都做了标注，可以对应参考。

示例源码使用

源码地址：HATTER-LONG/HowToLearn-WebDev (github.com)

如下图，每个 Commit 描述前都有一个中括号标签，可以回退到对应的版本，比对两个提交之间的差异就清楚改了那些代码，有相同标签的看最后一个就行，后续文章我会贴上对应的步骤标签。

根基

最基础的要了解前端开发三件套：HTML、CSS 与 JS ，这里我最开始看的教程是 web 入门这部分：web 入门 - 学习 Web 开发 | MDN (mozilla.org)

HTML（超文本标记语言）：构建网页的骨架，定义网页的结构和内容。它用标签来标识文本、图像、链接等元素，决定了网页上有什么。
CSS（层叠样式表）：为网页添加样式，决定了网页的外观和布局。它通过选择器应用样式规则，如颜色、字体、排版等，使页面变得美观和可视化。
JavaScript：赋予网页交互功能。它可以动态更新内容、响应用户输入、操控多媒体和动画，使网页更具互动性和活力。

DOM（Document Object Model，文档对象模型）是网页的编程接口，它把整个网页（HTML 或 XML 文档）表示为一个结构化的树形模型。通过 DOM，程序员可以使用 JavaScript 动态地访问、修改网页的内容、结构和样式。

npm（Node Package Manager）：是 Node.js 的包管理工具，后续有很多工具需要依赖 npm 安装。Downloading and installing Node.js and npm | npm Docs (npmjs.com)

npx：npx 是 npm 的一个工具，用于直接运行 npm 包中的可执行文件，而无需全局安装它们。用于临时执行 npm 包中的命令，方便无需安装就可以运行某些工具。

项目创建「Commit 1 | 44ad840」

tinyplex/vite-tinybase: A vanilla TinyBase Vite template (github.com) 是一个基于 vite 构建的最小项目，包含了基本的 html、css、js 文件：npx tiged tinyplex/vite-tinybase my-tinybase-app

目录结构如下：

可以使用 vite 直接预览最小模板：vite-tinybase instructions

问问大模型「Commit 2 | 45f0221」

没有思路写接下来的代码，那就先画张图问问大模型：

最终将代码复制到我们的项目中，简单修改下导入 js 与 css 的路径信息，最终效果还是不错的：

了解源码「Commit 3 | 0a84c90」

接下来我们准备发车了，但是首先趁着现在代码很少，先了解下基本的代码都是什么含意，遇到不清楚的去查相关资料或者询问大模型：

修改侧边栏「Commit 4 | 60fb3b4」

大模型提供的代码细节还是缺失比较严重，可以尝试解决如下问题：

展开与收缩显示问题：展开时显示 LOGO + APP 名称，收缩时只显示 LOGO。
侧边栏图标显示修复：侧边栏收缩时，确保图标完整显示。
按钮状态问题：修复控制侧边栏收缩与展开的按钮，使其在状态切换时正确更新。
鼠标悬停效果：调整侧边栏的悬停效果，变为背景色变化而不是变为手型指针。

那么，当没有相关知识时如何去改代码呢？这时就要多多询问大模型的帮助了。大模型已经改变了我们学习技术的方式，现在你可以先主动尝试实现各种功能，再深入理解代码细节。

例如侧边栏我想要展开时显示 LOGO + APP NAME，收缩时显示 LOGO，就可以在同一会话内（提供代码的会话中）或者使用 copilot 这种工具询问如何修改，并让大模型解释这么修改的目的：

实现页面切换「Commit 5 | 1abdcf3」

当前所有页面代码都是在 index.html 中，这很不利于代码维护，我们可以将 Home、Page1、Page2 的代码拆分开，侧边栏点击对应按钮时自动切换到对应页面。

这里有个细节是使用 fetch 方法加载 html 是不会自动执行 <script> 标签的脚本，需要主动执行才可以。

最后，实现的界面如下：

VUE 框架

VUE 是当前流行的前端开发框架，它简化了 js 与 HTML 数据交互的过程，可以更方便我们开发复杂的项目，推荐先阅读下如下两个简短教程，对 VUE 有个初步印象：

VUE 的源码文件已 .vue 结尾，可以将 html css js 写到同一个文件中；

html 相关代码使用：<template> 标签包裹；
css 相关代码使用：<style scoped> 标签包裹，作用是将样式限定在当前组件内，使其只作用于当前组件的元素，而不会影响到其他组件的样式。
js 相关代码使用：<script setup> 标签包裹，这个 setup 是可选的，简单理解就是当创建这个页面组件时的初始化函数，代码会被自动加载执行，不必手动去调用，这里定义的变量、函数等均可以在 template 中使用。
- 那就有好奇的同学要问，setup 里是初始化这时要想操作 DOM 怎么办，那就需要使用 vue 的 onMounted{} 同理也有 onBeforeUnmount 与 onUnMounted，其被调用的时机就是 DOM 挂载完成后与卸载前：


<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log('Component is mounted');
  // 可以在这里执行一些需要在组件挂载后进行的操作
});