前端

基础篇 - 现代化 React 开发入门开发环境与核心概念React 思想与前端演进在 Web 开发的早期，开发者们使用 JavaScript 和 jQuery 等库来为静态的 HTML 页面注入活力。这种方式在处理简单的交互时卓有成效，其核心思路是“命令式”的：开发者需要精确地告诉浏览器“第一步，找到这个 DOM 元素；第二步，修改它的样式；第三步，替换它的文本内容”。当应用程序的规模和复杂度不断攀升时，这种直接操作 DOM 的方式很快就会导致代码逻辑混乱，UI 状态与数据状态的同步变得异常困难，代码最终演变成难以维护的“面条代码”。​为了解决这一困境，前端社区引入了 MVC 和 MVVM 等设计模式，诞生了像 AngularJS 和早期 Vue 这样的框架。它们通过数据绑定的方式，将开发者从繁琐的 DOM 操作中解放出来，这是一个巨大的进步。然而，React 的出现，带来了一种更为纯粹和强大的心智模型。​React 的核心思想可以被精炼为一个优雅的公式：UI = f(State)。​这个公式的含义是，用户界面（UI）仅仅是应用程序状态（State）的一个函数（f）。...

摘自：https://qiuli.site/2025/10/16/elementplus%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/ 简介Element UI 是一款基于 Vue.js 2.0 的开源桌面端组件库，旨在帮助开发者快速构建现代化、高效且风格统一的 Web 应用程序。ElementPlus是 Element UI 的官方升级版本，专为 Vue 3.0 设计，完全兼容 Vue 3 的 Composition API 和 TypeScript，并继承了 Element UI 的核心设计理念与组件生态。我们现在使用ElementPlus来实现一套后台管理项目。 项目简介我们这次实现的项目叫‘realworld’，是一个简单的博客网站；这个项目是一个专门用户练手的demo，有各种语言的实现方式，地址是：https://main--realworld-docs.netlify.app/；我们可以找到数据库表、接口标准，前后端的数据格式等等；我使用Java简单实现了后端项目，代码地址为：https://gitee.com/qiuli-zero/rea...

摘自：https://qiuli.site/2025/08/10/vue3%E5%85%A5%E9%97%A8/ 简介Vue.js（简称Vue）是一款用于构建用户界面的渐进式JavaScript框架，本文我们就简单的学习一下Vue的使用。 知识图谱概览我们学习的时候，先从总体上对事务有一个认识还是非常重要的，我从网上找了一张图片，从整体上介绍了一下学习的内容；我们的文章也会按照这个结构来编写 构建工程项目安装Node.js我们可以去官网下载长期支持版本（LTS版本），点击安装即可；安装后再使用命令行查看是否安装成功 123# 查看是否安装了node.jsnode -vnpm -v 基于 Vite 创建一个Vue项目vite是什么？问一问deepseek： 1Vite 是一款由 Vue.js 创始人尤雨溪（Evan You）开发的现代前端构建工具，旨在通过原生 ES 模块（ESM）和按需编译等特性，显著提升开发效率和构建速度。 我们打开命令行，进入希望创建工程的目录，输入命令 1npm create vite@latest 然后按照提示输入项目名称、选择框架（选vue）和...

摘自：https://qiuli.site/2025/10/26/uniapp%E5%85%A5%E9%97%A8/ 简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。 基础知识CSS语法更多内容可以查看官网 css预处理器uni-app 支持less、sass、scss、stylus等预处理器。 flex布局Flex布局（Flexible Box Layout）是CSS3中一种高效的布局模型，它通过灵活的容器和项目关系，让元素能自动适应不同屏幕尺寸，简化了复杂布局的实现。 尺寸单位定义与适配性px（像素） 是绝对单位，表示屏幕上的物理像素点。在不同设备上，1px 的实际显示大小可能不同（尤其是高分辨率屏幕），可能导致布局比例不一致。 rpx（响应式像素） 是微信...

公共css 123456789101112131415161718192021.body { margin: 0;}.header, .footer, .article, .aside { color: #fff; min-height: 60px; text-align: center; display: flex; align-items: center; justify-content: center;}.header, .footer { background-color: #7dbcea;}.aside { background-color: #3ba0e9;}.article { min-height: 300px; background-color: #108ee9;} 1234567891011121314151617181920212223<view class="body"> <view cl...