彭世瑜的博客

需求：顶部栏有切换功能，内容区域随顶部切换而变化。

解决办法是添加兼容的浏览器。

文档： https://element.eleme.io/#/zh-CN/component/custom-themeelement-variables.scssmain.js

收集整理一些开发中用到的测试数据。

结合网上诸多无效方法，整理如下注意是vue安装，不是npm！！！vue add style-resources-loader安装过程中选择less修改根目录 vue.config.js 的patterns参数const path = require("path");module.exports = { pluginOptions: { "style-resources-...

如果 img标签中的src图片logo.png加载失败，原来的图片位置会被error.png 替换<img src="logo.png" onerror="handleImageError()" /><script type="text/javascript"> function handleImageError() { console.log(event); var img = event.target; img.src = "error.png"

常用的遮罩样式el-dialog遮罩层使用的样式问题可能出在可以使用实现同样的效果。

Vue2和Vue3的自定义指令变化很大，需要特别注意。

如果想获取到原始的Object对象，而非Proxy代理对象，可以使用如下方式。toRaw()​：根据一个 Vue 创建的代理返回其原始对象。Vue中，定义这样一个data数据域中的js对象。打印到控制台，默认输出的是Proxy代理对象。采用选项式api风格。

其实最后解决的方式也很简单，使用相对当前目录的方式。开发环境中没有问题，资源可以正常请求到。上线后，发现静态资源请求的路径是。去掉，上线后就获取正确的路径了。由于url使用的是二级目录，请求不到资源，返回了404。也就是把最前面的路径。

效果如下，原以为是浏览器的bug，升级后就好了，没想到一直有这个问题。浏览器默认有一个样式，加了一个边框。组件上会出现一个蓝色的小框。知道原因之后，就好处理了。页面刷新后，鼠标经过。

uniapp H5打包部署到github后，下划线开头的一个文件。需要修改配置 vite.config.js。访问不到，网络请求显示404。

tabBar.list 数组的第一项必须和pages配置中的第一项要相同。uniapp的tabBar配置后不显示。

用于解决，不同业务域名SSL证书，申请自不同的平台，到期后不能及时收到通知，导致线上访问异常，被老板责骂的问题。同时，Domain Admin也是一个轻量级监控方案，占用系统资源较少，安装包仅1.5 MB。基于Python3 + Vue3.js 技术栈实现的域名和SSL证书监测平台。支持证书：单域名证书、多域名证书、通配符证书、IP证书、自签名证书。通知渠道：支持邮件、Webhook、企业微信、钉钉、飞书等通知方式。证书部署： 单一主机部署、多主机部署、动态主机部署。的过期监控，到期提醒。

vite: https://github.com/vuejs/viteNo-bundle Dev Server for Vue 3 Single-File Components.$ npx create-vite-app <project-name>$ cd <project-name>$ npm install$ npm run dev创建的目录如下.├...

VuePress是一个基于Vue驱动的静态网站生成器。自动部署 vuepress-deploy.yml。使用markdown语法书写博客文章。站点配置config.js。

译文：@vuejs的codemirror代码编辑器组件。完整依赖 package.json。封装一个自定义的编辑器。

Vue.js自定义指令实现scroll下滑滚动翻页。

文档：wx.getLocation(Object object) 获取当前的地理位置、速度腾讯位置服务 微信小程序JavaScript SDK一、获取接口权限根据腾讯地图文档需要完成以下几个步骤：1、创建应用： https://lbs.qq.com/dev/console/application/mine申请开发者密钥（key）填写微信小程序授权 APP ID勾选WebserviceAPI 域名白名单2、下载微信小程序JavaScriptSDK（如果地址失效请到官网下载）http

component动态组件很适合在不同组件之间切换，相比。组件 ComponentA.vue。组件 ComponentB.vue。组件 ComponentC.vue。依赖 package.json。入口文件 main.js。

用户可以添加新的分类，分类和路由的显示方式一致，拥有和路由相同的逻辑，故而采用通过服务端返回数据生成动态路由的方式解决。既然是动态路由，所以需要响应式，当路由数据发生变化时，可以及时的获取通知。页面上显示的时候，需要从vuex获取路由信息，可以及时刷新页面数据。通过服务端接口返回的数据生成路由，是异步返回的数据，动态添加。可以通过Vue-Router提供的api，动态添加路由数据。动态路由首次跳转的时候，动态路由还没有添加，需要转换处理。该接口获取的路由数据是一维数组，和路由配置格式不一样。

参考网站效果爱企查：https://aiqicha.baidu.com/company_detail_28783255028393天眼查：https://www.tianyancha.com/company/22822Vue.js代码实现组件：TextOverflow.vue<template> <div :class="{'overflow-hidden': !isShowMore}"> <slot></slot> &l

【代码】vue.js项目打包报错Error: You appear to be using a native ECMAScript module configuration file。

明明声明了menuButton对象的类型，也判断了为null的情况，还是提示属性top不存在。在计算属性的返回值上加上类型注解，很奇怪的解决方式。

1、防抖函数防抖用于减少函数请求次数，对于频繁的请求，只执行这些请求的最后一次。/** * @param {function} func - 执行函数 * @param {number} wait - 等待时间 * @return {function} */function debounce(func, wait = 300){ let timer = null; return function(){ if(timer !== null){ clearTimeout

需求：Vue2.js + ElementUI 项目，通过xlsx实现一个前端的 Excel 导入和导出功能文档兼容性依赖示例依赖 package.json引入element-uidata.jsApp.vue工具类文件 utils.js导出截图完整代码：https://github.com/mouday/vue-excel在线演示：https://mouday.github.io/vue-excel/

css的作用域使用页面使用局部css样式，避免全局样式污染全局组件使用全局css样式，方便调用者样式覆盖

【代码】js: 监听键盘按键事件KeyboardEvent。

Vue2.js迁移到Vue3.js的API变化，

开发环境：vue-cli-service serve 默认：process.env.NODE_ENV=development.evn.developmentENV = 'development'VUE_APP_BASE_URL = 'https://development.demo.com'生产环境：vue-cli-service build // 默认：process.env.NODE_ENV=production.env.productionENV = 'development'

文档v-click-outside 可以实现点击外部区域才触发事件实现代码

标签的padding值去掉，以免点击触发到结果项外边，保证结果项将整行都覆盖住。通过搜索，将搜索结果关联到当前页面的对象，原来点击一下就关联，弹框关闭。现在需要支持同一个搜索结果多次点击关联，加快处理速度。// 调用 callback 返回建议列表的数据。就不能收到点击事件，就不会关闭搜索结果了。将捕获点击事件，并且阻止传播。测试数据 data.json。// @select 触发。// 焦点触发搜索第一页。

element-ui的 el-autocomplete 组件支持远程搜索输入建议，不过不能翻页，只能搜索到首页内容。要求实现下滑到底部的时候，触发翻页请求，查看更多结果。想办法监听到滚动事件，就能判断是否到达底部，然后进行。// 调用 callback 返回建议列表的数据。来监听滚动事件，需要注意事件的监听与移除监听。// 焦点触发搜索第一页。// 避免上次数据影响。

配置如下其中:/app 是网站根目录3、缓存问题解决浏览器缓存分类：html默认当做了静态文件传输，会被浏览器缓存，每次打开都拿不到最新的页面使用Charles抓包发现：访问网站首页压根没有进行请求，直接从浏览器本地获取了index.html文件。看来浏览器使用了强制缓存策略nginx 添加以下配置，告诉浏览器怎么缓存html文件参数说明Cache-Control: no-cache协商缓存，只能应用于http 1.1，会返回304(资源无更新)Cache-Contro

table { width: 100% !important;}

文档回顾1、validate：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promiseFunction(callback: Function(boolean, object))2、validateField：对部分表单字段进行校验的方法Function(props: array | string, callback: Function(errorMessage: st

通过添加key 来让视图进行刷新<router-view :key="$route.fullPath" />

安装完 less-loadernpm i less-loader报错TypeError: this.getOptions is not a function at Object.lessLoader原因是版本过高降级安装即可解决问题npm install less-loader@6.0.0参考TypeError: this.getOptions is not a function

插槽属性prop的使用示例文档：https://cn.vuejs.org/v2/guide/components-slots.html子组件<template> <div class=""> <span v-for="item in list"> <slot v-bind="item">{{item.name}}</slot> </span> </div></template

/ 存在浏览器兼容性。//释放掉blob对象。//下载完成移除元素。