这篇文章与标题相关的是前两节，后边是以如下界面为目标的一个超简洁小教程，请按需选择阅读📖。
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)
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)
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
没有思路写接下来的代码，那就先画张图问问大模型：
最终将代码复制到我们的项目中，简单修改下导入 js 与 css 的路径信息，最终效果还是不错的：
接下来我们准备发车了，但是首先趁着现在代码很少，先了解下基本的代码都是什么含意，遇到不清楚的去查相关资料或者询问大模型：
大模型提供的代码细节还是缺失比较严重，可以尝试解决如下问题：
那么，当没有相关知识时如何去改代码呢？这时就要多多询问大模型的帮助了。大模型已经改变了我们学习技术的方式，现在你可以先主动尝试实现各种功能，再深入理解代码细节。
例如侧边栏我想要展开时显示 LOGO + APP NAME，收缩时显示 LOGO，就可以在同一会话内（提供代码的会话中）或者使用 copilot 这种工具询问如何修改，并让大模型解释这么修改的目的：
当前所有页面代码都是在 index.html 中，这很不利于代码维护，我们可以将 Home、Page1、Page2 的代码拆分开，侧边栏点击对应按钮时自动切换到对应页面。
这里有个细节是使用 fetch 方法加载 html 是不会自动执行 <script> 标签的脚本，需要主动执行才可以。
最后，实现的界面如下：
VUE 是当前流行的前端开发框架，它简化了 js 与 HTML 数据交互的过程，可以更方便我们开发复杂的项目，推荐先阅读下如下两个简短教程，对 VUE 有个初步印象：
VUE 的源码文件已 .vue 结尾，可以将 html css js 写到同一个文件中；
<template> 标签包裹；<style scoped> 标签包裹，作用是将样式限定在当前组件内，使其只作用于当前组件的元素，而不会影响到其他组件的样式。<script setup> 标签包裹，这个 setup 是可选的，简单理解就是当创建这个页面组件时的初始化函数，代码会被自动加载执行，不必手动去调用，这里定义的变量、函数等均可以在 template 中使用。onMounted{} 同理也有 onBeforeUnmount 与 onUnMounted，其被调用的时机就是 DOM 挂载完成后与卸载前：
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
// 可以在这里执行一些需要在组件挂载后进行的操作
});创建一个 VUE 框架项目也很简单：npm create vue@latest，按照提示进行选择即可，如果不清楚是什么，说明我们还用不上，那就选否，不要纠结 😄：
同样使用 npm i 安装依赖后，npm run dev 可以使用 vite 使用开发环境。
项目结构如下，可以按照如下顺序阅读代码：
主要将之前使用三件套写的代码移植到 App.vue 中，使我们界面可以正常显示。页面切换先用空函数替代。
如果认真读了代码和教程会发现 VUE 框架想要嵌入其他 vue 组件是非常方便的，直接把标签导入，加到 html 里就行了，这节就使用 vue 组件的方式实现不同页面切换，最终可以使页面正常切换。
VUE 框架使得 HTML 与 JS 之间的数据交付变得更加方便，不再需要我们使用 DOM 获取、更新，而直接像是操作变量一样即可，HTML 会自动根据数据的变化进行渲染，这节使用数据绑定的方法优化侧边栏伸缩控制按钮功能。
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页应用（SPA）。它可以让你在不同的 URL 路径下显示不同的页面组件，从而实现页面导航。
路由组件非常灵活，还可以设置路由守卫检查是否登录状态以及权限控制等等，本节使用路由组件来实现页面切换。
路由组件安装：npm install vue-router@4
至此虽说我们界面没有太大变化，但是实际代码实现层面已经完全改变了，接下来我们实现些更有意思的功能。
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。
不知道注意到没有，当你在一个页面输入完数据，切换页面后再回来页面已经被刷新数据消失了。这节使用 Pinia 尝试保存每个页面的数据，切换页面后不会丢失。
Element-Plus 是基于 Vue 3，面向设计师和开发者的组件库，包含了很多设计好的组件，可以像积木一样使我们搭建一个 像模像样 的界面。
安装与导入使用：
安装 | Element Plus (element-plus.org)
快速开始 | Element Plus (element-plus.org)
查找模块与示例代码：
Overview 组件总览 | Element Plus (element-plus.org)
我们在 Menu 中找找有没有可以直接复用的控件，这个折叠面板就挺符合我们使用：
本节我们将侧边栏代码抽出为单独组件，并使用 element-plus 重新实现。
最后我们再添加些 LOGO 图片，完成我们的终极目标。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。