- 博客(34)
- 收藏
- 关注
RSS订阅
原创 为什么vue-router4得组合式api必须写在setup函数顶层,useRouter为什么在其他地方为undefine
我接着找到了注入该key得地方此时我们发现inject是来自vue得一个组合式api。然后顺藤摸瓜找到vue文档中写了一句话。如下图通过官方上图得两段话可可知，如果我们在setup以外得地方使用就会是undefined。那么有没有解决办法呢？遇到问题最好的办法首先肯定是看文档，文档中没有就去issus上面找，我们看到github中已经有人提了该问题下面可以看到作者大大已经回答得很明确了。目前有两个办法可以解决。
2023-10-17 11:53:36
366
原创 配置vue3+vite+eslint+prettierrc项目
以上步骤适用于所有的vue3项目，因为仅仅上续功能仅仅是编译时检测而非运行时检测所以用任何打包工具编译项目运行都是没问题的。
2023-12-06 18:32:00
679
转载 webpack深入了解——多入口、多出口以及html-webpack-plugin
牛逼啊~😲，当然，还有更牛逼的，我们如果想要替换html页面中的title，可以这样做，首先，在webpack.config.js文件中给new的实例添加一个title属性，值就是你想要修改的title名，然后，页面中需要使用模板引擎来占位，格式是这样的，这样就可以定义页面的title了。😥 莫慌，我们可以将entry定义为一个数组，然后将需要打包的文件的路径依次写入，最终打好的包，就会按我们传入路径的顺序依次排列。
2022-09-14 10:04:51
1579
1
原创 微信小程序之订阅消息
所以不管是通过云函数去发送模板消息还是在服务器中发送模板消息，最终都是要通过服务器。要么在服务器中直接调用发送模板消息的接口，要么服务器先调用云函数，然后云函数中去实现发送模板消息的逻辑。当然实际开发中还是需要服务器去调用该云函数的，因为在订阅消息时，用户信息都存在服务器上。最后多一句嘴，在我们真机调试时，在手机上订阅了消息之后，不管是服务器发送模板消息，还是通过云函数发送模板消息，都是接受不到的。最后因为上面我也说了，如果是通过云函数去发送模板消息，最终还是要通过服务器去调用该云函数。.........
2022-08-12 11:27:27
4989
原创 关于vxe-table组件默认自带的导出插件无法导出xlsx格式文件的问题
注意到文档说明了 需要安装这几个插件 ，我们都需要进行安装，然后根据红色框中的步骤配置好，下面我贴一下我的代码。我们使用vxe-table自带的导入导出的功能，会发现无法导出xlsx格式的文件。官网中介绍了 该扩展插件的原官网地址。这是我安装的插件的版本号，仅供参考。下面我们打开这个插件原官网地址。...
2022-08-09 17:52:43
1300
2
原创 如何理解泛型，泛型是什么
泛型其实就可以理解为函数的函数头function(形参)，其中的T,K，P等可以理解为函数的形参。但是在泛型中不叫形参，而叫类型参数。为什么呢，因为只有类型才能作为泛型的参数传入，例如ts中用type,interface,class这种定义的数据叫类型，这种数据就可以作为泛型的类型参数传入，而在js中使用let,var,const定义的叫字面量数据，只能作为函数的参数传入。所以总结泛型的参数，是以类型数据作为实际参数传入函数的参数是以字面量作为实际参数泛型与函数在使用上可以说一样...
2022-06-23 09:40:11
1112
2
转载 如何搭建一个本地/自己服务器私有的管理npm包的仓库
Verdaccio简介 Verdaccio 是一个开源轻量的用来做 npm 私服的包（基于 Node.js 创建的）用任何包管理工具，比如yarn,npm使用 verdaccio 是很简单的。推荐使用 nrm 来管理npm的源Verdaccio 的官网：https://verdaccio.org/Verdaccio NPM: https://www.npmjs.com/package/verdaccio安装环境最低要求Node.js V10.X 以上Npm 5.x 以上浏览器 Chrome,
2022-06-20 11:34:05
1461
原创 大文件切片上传（前端axios+formdata，后端node+koa+koa-multer）
前端实现文件切片上传的方式很简单，原理就是将一个完整的文件对象切割成一段一段的独立文件，然后将这一段一段的独立文件对像上传到后端服务器(上传方式和普通文件对象上传方式一样，放在formdata中上传就行了)，后端等所有的分段文件对象上传完毕后，然后将这些分段文件对象进行合并成一个就行了以上是处理思路，但是有两个疑问。1.怎么将完整的文件对象切割成一个个的片段文件对象呢2.这么多片段文件，假如还有其他人也在上传其他文件，那么后端在合并的时候怎么找到对应的文件片段集合，然后将其合并呢后端这里使用nod
2022-06-17 17:18:10
1630
原创 在小程序中如何使用svg图标
1.首先找到一个能够下载svg图标的网站，例如iconfont或iconpark。我这里使用的字节的iconpark网站下载svg图标。2.点击批量下载，下载一个压缩包。将下载后的压缩包解压之后就是我们选择下载的svg文件。如下图3.打开将svg文件转成base64的网站，因为在小程序中不能直接使用svg文件，得将其转成base64格式得数据作为标签得background_image得数据。svg转换网站地址:https://www.css-js.com/tools/base64.html如下图
2022-06-09 15:35:58
5321
2
原创 如何使用Object.defineProperty对数组的push等方法进行响应式监听，以及实现对象的深层嵌套监听
通常我们可以对某个对象上通过Object.defineProperty定义的属性进行数据更改读取的监听。但是对数组或是对象等引用类型数据，如果只是改变其中索引的值或者某个键的值是无法监听到的(因为监听的就是其内存地址的指向是否改变)，这个vue2中也有明确表示。当然除了以上，调用数组的push，splice等方法也无法监听到数组的更改，只有重新对数组/对象这种引用类型赋新值，改变其内存地址指向才会被监听到。那么如何达到数组调用push等方法也能达到监听的效果呢？首先我们要知道数组本身上是没有push，spl
2022-06-07 11:18:06
1019
原创 本地开发微信网页时如何调试微信sdk
在微信开发文档中说到，引入/调用微信sdk相关api的网页，都需要在公众号平台配置js接口安全域名。否则无法调试/调用。那么我们如果是在开发阶段调试不可能开发到一半然后部署到指定的js接口安全域名下，所以我们在本地应该如何去调试呢.这就又要用到微信公众平台提供的公众平台测试账号了，我们首先在公众平台的开发者工具中找到公众平台测试账号然后点进去，就可以看到下面这个界面//好的到这一步我们先暂停一下，建议大家先去看看官网。官网中写到引入微信sdk的网页都需要引入微信sdk的脚本地址，然后在网页中调用下面这
2022-05-31 17:37:46
3659
原创 VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码，参考官网的文档安装完之后可以直接运行。<template> <div class="home"> <div class="left-dragger-nav" id="left-dragger-nav"> </div> <div id="container"></div> </div></template><script lang="ts" setu
2022-05-24 17:39:38
4031
2
原创 利用vue3提供的hooks实现响应式的全局状态共享
1.下面时useCart.ts这个hooks中的代码，其实挺简单的，用原生js也可以实现全局状态共享。但是使用原生的var或let，const声明的购物车变量由于数据不是响应式的，导致购物车数据发生改变页面不会响应式的变化。这里与原生的唯一的区别就是，只不过使用了vue提供的reactive方法将购物车变量转变为响应式的，当购物车发生变化时，页面也会随之响应式的发生改变具体实现参考下面代码useCart.ts中的代码import { reactive } from "vue";interface
2022-05-24 11:40:04
4279
原创 微信网页授权，以及如何在本地调试
1.微信网页如果要授权，需要登录微信公众平台，然后在自己公众号-公众号设置-功能设置-网页授权配置回调网页地址(就是redirect_url，具体参考官网网页授权中有介绍)。但是这种需要域名，也就是需要将网页部署在配置的域名服务器上，这显然对于我们开发阶段不适合调试那么我们怎么样能够在本地进行调试呢1.首先找到自己公众号的这个位置点击进去，微信官方暂时提供一个测试号供我们使用，该测试号可以用来测试网页授权功能2.进去之后可以看到下面这个界面，这里提供的测试号的appid就是我们等会用来测试网页授权
2022-05-23 20:26:27
8542
原创 使用axios实现实时获取文件上传/下载进度。实现文件上传，下载进度条显示
下载文件实现进度条显示利用axios封装的原生onDownloadProgress属性，该属性为一个回调方法，当axios请求将文件从服务器下载时会进行回调。接收一个回调参数，该回调参数中包含总下载进度，当前下载进度。不多比比直接上代码<template> <div> <button @click="downLoad">下载</button> <p> 下载进度:{{downLoadProgres
2022-05-18 17:34:01
11831
4
转载 前端实现在线预览word(docx)，pdf，excel类型的文件
实现方案找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。文档格式老的开源组件替代开源组件word（docx）mammothdocx-preview(npm)powerpoint（pptx）pptxjspptxjs改造开发excel（xlsx）sheetjs、handsontableexceljs(npm)、handsontable(npm)pdf（pdf）pdfjspdfjs-dist(npm
2022-05-06 11:53:03
23068
7
原创 nginx常用配置(开启一个简单的服务，并为其配置反向代理，负载均衡，允许跨域等)
nginx就是负责帮我们开启服务的工具，我们知道一个服务(程序) 对应监听一个端口 .我们有些静态资源例如打包后的静态资源 自身没办法开启服务，当然你也可以用node帮他开一个服务。所以我们就需要使用nginx来为其开启一个服务，每个服务都需要运行在唯一的端口上，这样每当我们访问该端口时，就会访问到该服务，然后通过该服务的配置找到对应的资源文件。比如我们用node开启一个服务，然后node的服务就可以监听某个端口。然后我们使用node开放静态资源目录，将打包后的资源放到该开放的静态资源目录下，用户一样可以
2022-05-04 15:53:33
1512
原创 map类型转对象，set类型转数组
var myMap= new Map([ ['a',{addr:'aaa'}], ['b',[123,'xxx']] ])const obj = Object.fromEntries(myMap);console.log(obj);// expected output: Object { a: {addr:'aaa'}, b: [123,'xxx'] }var mySet= new Set([ ['a',{addr:'aaa'}], ['b',[123,'xxx']] ])const
2022-04-25 14:48:03
253
原创 浏览器调试技巧
1.debugger 我们可以通过再代码中加上debugger 对当前代码进行断点调试。当代码执行到debuuger时会终止执行2。在浏览器中可以用鼠标点击当前代码的这一行的左侧 会出现一个小红点 表示该处已经添加了一个断点。如下图所示我们可以鼠标右键点击红色小圆点 ，会弹出一个菜单选项选择edit breakpoint ，该选择为编辑断点，可以自定义断点。大概意思是，我们可以自己定义断点的条件，一般我们直接添加的断点默认时代码执行到该处时 就会停止执行。如果我们给断点添加了自定义条件，那么当代码
2022-04-17 12:40:15
3647
原创 vue项目打包到后部署服务器，某些页面出现空白页
今天将vue项目打包后的文件放到服务器上，首页和有些其他模块页面可以访问。但是出现了一些二级页面空白，nginx报404的问题。解决办法1.首先找到 vue.config.js 的配置文件，如果没有可以手动创建。然后更改其公共资源目录,如果是vue-cli3的项目，则更改publicPath:’./’ ,其他版本的另行查阅资料效果如下2.找到router配置文件，更改其路由模式为hash，并且base属性为随着项目环境变化而变化。效果如下...
2022-03-27 13:31:51
1867
原创 如何将node接口部署在服务器上通过外网访问
1.首先将本地写好的node接口。整个文件丢在服务器上，然后跟在本地运行一模一样，直接通过命令node 主入口.js 将接口跑起来(推荐使用pm2 start 主入口.js 跑接口) 。不过首先服务器要开放对应监听的端口，与安装对应的环境 例如我们用node启动就安装node 用pm2就安装pm2。然后就可以通过服务器的公网ip加对应监听的端口 就可以访问接口了。和本地跑接口的步骤一模一样，就一个步骤而已node app.js就ok了，不过要提前开放对应的端口推荐使用宝塔，直接可以将项目丢到服务器上简
2022-03-09 15:26:44
5017
3
原创 单页面spa应用页面切换，路由的原理
对于单页面进行页面切换的原理，其实就是利用路由找到对应的组件页面。然后替换指定标签进行显示例如我们在vue的main.js中一开始总将app.vue挂载到指定标签上。这样我们创建的所有其他路由页面都是app.vue的子路由页面，如果进行显示就要替换app.vue中的router-view。让我们输入路由path找到对应的components组件然后替换其父级路由中router-view标签进行显示。这样就实现了单页面也能进行多页面切换显示如图...
2022-02-14 20:41:29
684
原创 使用iconfont彩色图标(附在vue3以及react中动态使用svg图标)
使用步骤如下：第一步：点击生成得图标代码链接进去复制图标 js 代码引入到html中(注意这是js代码需要通过script方式引入)：2.利用svg标签写入对应图标得class生成对应图标<svg aria-hidden="true" > <use xlink:href="#icon-caidan1"></use> //xlink:href="#图标名" 注意使用svg图标一定要使用svg标签 </svg>3.完整代码示例
2022-02-10 15:52:02
896
原创 迭代器和生成器
//一个对象只要满足迭代器协议 这个对象就是迭代器 //可迭代对象 内部含有一个[Symbol.iterator],调用该方法会返回一个迭代器 //例如 array，set，arguments都是可迭代对象 调用[Symbol.iterator]方法返回一个迭代器 然后可以通过next()拿到里面的值 //for of只能遍历可迭代对象 ， forEach等方法不能遍历可迭代对象 var noth=['abc','cba','bca'] var nameList=['
2022-01-18 17:25:16
228
转载 JavaScript 标准之 Map对象
前沿一直以来使用数组和对象来定义数据模型，前几天在翻阅ES6语法的时候，突然发现有一种Map对象对操作键值对特别好用，而且代码更简洁明了，简直太棒了。今天，我们就来一步步了解什么是Map对象，详细给大家介绍一下Map对象的属性和方法。希望大家以后再数据操纵方法多一种解决问题的方法，这是ECMAScript 6 新增的数据结构。 定义Map对象保存键/值对，是键/值对的集合。任何值(对象或者原始值) 都可以作为一个键或一个值。Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应
2022-01-18 16:14:20
755
原创 用户权限校验的两种方式 1.cookie结合session 2.jwt(token)。(cookie与session的认识与作用)
cookie结合session，以及使用jwt。这两种方式解决权限校验问题
2022-01-04 11:25:01
1585
原创 如何使用js读取本地文件并将内容展示到页面
首先说方法，利用js中fileReader对象读取文件1.首先创建fileReader对象2. fileReader对象 读取不同文件调用的方法不同 所以要创建正则判断读取文件类型3.直接上代码(js部分代码) var reg=/(.csv|.txt)$/m var reg2=/(.mp4)$/m var reg3=/(.jp[e]?g|.png)$/m var reg4=/(.mp3)$/m const input = document.querySelector(
2021-11-26 15:01:14
13401
原创 关于在vue中如何上传文件以及下载文件
关于在vue中如何上传文件以及下载文件上传文件 fileLoad() { //利用formdata表单对象转换 //获取到选中的文件 file = document.querySelector("#file").files[0]; //拿到选择的文件 //创建formdata对象 并将文件转换为formdata格式 var formdata = new FormData(); formdata.append("
2021-11-03 10:16:41
4027
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人