- 博客(81)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 compression-webpack-plugin首屏加载优化
文章目录一、插件打包.gz文件二、nginx配置优化前后效果对比图：从图片中可以看出，首屏的加载时间提升了很多，从5.55s提升到了578ms，这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。一、插件打包.gz文件1.安装：npm install --save-dev compression-webpack-plugin或者yarn add compression-webpack-plugin --save-dev2.在vue.c
2020-10-19 10:00:57
5947
2
原创 SassError: expected selector报错 ::v-deep 替换 /deep/
今天打开项目npm run dev，发现出现了报错信息如下： ERROR Failed to compile with 1 errors 20:27:22 error in ./src/nzk/components/themeEditor/layout/components/LeftPan...
2020-04-16 20:46:34
36055
3
原创 浏览器的ctrl+f的搜索功能
<vxe-column field="name" title="菜单名称" tree-node show-overflow="title"> <template #default="{ row }"> <div class="ellipsis"> <i :class="'iconfont ' + row.icon"></i>
2022-05-24 11:01:43
1385
1
原创 树的删除和修改以及上下移动(不调用刷新树的接口)
涉及到树的操作最好转化成扁平的数据格式进行处理(处理参考链接),如果没有处理成扁平数据的格式的话,可以参考以下内容(内容基于vxe-table组件):1.删除树的节点后更新树的显示//批量删除菜单 handleRemoveRow(row, rowIndex, $rowIndex) { this.$confirm('请选择是否删除?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消',
2022-05-23 15:49:31
394
原创 NVM for Windows介绍
有的时候,我们需要在一个电脑环境上安装不同的node版本,以适应不同的项目的版本.这里推荐一下nvm(Node Version Manager).下载NVM for Windows的地址一. 如下图,可以看到这里有几个,这里我们选择下载nvm-setup这个版本,解压之后可以直接安装下一步:这里简单介绍一下这几个版本的不同区别:nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。
2021-12-11 10:41:57
1700
原创 vue this.$router.push 页面不刷新总结(8种解决方式----覆盖所有场景)
这其实是一个很常见的问题,当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了.没有耐心的可以直接看第九种方式,绝绝子,适用所有场景.解决办法有这么几种:1. 添加activated函数。 activated（）{ 在这里插入代码片 }2. 通过路由监听的方法。将mounted下的方法函数放到watch路由下// 不推荐、用户体验不好watch: { '$route' (to, from) { // 路由发
2021-10-23 15:26:26
26947
17
原创 使用webpack5的模块联邦实现微前端思想
我们模拟2个团队，团队A开发组件部署到线上给团队B使用，团队B使用远程组件。本地端(团队A):const path = require('path');const VueLoaderPlugin = require('vue-loader/lib/plugin')const HTMLWebpackPlugin = require('html-webpack-plugin');const { ModuleFederationPlugin } = require("webpack").containe
2021-10-19 20:07:09
907
原创 axios请求responseType为blob时，错误数据处理
有的时候,我们在axios请求处理的时候,需要处理对应的可能出现的报错信息,这个时候直接返回的response是不能直接反映出错误信息的.所以这个时候,我们需要进行转化,转化代码如下:这一段是转化并且在报错时抛出错误信息,如果没有报错,就将文件下载下来// 下载文件的保存 handleDownloadData(param, url, blom) { axios({ method: "post", url: url, data: par
2021-09-27 14:07:28
6042
原创 parseInt的原理
计算法则： parseInt() 函数可解析一个字符串，并返回一个整数。 parseInt(string, radix) string ：必需。要被解析的字符串。 radix ：可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。如果省略该参数或其值为 0， 则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。 如果该参数小于 2 或 者大于 36 ，则 parseInt() 将返回 NaN。简单说就是如下的进制的转化二进制数据一般可写为
2021-06-18 17:10:52
1792
原创 CSS之z-index具体小结
对于z-index几乎前端开发者都是不陌生的，都知道是层级的控制，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。准则后来居上的准则，后面的覆盖前面的；z-index哪个大，哪个在上；祖先优先原则第三点很重要，当父级a的index的值大于b的时候，那么b下面的子级的index大于a，也不会生效。使用（1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效（2） 可以有负值参考链接...
2021-06-18 10:59:29
133
原创 面试题总结（js篇）
后期会慢慢补上答案，现在先整理问题1.js的闭包2.js的原型链3.js的作用域链4.js的继承有哪几种，有什么区别5.垃圾回收机制（新生代、老生代算法）6.深浅拷贝7.防抖和节流8.call, apply, bind 区别9.判断数据类型10.介绍下重绘和回流（Repaint & Reflow），以及如何进行优化11.事件委托（事件代理）12.事件循环13.事件流14.a.b.c.d 和 a[‘b’][‘c’][‘d’]，哪个性能更高？15.变量提升这些都是基础题，
2021-05-20 15:58:06
164
转载 面试题总结（vue2.x原理篇）
1. 讲一讲 MVVMMVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。2. 简单说一下 Vue2.x 响应式数据原理Vue 在初始化数据时，会使用 Object.defineProper
2021-05-19 17:21:41
538
原创 nodejs--自动重启工具nodemon简介
// 安装npm install -g nodemon// 启动node服务nodemon server.js //相当于node server.js效果图：详细描述
2020-12-29 16:06:20
95
原创 文件下载的几种方式
1.window.open(“url”);2.window.location.href=“url”;3.添加 download 属性 和 href 链接 elementA.setAttribute('href', 'data:text/plain;charset=utf-8,' + JSON.stringify(json1)); elementA.setAttribute('download', +new Date() + ".tpl");完整：function downFile() {
2020-12-29 15:22:14
183
原创 使用脚手架新建一个VSCode插件
一、安装 VSCode 插件官方脚手架npm install -g yo generator-code二、使用脚手架yo code根据自己的喜好选择1或2即可，脚手架新建项目完成之后，我们可以cd到项目目录，使用code . 在vscode中打开目录。三、运行和调试插件工程F5调试这个插件，然后在新出来的窗口中输入hello worldvs code的api文档...
2020-12-29 11:27:09
687
1
原创 iframe+postMessage跨域访问
在实际的开发中，我们可能会遇到在a项目中嵌套b项目的页面，再比如一些门户网站，当在这个网站中要包含一些其他的项目的时候，也可以采用这种方式，在不同的域名之间传递token等信息进行通信。API详解起了进程两个来模拟这个通信父界面的地址为：http://192.168.169.1/test子界面的地址为：http://192.168.169.1:81/test1父界面向子界面传递信息：父界面： <h1>主页面</h1> <p class="title
2020-12-25 15:14:06
442
原创 vue+express+mysql
Vue + express + mysql主要要注意这么几个问题：跨域问题连接数据库用户接口sql语句一、node后端服务器在项目根目录下建立server，作为后端的服务部分。首先建立db.js:// 数据库连接配置module.exports = { mysql: { host: '192.168.0.222', port: "3308", user: 'root', password: '123456',
2020-11-10 11:10:10
949
原创 video重写控制条——解决video全屏层级最高问题
文章目录一、页面的HTML部分二、css部分三、暂停功能/播放功能四、全屏功能五、当前时间和总时间的显示六、进度条拖动功能七、播放结束时候的处理八、data部分九、结语全屏video会在最上层，这个时候设置定位或者z-index都是无效的，按照有些博客中的z-index设置成2147483647也没用，x5-video-player-type="h5"也没用，于是决定重写控制条。经过分析，简单的重写控制条的话，有这么几个功能点：1.暂停功能/播放功能播放时进度条跟随功能播放时时间改变功能暂停时
2020-10-27 15:10:11
4611
3
原创 vue项目优化目录
vue项目的优化小记：网上一番搜索，发现优化点主要在如下几个方面:一、开启gzip压缩功能二、引入CDN三、路由懒加载四、某些第三方组件按需加载而不是全部加载五、较小的图片资源用base64嵌入src中，减少http请求...
2020-10-21 11:30:04
214
原创 cdn优化
文章目录一、修改index.html二、修改vue.config.js配置文件优化前后效果对比图：从图片中可以看出，打包后的文件在压缩后的情况下，还少了300多k，在网速没有影响的情况下，首屏的加载速度进一步提升。cdn优化前：cdn优化后：可以通过对比看出来，事实上速度并没有很大的提升，这可能与当前的网络环境有关。一、修改index.htmlCDN(内容分发网络)，是一种公共服务，他本身有很多台位于不同地域、接入不同运营商的服务器，而所谓的使用CDN实质上就是让CDN作为网站的门面
2020-10-21 11:25:09
1419
原创 使用自定义指令给前端页面或图片或视频添加水印
文章目录一、新建 watermark.js二、min.js 引入 watermark.js三、调用指令一、新建 watermark.jsimport Vue from 'vue'Vue.directive('watermark', (el, binding) => { function addWaterMarker(str, parentNode, font, textColor) {// 水印文字，父元素，字体，文字颜色 var can = document.create
2020-10-14 16:19:51
2473
3
原创 vue3-bate初体验
看详细的话 建议直接点击这里->中文文档现在可以直接通过npm安装vue3，首先要升级脚手架查看脚手架的版本vue -V从 v4.5.0 开始，vue-cli 提供了内置选项，可在创建新项目时选择 Vue 3 预设。所以如果低于4.5，可以升级npm install -g @vue/cli升级之后就可以直接安装vue3了，如下显示vue create hello-vue3部分改变：1.Mixin合并行为变更，浅层次执行合并2.v-if可以和v-for一起写，v-if优先
2020-09-25 16:45:53
238
原创 pdf添加水印
文章目录一、vue-pdf二、pdfh5一、vue-pdf在项目开发过程中，如果我们只需要展示pdf，那么我们可以选择vue-pdf，可以查看我之前的一篇但是现在的需求是需要显示带水印的pdf出来，这就存在一个问题，vue-pdf会屏蔽签名图层，导致显示不出来水印。解决方案一：我在issues上看到有人提出了这个问题。issues地址解决方案是直接修改pdf.work.js的源码，全局搜索AnnotationFlag.HIDDEN：// if (data.fieldType === 'Sig'
2020-09-25 10:50:11
1165
原创 vue视频播放——vue-video-player
文章目录一、安装二、使用三、效果一、安装github地址安装：npm install vue-video-player --save引入：import VueVideoPlayer from 'vue-video-player';import 'video.js/dist/video-js.css'//自定义样式import '@/assets/styles/video.css'样式文件（这个地方也可以写自己的默认样式）：/* 视频开始的按钮样式 */.video-js .vjs
2020-09-25 09:49:09
517
原创 electron+vue中使用NodeJS连接mysql连接池增删改查
一、二、rowDataPacket的问题这里有一个坑 rowDataPacket的问题 如下图：
2020-09-14 15:34:50
3307
6
原创 for和forEach的区别——一个小知识点
文章目录一、跳出循环二、性能之前的时候一直以为for和forEach的区别体现在语法和性能上，但是今天的时候突然发现return、break都无法结束foreach的循环。一、跳出循环1.foreach使用break时直接就会报错，如下:2.foreach使用return 只是中止本次继续执行，而不是终止循环，有点像for 循环里面的continue,然后forEach 里面的return是没有返回值的效果的所以foreach跳出循环的方式为： throw new Error("End");
2020-09-14 09:12:51
617
原创 mammoth.js/sheetjs/vue-pdf内网文件的预览问题
文章目录一、word预览--mammoth.js二、excel预览--sheetjs三、pdf预览——vue-pdf前端小功能：Word,PDF,Excel文档vue预览最新需求需要内网环境进行预览，pdf可以直接使用浏览器自带的方式进行预览，但是word和excel需要借助插件，预览本地文件，或者是内网文件，可以使用以下方法进行预览：PDF：Vue-pdfWord: mammoth.jsExcel: SheetJS一、word预览–mammoth.js安装：npm install --sav
2020-09-08 18:23:29
9228
34
原创 npm小工具之工具包
文件路径npm init一个package.json文件package.json:{ "name": "sybase-util", "version": "1.0.5", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}工具类
2020-09-07 18:36:28
429
3
原创 electron-vue不显示element的el-table问题
我们需要把element-ui加入到.electron-vue/webpack.renderer.config.js文件中的白名单里面在这句话let whiteListedModules = ['vue']添加element-ui组件修改为let whiteListedModules = ['vue', 'element-ui']如图：再运行项目，便能够成功构建出el-table表格了...
2020-08-25 18:13:48
1405
1
原创 canvas绘制坐标点连线/动态改变宽度导致canvas渲染失败
文章目录一、有关canvas二、绘制图案三、放大缩小功能四、canvas清空画布的三种方式五、动态改变宽度导致canvas渲染失败现在需要根据坐标点绘制对应的连线，于是考虑采用canvas来完成对应的功能。原图：效果图：一、有关canvas是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行。Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。如
2020-08-19 14:13:22
819
原创 性能分析webpack-bundle-analyzer及其优化打包
文章目录一、webpack-bundle-analyzer二、进行优化一、webpack-bundle-analyzer通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化。1.安装npm install --save-dev webpack-bundle-analyzer2.在webpack.config.js中配置：const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund
2020-08-13 15:44:20
8273
3
原创 eslint生成报告
首先安装eslintnpm i -g eslint然后在终端输入以下命令eslint -f compact "src"> results.txt这是将src下的文件检查后导出到results.txt文件中。如果有如下这样的报错，就检查一下.eslintignore文件。You are linting "src", but all of the files matching the glob pattern "src" are ignored.If you don't want to
2020-08-12 17:01:40
4068
原创 vue打印兼容xp32位系统/vue的打印功能
文章目录一、vue-print-nb二、vuePlugs_printjs一、vue-print-nb这个插件很好用，也很简单，但是问题就是不兼容xp32位。官方安装及使用文档1.安装npm install vue-print-nb --save2.main.js中全局引入import Print from 'vue-print-nb'Vue.use(Print); 3.使用id<div id="printMe" > <p>打印内容</p>
2020-08-11 17:40:24
583
原创 localstorage+beforeRouteLeave实现列表页和详情页的缓存
首先可以封装一个localstorage的公共方法，封装localstorage然后在main.js中全局挂载（也可以在页面上单独引入）import { setLocalStorage, getLocalStorage, removeLocalStorage, clearLocalStorage} from "@/utils/localStorage";//localStorage的挂载Vue.prototype.setLocalStorage = setLocalStorage
2020-08-11 16:41:35
377
原创 表头纵向排列
文章目录一、基于elementUI实现的表头纵向排列效果：代码：<template> <div> <el-table :show-header="false" :data="tableData" border style="margin: 20px;width:381px " > <el-table-column width="180
2020-08-06 16:57:57
3520
1
原创 直接在项目中使用Vue.use来使用自己的公共组件
之前一篇讲解了怎么搭建属于自己的组件库，那么如果不通过npm --save xxx 自己的组件，怎么直接在项目中通过use来使用自己写的公共组件呢。使用：在公共组件中新建一个index.js 文件index文件的内容如下：import commonRadio from '../components/zrd/commonRadio';import commonSelect from '../components/zrd/commonSelect';import commonMuitSelect
2020-08-01 17:20:44
799
原创 vue使用keep-alive详解——实现数据缓存不刷新、修改值后刷新、相同参数区分等
应用场景：从列表页跳转到详情页面，然后从详情页返回列表页的时候，列表页的数据不刷新，但是从其他页面进行跳转到列表页的时候，列表页的数据刷新。简单来说，是一个前进刷新，后退不刷新的功能。keep-alive是一个缓存的机制，keep-alive要配合router-view使用使用方法：...
2020-08-01 16:03:19
5748
1
转载 如何将本地未提交更改合并到另一个Git分支中
有的时候我们忘记了切换分支，直接在主分支上开始开发一个新的功能，写到一半的时候突然想起来最好是写在一个新的分支上面去，这个时候我们可以通过如下命令：方法一：git stashgit checkout branch2git stash pop方法二：git stashgit checkout branch2git stash list ＃检查在不同分支中创建的各种存储git stash apply x ＃选择正确的一个注意：git stash apply，会将当前分支的最后一次缓
2020-07-20 11:37:39
2315
原创 electron +vue 桌面端应用
electron有这么几种方式，第一种是利用官方的demo来进行构建，第二种是在vue 中引入electron，第三种是新建electron-vue项目。electron的项目不能使用history模式，也不能使用路由懒加载。一、利用官方的electron-quick-start1.显示利用官方的demo是最简单的方式，只要将项目打包后，替换demo的static和index.html即可，先clone项目：git clone https://github.com/electron/elect
2020-07-01 16:36:53
2598
3
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人