浩星

使用 intro.js这个插件，来实现一个引导性的效果，适用场景，比如：新手引导页，操作说明等等。

vue2/vue3中使用的富文本编辑器vue-quill

众所周知，vue3突破了每一个vue文件中只能有一个根标签的限制，但是我们还有很多项目都是vue2的项目，如果让vue2中实现一个类似的效果呢，像react的16.2.0的版本之后，可以直接用,vue3中使用tsx也可以轻松使用，vue2要想实现这种效果，需要借助一个插件 vue-fragment。

在我们开发项目中，node是我们必备的工具，在为了适应各种不同的开发需求的同时，node也有很多好用的插件提供给我们，这里整理个人的使用分享给大家！

在vue2于2023年底正式宣布不在维护，vue3使用越来越频繁的时刻，我们实现项目的辅助框架也越来越多。element, iview, antd 等经典框架继续风靡一时，不过也有很多好的框架，功能也强大，比如我们今天说的主角 arco.design ，他是字节跳动的产品，从2022到今天，经历了时间的检验，他的ui性能，功能的扩展都是很强大的，这里说说他的使用。

js判断当前是否是企业微信环境，微信环境

vue/vue3/js来动态修改我们的界面浏览器上面的文字和图标

vue3项目中实现打字机的效果。

项目中如果想本地开发使用px，但是界面上线以后界面是自适应的效果,可以有多种方式来实现效果。

用 vue+animation 来实现一个展开与关闭的效果。

前言： 之前分享的有 rtmp直播流 ，flv直播流的一些方法，这里分享下，播放 websocket的直流的方法，使用的方法是JSMpeg，JSMpeg是JS写的视频、音频解码器，能使用WebGL&Canvas2D渲染以及WebAudio声音输出。相关资料：1、官网入口2、github3、官方例子4、gitee案例实现效果：暂无图片遇到问题：封装成组件，做视频的墙的效果，但是一页放9个以后，第一个视频会崩溃，查了资料以后，目前暂...

前言： 这里来分享一些vue项目性能优化的一些实用的方法，这里使用 useless-files-webpack-plugin 来查找无用文件。实现步骤：1、安装插件npm i useless-files-webpack-plugin -S2、vue.config.js中配置const UselessFile = require('useless-files-webpack-plugin')chainWebpack: config => { ...

前言： vue项目中使用水印效果，可指定容器目录：效果图：1、不指定容器2、指定容器实现方法：1、新建一个配置文件watermark.js ，可放util，也可放别的地方2、在main.js中全局配置4、页面中使用-指定容器5、如果觉得字体之间的距离太大了，改这个属性就行了到此结束！效果图：1、不指定容器2、指定容器实现方法：1、新建一个配置文件watermark.js ，可放util，也可放别的地方let ...

实现前言： 这是一个基于element的聊天框插件，可扩展性还是很强的。JwChat：官网入口gitee地址：入口大佬图片与实现效果：实现步骤：1、安装：cnpm i jwchat -S2、配置使用：//element 必须import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);//聊天...

前言： 使用html2canvas，可以实现把某个区域变成图片的base64数据官网入口：点我实现步骤：1、引入npm引入：cnpm install --save html2canvasjs引入： html2canvas.js html2canvas.min.js2、在需要使用的vue组件中引入：import html2canvas from "html2canvas"3、将制定区域内转成图片,...

前言： 在我们使用框架开发项目的时候，会发现各种不同种类的框架可以帮我们提高开发效率，比如我们的element,iview,mint-ui,vant等等，当然，大屏也是有框架的，就是我们要说的dataV.官网地址：vue入口 react 入口官方示例：演示效果：http://datav.jiaminghi.com/demo/construction-data/index.html源码入口：https://github.com/DataV-Te...

前言： 在项目中，支付功能是一个常见的功能，调用支付宝时，后段给我们的是一个form的富文本内容，我们应该zen'm

前言：vue中实现嵌套多层拖拽功能。官网入口：https://www.npmjs.com/package/vuedraggable实现效果：（拖动左侧调整一级的顺序，拖动右侧调整二级的顺序）实现步骤：***这里使用了插件 vuedraggable第一步：安装插件cnpm install vuedraggable --save第二步：在页面上引入插件并注册import draggable from 'vuedraggable'components: {...

前言： 在使用正则校验姓名的时候，会发现，很多生僻字根本校验不到。这里提供方法，经测试可用。方法：methods: utf8ToUtf16(h, l) { var sum = ((h - 0xD800) * 0x400 + (l - 0xDC00)) + 0x10000 return sum }, checkCode(val, maxLen) { var len = val.length var lenRel = len...

摘取源码地址：入口摘要：Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。Vue.js 从诞生至今已经 5 年，尤大在今年 2 月份发布了重大更新，即Vue 2.6。更新包括新增 scoped slot 语法、性能提升、动态指令参数等等。其中我们最关注的是错误处理。异步错误处理Vue 的内置错误处理机制（组件内 errorCaptured hook 和全局 errorHandler hook）现在也会捕获 v-on 处理程序内部的错误。此外，如.

前言： 一款很使用的移动端的table插件，内容太多左右拖拽滑动官网入口：进入实现效果：实现代码：<template> <div> <v-table is-horizontal-resize style="width:100%" :columns="columns" :table-data="tableData" row-hover-color="#eee" ...

前言： 在vue种使用神策进行数据埋点一、数据埋点的意义：所谓埋点就是在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计（track this virtual page view），统计操作行为（track this button by...

前言： 分享一款神奇，可以在手机上实现，跟pc端f12打开调试一样的效果。官方地址：入口实现效果：

前言： vue-aplayer的api介绍来源：入口目录：一、安装使用 npm使用 yarn推荐二、快速开始传统方式vue中使用：点我进入详细步骤三、具体配置参数fixed可选mini可选autoplay可选theme可选loop可选order可选preload可选volume可选audio必填#customAudioType可选mutex可选lrcType可选listFolded...

前言： 在移动段使用vue-aplayer这款音频播放组件的时候，发现他默认的时候看不到总时长，只有点击播放才能看到，我的数据是从后台直接拿来的，观察官网没有这个问题，既然出现问题就得解决问题，这里分享下我的解决办法：解决办法一：（尝试过但是不建议使用的）：1、后台数据需要传一个默认总时长过来：props: { /** * 音频配置 * */ songInfo: { type: Object, default: ()...

前言： 获取浏览器的指纹码操作步骤：1.vue安装插件（1）使用CDN在线获取：https://cdnjs.com/libraries/fingerprintjs2（2）使用bowerinstall命令进行安装：bowerinstall fingerprintjs2（3）npm 下载：cnpm install --save fingerprintjs22.vue需要用到的地方引入import Fingerprint2 from 'fingerpr...

前言： 之前在移动端使用audio的时候老是有各种问题，尤其是总时长一到移动端就拿不到，这里推荐自己使用的一款移动端音频组件vue-aplayer官网入口：https://gitee.com/dreamteam_322/vue-aplayer目录：实现效果（我这里是在样式里面把功能注释了）：实现步骤：1、安装：2、封装组件 aPlayer.vue ：3、调用template:js部分：官方api文档：安装NodeCDN运行时要求使用...

前言： vue+wps文档的使用方法。源码入口：https://gitee.com/yeefairy/wps-view-vue源码演示入口：https://ljserver.cn/wpsonline未完待续。。。

前言： 在很多时候我们的vue第三方插件装好的包是可以直接用并满足我们的需求的，但是很多时候也需要改动的，比如改动第三方插件的样式，或者功能。目录：改动css样式：（当引入插件的css文件的时候，比如element,iview,还有别的插件）步骤：1、打开node包里面对应的插件，能看到这样的一个结构，src代表本地，dist表示打包出来的文件2、打开src下的css文件直接进行改动就行改动js功能：改js功能的话不能直接在src里面改动，是没有用的，因为我们引入的实际...

前言： 之前使用过v-viewer实现图片查看的功能，但是不知道今年怎么回事，node线上的包下载下来不能用了，实现不了效果，又找到了一另一个好用的插件，那就是viewjs。实现效果：实现步骤：1、安装插件npm install viewerjs2、案例代码<template> <div id="index" ref='imgView'> <ul class="imgUrl"> <li v-for...

前言： 在vue中生成条形码的插件。vue-barcode官方文档vue-barcode是JsBarcode的一个简单包装。所以在使用时的配置属性需要在JsBarcode中查看JsBarcode官方文档展示效果：使用步骤：步骤一：安装cnpm install vue-barcode -S步骤二：配置，可在main.js中直接配置import VueBarcode from "vue-barcode";　Vue.component(‘barc...

前言： 实现打开摄像头，并识别人脸。实现效果：实现步骤：一、安装（1）官网下载 tracking.js 的代码包官网入口（2）npm下载执行命令： cnpm install tracking --save二、demo案例代码<template> <div class="testTracking"> <video id="video" ...

前言： vue2-viewer 是一款强大的图像浏览插件，可以实现图像的放大预览，旋转，任意比例放大和缩小等功能。使用步骤：1、安装：2、在main.js里面注册，也可以按需引入更多：vue2-viewer 提供两种使用模式，单图片模式和多图列表模式。1、单图片模式2、多图片模式其他资料：使用步骤：1、安装：npm install --save vue2-viewer2、在main.js里面注册，也可以按需引入import ImageV...

前言： 目前总结的二维码方法有两种，1、是 qrcode，2、是 qrcodejs2 ，这里说下qrcodejs2步骤：1、安装： cnpm install qrcodejs2 --save2、调用： import QRCode from 'qrcodejs2' js中调用 <div ref="qrCodeDiv" ></div> template中添加容...

前言： vue-cli3/4中引入高德地图实现我们的定位效果，也可动态改变值。效果图：实现步骤：步骤一：申请高德的key步骤二：在public/index.html里面添加<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"...

前言： 之前在使用gis在页面渲染地图时就用到过点击让gis容器全屏展示，后来有遇到了，在这里记录一下，使用的是window自带的exitFullscreen方法template:<span @click="screen">全屏</span>js部分：data:fullscreen:false,methods: sc...

前言： 推荐一款特别优秀的插件，viewerjs ，他可以实现图片预览功能，点击图片实现弹框操作图片的效果，点我进入GitHub地址：实现效果：这里说先下实现步骤：步骤一：安装，注意这里是 v-viewernpm install v-viewer --save步骤二：在 main.js 中配置或者在使用的页面配置，我这里是在使用的页面配置调用方法一：...

前言： 因为项目需要，需要实现一个上传完图片，对图片进行二次处理的需求，就使用了vue-cropper来实现这个功能，总的来说还是感觉非常不错的软件，这里分享下我的使用方法，以及vue-cropper的api（见最下）实现效果：实现步骤：步骤一：项目中安装 vue-croppernpm install vue-cropper步骤二：在main.js中注册...

前言： 在看了vue的一些源码后，想将自己觉得有使用价值的一些方法封装处理，这里的话是对正则的封装，里面有很多常用方法，比如将金额换成大写，校验密码的格式，强度，校验手机号码，校验邮件.......使用步骤：第一：按需引入内部功能：import {要使用的方法} from '@/libs/rex_check'第二：设置变量接收方法返回值let nowVal...

前言： 安装指定版本的video.js,新版本的不太友好一、安装指定版本是正常命令后加‘@版本号’npm install videojs@5.8.2 --save二、在node_modules中找到video.js的package.json中可以看到：...