- 博客(50)
- 收藏
- 关注
RSS订阅原创 记一次使用vue-markdown在vue中解析markdown格式文件，并自动生成目录大纲
,i++) {// 设置idlet id = i;index++;});// });// }},},
2023-10-11 21:15:00
2953
原创 记一次安装nvm切换node.js版本实例详解
打开“控制面板”中“卸载程序”，直接卸载node。这样就能卸载掉node。有时node文件卸载有残留的情况，可以参考上面有详细介绍。
2023-07-26 15:41:39
752
原创 patch-package给依赖打补丁实例详解
先修改依赖文件，然后运行patch-package来创建patch文件了。我这里用element-ui来举例子。patch是锁定版本号的，如果升级了版本，patch内容将会失效。可以在package.json锁定版本号。此时，系统会自动创建一个文件夹，如下图所示。如果提示如下，则表示不支持该包管理器。官方只支持 npm 和 yarn。官方只支持 npm 和 yarn。注意：不要使用cnpm。...
2022-09-01 11:43:37
3809
1
原创 正则校验（持续更新）
ip校验可校验以零开头，如1.01.001.1会提示不合法let exp = /^((1[0-9][0-9]\.)|(2[0-4][0-9]\.)|(25[0-5]\.)|([1-9][0-9]\.)|([0-9]\.)){3}((1[0-9][0-9])|(2[0-4][0-9])|(25[0-5])|([1-9][0-9])|([0-9]))$/;
2021-10-30 11:30:00
235
原创 vue项目postcss-px-to-viewport自动适配各种分辨率，px单位自动转vw单位，脚手架cli2.0、cli3.0、cli4.0配置方法汇总
背景介绍：有个项目需要适配pc端的多种分辨率，我想到了px单位自动转vw的插件，但是我的项目脚手架用的是cli3.0的版本，我引入postcss-px-to-viewport后一直无法生效，找了很多地才找到cli3.0的配置方法，下面我把各个版本的脚手架的配置方法都汇总起来，方便查阅。提醒一下大家，这个插件不能转换写在标签中的style行内样式安装插件npm install postcss-loader postcss-px-to-viewport --save-devcli4.0配
2021-10-17 11:15:00
1762
原创 十分钟搞懂js垃圾回收机制、内存泄露、闭包
js垃圾回收机制的特性？1、全局变量不会被回收2、局部变量会被回收，函数一旦运行，函数内部的变量会被销毁3、只要被另一个作用域引用就不会被回收为什么会有回收机制？简单来说，假如我们的手机开了很多app，但是我们的没有关闭这些app，这些app就会在后台运行占据内存，导致我们的手机越来越卡。于是我们的手机系统就会按照固定的时间间隔周期性的去关闭这些后台app。同理，JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不
2021-04-26 20:29:17
428
转载 【转载】金三银四，这些JavaScript、ES6前端面试题及答案解析您看了吗？
JavaScript、ES6基础面试题及答案解析② 1、js基本数据类型有哪些？2、Ajax如何使用3、如何判断一个数据类型是NaN？4、闭包是什么？有什么特性？对页面有什么影响？5、谈谈js中常见的内存泄漏：6、事件委托是什么？如何确定事件源（Event.target 谁调用谁就是事件源）7、什么是事件冒泡？怎么阻止事件冒泡...
2021-04-22 17:32:10
182
原创 vite2.0构建一个vue3.0的项目
vue3.0于2020年9月18日晚11点半正式发布，时间已经过去半年多了。我们必须赶紧学习vue3.0赶上前端同学们的脚步。那么，vue3.0带来了哪些改变呢？它的优势是什么？vue3.0 的发布与 vue2.0 相比，优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；更快： 1、virtual DOM 完全重写，mounting & patching 提速 100%； 2、更多编译时 （compile-time）提醒以减少 runtime 开销； 3、基于 P
2021-04-21 20:54:57
277
原创 vue引入echarts轻松实现3D地球带飞线效果，示例详解
如图所示，vue利用echarts轻松实现3D地球效果。为了实现这个效果，查阅了很多文档，但是大部分都不全，总是少了点东西，导致代码报错。我这次把我实现的全过程分享给同学们。特别是要注意echarts-gl版本问题。...
2021-03-25 19:05:07
8989
13
原创 vue父组件调用子组件this.$refs报错，undefined、not a function问题解决方法
同学们好，最近在开发的时候，碰到一个问题，需要父组件调用子组件的方法。本来是信手拈来的一件小事情，纠结了我好久，老是报错，提示not a function。网上查了一下，并没有能解决我问题的，甚至还有不少误导我的文章。有的文章中写道，子组件必须挂在父组件第一个子标签的中。于是我把我对父组件调用子组件方法的理解整理出来分享给大家。一、提示undefined这种情况下，一般都是父组件调用子组件方法的时候，子组件还未渲染成功。要搞清楚这个问题，我们要搞清楚父子组件的生命周期就行了。加载渲染过..
2021-01-16 23:09:16
37674
22
原创 TortoiseGit状态图标不能正常显示的解决办法
我们平时用git管理代码仓库的时候，如果有更新、冲突，不能很直观的看到文件夹的状态。百度了一下，网上大都是修改注册表，但其实一般不是这个原因。一般情况下，我们只需要修改Icon Overlays的Status cache。一、右键点击桌面空白处，打开TortoiseGit的Settings二、Icon Overlays的Status cache三、重启电脑，你就会发现你的小乌龟箭头出来了。...
2020-12-28 19:04:04
1860
1
原创 npm安装淘宝镜像，并解决系统禁止运行脚本
平时我们开发项目的时候，如果使用npm去下载一些插件，会有一些问题。1、速度会比较慢。2、因为网络原因可能会导致下载失败。所以，我们一般会安装淘宝镜像，也就是cnpm去下载插件。全局安装cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org检查cnpm是否安装成功cnpm -v如果提示此系统上禁止运行脚本，如图所示。如图所示，提示此系统上禁止运行脚本，则需要用管理员身...
2020-12-23 14:55:06
611
4
原创 echarts中国地图数据迁徙图，带导弹动效+省份热点数据分布，vue实例详解
如图所示，最近在做大屏项目的时候，有个需求，需要有数据迁徙的动态效果图，还要有每个省份的数据热点分布。在网上找了很多资料，没有看到将两个需求都实现的文章。只能自己动手干，于是查了很多资料，终于将两者合二为一，现在分享给大家。安装echartsnpm install echarts --save在main.js中添加import echarts from 'echarts'Vue.prototype.$echarts = echarts在组件中使用<template> &l.
2020-10-29 10:19:27
4932
9
原创 vue利用echarts绘制项目进度条，实例详解
如图所示，想要实现清晰表达当前项目的进度，可以使用百度的免费插件echarts。官网地址：https://echarts.apache.org/zh/index.html里面文档和api都很齐全，如果还是不太懂，可以去看看echarts社区的开发者开源的各种实例，非常齐全。地址：点击进入百度echarts安装我这里就不赘述，有大量的资料可以查询。下面我们就开始开发我们的项目进度条。...
2020-10-26 11:38:21
4795
6
原创 vue-carousel-3d轮播图效果，实例详解，可实现宽度自适应
如图所示，这是一个大屏项目的3d轮播图效果，下面跟着我来详细实现这个轮播效果。官网地址：https://wlada.github.io/vue-carousel-3d/如图所示，这是轮子工厂里面的vue-carousel-3d插件中的一些参数，文档。可以参考。地址：轮子工厂安装npm install -S vue-carousel-3d调用1、全局注册，main.jsimport Vue from 'vue'import Carousel3d from 'vue-carousel-3d.
2020-10-22 15:16:49
10356
15
原创 vue封装好看的搜索框组件，input自动获取焦点
我们做vue项目，一般会封装一些常用的组件，今天我就把我自己封装的搜索框分享给大家，样式简洁漂亮，点击搜索，input输入框会自动获取焦点。如下图所示html部分<template> <div class="search_box"> <div class="search_btn" @click="onShow" v-if="!isShow"> <img @click="clickSearch" src="@/assets/images
2020-08-21 16:00:11
3187
7
原创 vue手机端，纯前端实现滚动懒加载，分页加载数据
最近做的一个项目，后端的接口由于某种的原因，一次性把所有的列表数据全部返回给前端了。所以需要前端做个滚动懒加载的功能，并把数据做个拦截处理。效果如下图所示：因为我的框架用得是：http://mint-ui.github.io/docs/#/zh-cn2/infinite-scrollhtml部分 <div class="progress_list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
2020-08-21 15:10:57
3268
5
原创 一文读懂，http、https、websocket协议
最近，看了不少关于网络协议的文章。今天呢，我就把那些文章做个总结，然后加上自己的一些感悟，分享给大家。 我会从这以下几个方向跟大家分享：http、https、websocket协议发展历史什么是http协议？什么是https协议？什么是websocket协议？一、http、https、websocket协议发展历史1、http发展历史版本产生时间二、什么是http协议？1、http协议的定义http(Hypertext transfer protocol)超
2020-07-09 14:53:44
3150
原创 接手同事vue项目两个月的血和泪，关于vue项目性能优化，缩短首屏加载时间
最近接手了别人做的vue项目，项目跑起来后，有些页面很卡，首屏加载也慢，打包速度也慢。于是，研究了很久vue的项目性能优化，下面我将从两个部分来详解vue项目的性能优化：代码优化webpack打包优化一、代码优化1、v-if 和 v-showv-if 是懒加载，当状态为true时才会加载，并且为 false 时不会占用布局空间；v-show 是无论状态是 true 或者是 false，都会进行渲染，并且只是简单地基于 CSS 的 display 属性进行切换，并对布局占据空间对于在项目中，需
2020-07-01 19:59:33
2267
9
原创 webpack分步骤实例详解，轻松掌握webpack4的使用技巧
上篇文章简单介绍了一下webpack的特性，本篇文章再来和大家好好讲讲webpack的实战运用。文中的实例是基于webpack4的，大家要注意自己的版本了。简单项目打包新建一个webpack-deme文件夹，然后进入文件夹执行命令行npm init -y这时，我们会看到文件加下生成了一个package.json的文件，该文件包含了当前工程所需要的所有依赖关系。然后执行命令行npm install webpack --save-dev这时，会生成一个node_modules的文件夹，里面是一些
2020-06-16 11:09:53
1263
原创 webpack的功能介绍以及如何使用webpack
最近，看了很多webpack的文章，我现在就把这些这几天看到的内容做个汇总。大家可以先去webpack官方文档了解一下：webpack中文网什么是webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。简单来说，WebPack会分析你的项目结构，找
2020-06-11 16:10:45
2708
1
原创 VSCode 离线安装插件，实例讲解
由于在开发银行系统，开发环境无法连接外网（为何会有这么奇怪的开发环境，但是我们程序员不能说不 ），所以我们所需的插件只能离线下载后引入进去，下面是我的具体操作流程。第一步，进入官网进入vs code官网下载所需插件，官网地址：https://marketplace.visualstudio.com/vscode第二步，查找所需插件搜索查找所需的插件，如图所示：第三步，下载插件下载插件第四步，离线安装插件方式一：vs code软件引入式安装方式二：把下载下来的离线安装包拷贝到 VSC
2020-05-12 15:33:14
5073
3
原创 git使用手册
拉取提交代码git clone XXX (XXX为git仓库地址，克隆线上代码)git pull (拉取更新内容)git add . (git提交，点代表当前目录下的所有文件)git commit -m ‘xxx’ (暂存到本地， xxx为提交的描述)git push (添加到线上仓库)git checkout master (切换分支)git merge origin/index-icons (合并分支，将 index-icons合并到主分支，然后再次 git push一次即可完
2020-05-09 13:33:36
505
原创 一文读懂，axios
今天，我们从如何使用axios以及axios的概念，这两方面来仔细聊聊axios。1、安装使用axiosnpm安装 npm install axios --save通过cdn引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>新建http.js，封装好axios的get，pos...
2020-04-16 14:55:34
826
原创 一文读懂，vuex
上篇文章没说的vuex，现在就来全面讲讲vuex。其实我们搞懂下面这几个问题，就能真正理解vuex。1、什么是vuex？vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。2、vuex的属性？state存储数据，存储状态；在根实例中注册了store 后，用 this.$store.stat...
2020-04-15 20:46:05
652
原创 一文读懂，vue组件传值
看了很多关于vue组件传值的文章，于是想把文章总结一下，把关于vue组件传值好好聊聊，欢迎大家指正。组件之间传值主要分两种1、父子组件2、非父子组件1、父子组件传值1、props方法父组件嵌套的子组件中，使用v-bind:msg=‘xxxx’进行对象的绑定，子组件中通过定义props接收对应的msg对象父组件<template> <div> &...
2020-04-14 15:35:07
1781
原创 vue pc端 支付宝微信支付，实例详解
因为业务需要，公司需要在web端网页生成二维码，通过手机扫码实现支付宝，微信支付的功能。实例如下：1、安装二维码生成插件，我这里用的是qrcodejs2插件，具体安装方法看我上一篇文章，生成二维码2、直接上代码，这里的支付宝支付是直接生成新的html页面，支付成功后自动跳转回我们的网站，微信支付是生成二维码，沦陷后获取是否支付成功信息 //前往支付 submitPay() {...
2020-01-17 14:58:50
3694
1
原创 vue 请求拦截 接口报错 自动跳转到503提示页面
做项目的时候，有时候接口报错，或者服务器挂了，我们需要做一个错误页面，告诉用户此时服务器挂了。在网上找了一下，并没有清晰易懂的文档，我就把我的项目里面用到的分享出来。新建一个请求拦截js文件，代码如下：import axios from 'axios'import router from '../router.js'// 创建 axios 实例export const Axios = ...
2019-12-30 10:52:55
4851
1
原创 es6常用数据格式转换（持续更新）
1、在数组中添加对象，push()let arr = [{a:1}]let obj = { b:2}arr.push(obj) //数组新增对象 2、数组转换成字符串，并且用指定符合分割，join()var joinArr = ["hello","world"];var joinArr1 = joinArr.join(","); // joinArr1: "hello,world...
2019-12-18 18:25:47
1257
原创 vue 调用打印机插件 LODOP 实例详解
最近的项目需要调用打印机，把网上的一些资料整理一些，分享给大家，需要注意的是lodop会有脚标，如果想去掉脚标，只能先预览再打印，或者购买版权。lodop官网vue案例地址：点击进入安装打印机驱动，设置打印尺寸这里就先不分享了。直接上代码1、下载LodopFuncs.js文件，把js放在常用的js文件夹中2 、修改LodopFuncs.js文件//在文件最底部添加一行代码，把该文件中的...
2019-12-12 14:02:38
3382
原创 vue 生成带logo的二维码 qrcode-vue 支持下载图片 实例详解
最近的项目上有个需求，生成带logo的二维码，网上大部分都是基于JQ插件jQuery.qrcode。对于vue项目并不适用，翻阅了大量资料后，我找到了qrcode-vue这款基于vue的生成二维码的插件，非常好用，分享给大家。官网地址点击进入：qrcode-vue安装组件npm install --save qrcode.vue # yarn add qrcode.vuehtml部分...
2019-12-12 11:27:30
4454
13
原创 vue 上传视频 获取视频时长 带上传进度条 实例详解
如同所示，实现上传视频的功能：html部分//element-ui提供的上传组件el-upload<el-upload class="avatar-uploader el-upload--text" action="#" :show-file-list="false" :before-upload="beforeUploadVideo"> <vide...
2019-12-12 11:02:05
4599
8
原创 Element/vue router连续点击同一路由报错解决方法
写项目的时候，多次点击同一路由地址的时候，router会报错，错误如下：网上查了一下，发现是因为router版本bug，需要升级router ，方法如下(亲测有效) ：第一种方法，升级vue-router：在项目目录下运行npm i vue-router@3.0 -S第二种方法，不升级vue-router，修改main.js// main.jsimport Router fro...
2019-11-02 14:53:48
2122
1
原创 vue 动态引入图片，背景图引入，图片自适应盒子宽高，不会变形拉伸
html部分<div class="imgBox" :style="{backgroundImage:'url('+imgUrl+')'}"></div>css部分.imgBox{ width: 250px; height: 150px; background-size: cover;}
2019-11-02 14:21:16
4538
原创 web pc端 微信授权登陆 实例详解
首先，看看微信官方文档，了解一下具体实现步骤微信官方文档： 微信登陆开发指南基本了解了微信登陆的流程后，然后我们再来一起踩坑1、先去微信公众平台申请网站域名，appId2、调用微信地址生成二维码// 微信登陆usewxlogin() { let appId = 'wx515d8d1893f1e1f5' //公众号平台提供的appId let redirectURI = 'h...
2019-11-01 10:45:46
5581
1
原创 vue 简单实现返回顶部，带动画过渡效果
很简单的vue返回顶部，但是网上查了很多方式，并不好用，我把我项目上面的方法分享出来。效果线上预览：返回顶部html<a @click="backTop"> <i class="el-icon-arrow-up"></i> </a>js//返回顶部backTop() { let top = document.documen...
2019-10-31 13:53:42
1742
原创 vue+element 上传图片时获取索引值index
由于element上传图片的时候调用的 before-upload 方法不能传参数，只能传文件，如下图所示：但是我们想要获得本次上传图片的索引值，没办法再这个方法里面传参数，如下图所示：我们想要获取当前索引值，就需要再包裹上传图片组件的div上面添加点击事件，点击获取当前索引值。代码如下://html部分<div class="relevanceGoods-box" v-if="...
2019-10-07 16:38:30
2717
原创 es6 两个数组合并，并且根据某个字段去重
例如两个数组根据id字段去重//数组1let arr1 = [ { id: 1, name: "张三", age: 18 }, { id: 2, name: "李四", age: 18 }, { id: 3, ...
2019-09-30 16:15:47
5928
4
原创 微信小程序登录，getPhoneNumber手机号授权登录
微信小程序最新授权登录小程序可以通过getPhoneNumber来获取用户手机号，但是getPhoneNumber必须绑定在button组件里。详情官网：微信小程序获取手机号如何实现页面进入小程序授权登录？实现方法：写一个类似微信授权登录的页面，让用户通过按钮触发getUserInfo，实现登录授权。再用户进入小程序的时候加个判断，如果未授权，跳到这个登录页面，如果授权，跳到首页。实现...
2019-07-30 15:04:22
13915
8
原创 微信小程序兼容ios，时间戳在ios上面显示NAN ，几个需要注意的地方
最近写项目的时候，获取时间戳的时候发现了在ios上面显示NAN，网上查了一下，很多东西讲的不详细，没办法解决我的问题，花了一点时间研究了一下，现在分享给大家。后端传的值是2019-05-30 20:08:40.0，如果需要用在ios计算时间，需要利用正则把年月日中间的 - 换成 / 。var oldDate = '2019-05-30 20:08:40.0' //后端传入的时间字段var ...
2019-06-05 11:52:52
1355
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人