Vue开发

1. 背景 公司有部门使用VuePress 1.0搭建平台的帮助文档，前期文档不是很多，所以没有暴露出特别明显的问题。但随着文档的逐步迭代和内容的增多，出现了大量的并发请求，总共有218个请求，导致服务器带宽耗尽、响应速度下降，进而影响了文档的使用。 2. 问题分析 VuePress 1.0是基于Vue 2和webpack实现的，其模块化方式使用的是CommonJS。这意味着，当项目打包部署在服务器并进行访问时，需要将源码全部加载完成后才能进行渲染，即同步加载。随着项目持续迭代，内容增多，性能问题逐渐显现。 3. 解决方案 考虑到向服务器发起了200多个请求，但查看那些.js文件，整个js文件夹大小才10.3MB，是否可以将10.3MB分为10个.js文件，减少请求至10次呢？ 3.1 方案一：替换成showDoc 使用showDoc在线文档系统，相比vuepress基于vue.js的静态站点生成器，除了操作便利，对于解决并发请求200次这个问题，还是有帮助的，毕竟showDoc初始化的时候，是从服务器获取文档目录，再通过文档ID，去请求文档详情，通常来说，不会有那么多文档目录，不太可能出现并发请求200次这个问题，只是将vuepress迁移至showDoc，花费的成本很高，文档格式需要调整，图片需要上传，想想这个工作量就头大，再者，作为平台的帮助文档，本身带有宣传的作用，很难醒目地在showDoc中体现平台的公司名和Logo，所以这个方案不推荐。 3.2 方案二：研究webpack如何合并打包 如果请求过多是因为文件太分散导致的，那么，能够在当前基础上，也就是webpack里，找到，当打包时，将各个文件合并，减少请求次数呢？ VuePress 1.0 支持通过 webpack-chain 链式操作来修改内部的 webpack 配置，如下所示： module.exports = { chainWebpack (config, isServer) { // config 是一个 ChainableConfig 的实例 } } 那在 webpack 中，如何对打包的体积、文件等进行处理呢？在 webpack 官方文档中，有推荐使用 SplitChunksPlugin 插件，是为了代码分割，减少包的体积，然后优化加载效率，感觉和自己的初衷背道而驰，最终没达到自己想要的效果。还有就是研究了下 ModuleConcatenationPlugin 插件，其作用是将所有模块的作用域“提升”或合并到一个闭包中，从而使得代码在浏览器中执行速度更快。但是因为要在使用 webpack-chain 去调研 webpack 的配置，尝试使用后也没达到预期，加上再花精力投入到 VuePress 1.0 和 webpack-chain 感觉有点不值。所以，就再想想其他方案。 3.3 方案三：替换成VitePress【推荐】 说到减少并发请求次数，实际上，Vite就在做这样的工作。Vite采用的JavaScript模块化方式是ESM（ECMAScript Modules）。与CommonJS相比，ESM支持按需加载，并且是异步执行的，不会阻塞浏览器的其他事件处理。这意味着在首次加载时，我们无需加载所有资源，仅需加载首页所需的资源即可。这样就能减少了并发请求次数，解决当前遇到的问题。 而VitePress，正是基于Vue 3和Vite构建的。 5. 方案验证 以下是两个文档框架的对比，内容基本为空，可忽略不计。可以看到VuePress 1.0初始化请求的就有26个请求，大部分都是.js文件，而VitePress 1.0只有9个请求，.js文件的请求才4个。 5.1 VuePress 1.0 5.2 VitePress 1.0 ...

2025 年 Web 响应式开发解决方案（基于 Vue3 生态） 随着移动设备碎片化加剧和跨端需求增长，2025 年的响应式开发已从单纯的 “适配多屏幕” 升级为 “全场景体验一致性”。结合当前技术演进，针对 PC、平板、手机多端适配需求，推荐以下增强方案： 一、核心技术栈升级 1. 基础框架：Vue 3 + Vite 6 + TypeScript 5 Vite 6 优势：新增的responsive-plugin可自动识别设备类型并注入环境变量，配合import.meta.env.DEVICE_TYPE在编译时优化条件渲染 TypeScript 5：借助const type特性强化响应式断点类型定义，避免运行时类型错误 // 设备类型类型定义示例 type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'large-screen' const deviceType: DeviceType = import.meta.env.DEVICE_TYPE as DeviceType 2. 响应式引擎：Tailwind CSS 4 + Bootstrap 6 混合方案 Tailwind CSS 4：通过@container查询实现组件级响应式，比传统@media更精准控制元素布局 Bootstrap 6：新增responsive-propsAPI，支持在组件上直接声明多端样式 <!-- Bootstrap 6 响应式属性示例 --> <button class="btn" :responsive="{ mobile: 'btn-sm w-full', tablet: 'btn-md w-1/2', desktop: 'btn-lg w-auto' }" > 多端适配按钮 </button> 3. 跨端状态管理：Pinia + 设备传感器 API 利用Pinia存储设备状态（如屏幕方向、分辨率），结合ScreenOrientationAPI 实现动态适配 // 设备状态Store示例 import { defineStore } from 'pinia' export const useDeviceStore = defineStore('device', { state: () => ({ orientation: ScreenOrientation?.type || 'portrait-primary', breakpoint: 'mobile' }), actions: { init() { window.addEventListener('orientationchange', () => { this.orientation = ScreenOrientation.type }) } } }) 二、组件层优化方案 1. 自适应布局组件库：PrimeVue 4 + VueUse PrimeVue 4：所有组件默认支持responsive属性，内置 30 + 种设备预设 ...

前言 每一个公司或者团队有会有相关的项目网址，考虑到团队共用的东西，所以计划是开发一个静态导航页，这样就不需要每个人自己维护了，使用同一套即可，当时在Github上面找了一些开源的静态导航页项目，使用的是开源库static-nav，它是使用HTML+CSS+JQ简单实现的，代码里面网址都是直接写死的，我只要将其替换就可以。 1. 遇到问题 static-nav虽然可以正常应对当前的需求，但是使用一段时间之后发现，如果我要替换或者新增一些网址，每次都需要在.html文件中修改，然后再重新部署。一两次还好，次数多了，就有点受不了了，再加上一个模块的网址多了之后，好几个模块所占用的空间不一致的话，那布局就容易错乱，为了解决这个问题，我每次都需要使用占位符解决。 2. 解决方案 考虑到维护、后期拓展难的问题，就打算重构这个项目，并命名为dst-static-nav，基于vue next + vite + element-plus 实现，通过一个navLists.ts文件动态配置，后期只需要将这个文件存放在服务器，如有任何需求，只需要改动这个navLists.ts文件即可，不需要改动项目界面，然后又要重新部署一遍，因为最近百度捣鼓了一个开发者搜索，所以也加了一下，项目效果图，如下所示： 功能主要是以下几点，分别是： 左边菜单栏快速定位，右边静态导航页动态渲染 通过 navList.ts 配置，无需改动前端页面 支持百度开发者搜索 当前只是这些功能，后期可能考虑部署线上，然后怎么可以做到通用一点。 3. 技术要点 项目虽然很小，但是有一些细节点还是可以梳理记录一下的，技术没有高低之分，只要能解决了问题就是好技术。 3.1 基于el-scrollbar实现左右联动定位到标题栏 项目开发过程中，主要解决的问题是，左侧菜单栏和右边导航布局页面的联动，需求就是左侧菜单栏选中，右边导航页对应的标题栏滚动到顶部显示，在实现中主要使用document.getElementsByName()这个函数，当上定义了name属性，就可以通过这个函数获取到它与顶部的距离offsetTop，以此可以将滚动条滚动到指定的位置，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 3.2 实现左侧菜单栏最后几个菜单的标题置顶 在项目使用过程中，发现左侧菜单栏最后几个菜单，来回切换，导航标题没有置顶，原因很简单，因为布局不够，为了解决这个问题，就需要在最后一个导航模块增加布局，但是应该要增加多少呢？每个导航模块的高度都是不定的，所以要新增的布局高度只能通过计算，动态设置。 首先，需要知道最后一个导航模块的名称，如下所示： // 获取左侧菜单最后一项，基于它加上需补充的空间高度(浏览器内高度-卡片整个高度) let lastNavName = navLists.at(-1)?.chindren.at(-1)?.label 然后，需要获取当前浏览器页面的高度，减去这个导航模块的高度，就可以知道需要新增多高的布局了，如下所示： const handleSelect = (key: string, keyPath: string[]) => { let offsetTop = document.getElementsByName(key)[0].offsetTop scrollbarRef.value!.setScrollTop(offsetTop - 20) } 总结 dst-static-nav 项目还有蛮多东西需要完善的，也是在逐步新增需求，虽然不是什么了不起的项目，但是项目开发整个流程规范是一样的，争取培养起来用心做事情的感觉，从中体验到丝丝成就感。

1. 前言 计划使用 VuePress 2.x 结合 ElementPlus 实现一个封装组件库的文档说明网站。本文将详细介绍如何搭建环境、配置项目以及解决过程中遇到的问题。 2. Vuepress项目初始化 2.1 准备工作 创建一个名为 VuePressTest 的项目目录，然后进入该目录并安装依赖： mkdir VuePressTest && cd VuePressTest npm init -y npm install -D vuepress@next npm install 2.2 配置 在项目根目录下的 package.json 文件中添加以下脚本： { "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" } } 2.3 示例 在项目根目录下创建 docs/README.md 文件，并添加以下内容： --- home: true heroImage: https://artice-code-1258339218.cos.ap-beijing.myqcloud.com/vuepress/element-index.png heroText: Element features: - title: 一致性 Consistency details: 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念 - title: 反馈 Feedback details: 通过界面样式和交互动效让用户可以清晰的感知自己的操作 - title: 效率 Efficiency details: 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。 footer: by饿了么 --- 运行 npm run dev 命令后，效果如下： ...

一、系统简介 Sentry是一个开源的监控系统，可以收集项目中的异常信息，便于开发人员第一时间发现问题，定位问题，解决问题。 二、系统搭建 虽然Sentry官方提供了在线系统，但是因为需要翻墙，加上如果是公司项目，考虑到安全问题，还是倾向于私有化部署，在Github上有一个开源项目用于部署Sentry，可以使用该项目进行部署： git clone https://github.com/getsentry/onpremise.git 因为这个项目涉及很多后端的技术知识，Sentry搭建最好是后端人员来做，然后部署到服务器上面去。 三、创建项目 Sentry搭建成功，部署到服务器，比如当前Sentry在线系统为https://123.11.22.133:211，使用账号test001登录，一开始默认是英文显示，如果想要切换为中文，只需要在左上角的User settings里的Language选项选择Simplified Chinese即可，然后创建项目，如下图所示： 四、Vue项目引入Sentry 项目创建完成后，会跳转至Vue配置的说明文档，主要是Vue项目如何引入Sentry的一些内容，内容如下所示： 安装依赖 # Using yarn yarn add @sentry/vue @sentry/tracing # Using npm npm install --save @sentry/vue @sentry/tracing 在main.js里引入 import Vue from "vue"; import * as Sentry from "@sentry/vue"; import { Integrations } from "@sentry/tracing"; Sentry.init({ Vue, dsn: "http://cd7f733c2e1e4641bdeb11ba0811d9aa@123.11.22.133:211/12", integrations: [new Integrations.BrowserTracing()], // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production tracesSampleRate: 1.0, // 上报console异常信息 logErrors: true }); 此时，只要项目正常部署在线上，打开项目，然后打开浏览器控制台，查看Network列表，会发现很多类似这样的请求，并没有报错，这就意味着当前已经正常上报到Sentry系统了，如下所示： ?sentry_key=cd7f733c2e1e4641bdeb11ba0811d9aa&sentry_version=7 五、异常报错示例 为了真实验证Sentry的功能，现以一个真实场景来演示，在项目中添加一个按钮，然后设置点击事件之后，触发打印console，sentryTest并未定义，所以会报错，代码如下所示： <template> <div> <el-button @click="sentryClicked">Sentry测试</el-button> </div> </template> <script> export default { methods:{ sentryClicked(){ console.log('sentryClicked: ', sentryTest); } } } </script> 在项目页面，我们可以看到，在浏览器控制台，确实有报错信息生成，如下图所示： ...