日常开发记录-elementUI el-select选项框有超出选项表单

<div class="hello"> <h3>{{ title }}</h3> <p>Vue3 工程化组件使用成功！</p> </div> // Vue3 主流语法：setup 语法糖 const title = '欢迎使用 Vue3 + Vite' .hello { padding: 20px;}

这不仅仅是一个简单的个人博客系统，更是一个集成了 Vue.js 前端框架、D3.js 数据可视化库以及 Node.js 后端服务的综合性技术实践平台。该项目通过模块化的设计，实现了从内容管理、Markdown 渲染到复杂图表交互的完整闭环，特别适合希望构建具有高度定制化视觉效果的技术博主或前端开发者参考。它摒弃了传统博客系统千篇一律的模板，转而采用组件化的开发模式，赋予了内容极高的表现力。在当今的前端开发领域，单纯的文字博客已难以满足技术传播的需求，开发者们越来越追求内容的交互性与数据的可视化呈现。

从 0 到 1 全端开发可视化监控系统，搭建后端工程 01

在接手一个全新的电商或支付类项目时，最让人头疼的往往不是功能有多复杂，而是那些看不见的“暗礁”。很多团队在初期只关注业务逻辑是否跑通，却忽略了架构参数是否合理、高并发下的数据一致性以及第三方接口的真实稳定性。等到上线后流量涌入，数据库死锁、接口超时、验证码延迟等问题集中爆发，这时候再想修补，成本往往是初期的十倍不止。最近我在重构一套基于 PHP + Vue 的易支付系统时，特意将重心从“功能实现”转移到了“极限压测与边界探索”上。

TS + Vue 3 系列开篇，介绍 Vue 3 项目使用 TypeScript 的原因，以及基础类型、类型推断与联合类型、any/unknown/never 的区别。文章涵盖 Vue + Vite 的 tsconfig 核心配置、路径别名与 env.d.ts，以及 Volar 与 vue-tsc 的分工。重点说明 strict 建议开启、paths 需与 vite alias 对齐，以及 vite build 不自带类型检查。

Vue组件的生命周期钩子函数允许开发者在组件不同阶段执行代码逻辑。Vue2和Vue3的生命周期基本一致，包括创建、挂载、更新、卸载四个阶段，但Vue3新增了setup函数（相当于beforeCreate+created）并调整了部分钩子名称。父子组件生命周期执行顺序遵循"父先子后"的挂载规则和"父先子后"的卸载规则。keep-alive组件会新增activated和deactivated钩子，用于管理缓存组件的激活状态。使用setup语法糖时，生命周期函数需添加on前

DevExtreme Vue PivotGrid 使用摘要 DevExtreme Vue PivotGrid 是用于多维数据分析的透视表组件，适用于销售、库存、财务等业务场景。该组件支持数据分组、汇总、筛选、排序和导出功能。 核心配置： 安装依赖：devextreme和devextreme-vue 数据源结构包含fields(字段定义)和store(数据) 通过area属性将字段分配到行、列、数据或筛选区域 支持多种汇总方式(sum、avg、count等)和格式化选项 提供排序、筛选和自定义显示功能 典型应

从渲染、响应式、代码、测量四个层面梳理 Vue 性能优化。文章涵盖 v-once/v-memo、shallowRef/markRaw、虚拟滚动、路由与组件懒加载及 Tree-shaking，并强调先测量再优化。重点对比 v-memo 与 computed 的分工，以及 shallowRef 仅在 .value 整体替换时触发更新、深层属性变化不会自动更新。

【代码】vue3封装全局使用超出tips。

本文详细介绍了Vue项目启动和全局资源注册的完整流程。从index.html入口文件开始，到main.js执行项目初始化，包括导入核心资源、创建Vue实例、注册全局插件/组件/指令，最后挂载DOM渲染页面。重点对比了两种全局指令注册方式：直接在main.js注册和封装插件通过app.use()注册，分析各自优缺点和适用场景。对于多指令、工程化项目，推荐使用插件封装方式，保持代码整洁和可复用性。全文通过代码示例展示了Vue项目从启动到渲染的完整生命周期管理。

基于Spring Boot与Vue的高校个性化订餐系统设计与实现 技术说明： 本文围绕高校个性化订餐系统进行软件工程整理，重点包括 Spring Boot 后端、Vue 前端、MySQL 数据库、食堂与菜品管理、用户信息管理、公告管理和系统测试。内容用于 Web 信息系统设计与实现复盘。 摘 要 随着信息技术的迅速发展，传统的校园食堂管理方式逐渐暴露出时间成本高、数据错误率高以及检索困难等弊端，已经无法满足现代化校园的需求。基于此，本文设计并实现了一款面向高校学生的个性化订餐

reactive：只能改属性），不能换对象ref：既能改属性），也能换对象所以，当你的数据未来大概率需要整体替换（比如接口返回的新对象）时，请毫不犹豫地使用ref.value。如果数据结构固定且不需要整体替换（如表单校验对象），用reactive会更省代码（不用到处写.value。

本文从全栈开发者视角剖析了Vue项目部署的核心逻辑，重点阐述了Nginx配置与前端构建的契约关系。通过子路径部署场景，详解了publicPath与Nginx的alias指令的精确匹配原理，强调SPA路由需要try_files兜底机制。文章提供了完整的全栈部署checklist，包括路径对齐、指令选择、路由处理等关键环节，并指出全栈思维需建立前后端联动的系统级认知，才能解决常见的部署问题。最终揭示了从后端到全栈的本质是打通从代码到生产的完整工程链路。

本文介绍了如何使用GitHub Actions自动部署Vue/Vite项目到GitHub Pages。相比手动部署，只需配置一次工作流，后续代码推送即可自动完成构建和部署。关键步骤包括：1）在vite配置中添加base路径（需与仓库名一致）；2）创建.github/workflows/deploy.yml文件；3）在仓库设置中启用GitHub Actions作为Pages源。作者分享了配置过程中遇到的常见问题，如base路径错误、分支命名差异等解决方案。该方案实现了全自动化部署流程，显著提升了项目更新效率。

页面加载时，Vue 启动，随机生成一个 1~100 的答案。你在输入框里打字，inputValue实时更新。每次更新，result计算属性自动重新计算：先把输入转成数字判断是否合法比较大小返回对应的提示文字提示文字立即显示在<p>标签里。

【代码】MySQL → Flask → Vue → ECharts 开发教程。

Vue (发音为 /vjuː/，类似英文单词 "view") 是一款用于构建用户界面的。它由尤雨溪（Evan You）创建，并于 2014 年正式发布。Vue 的设计目标是通过一套简洁、灵活的 API，帮助开发者高效地构建从简单到复杂的各种界面。

核心原理：监听路由变化 → 判断来源页面 → 执行方法Vue2Vue3返回方法精准触发：路由query传标记。