m0_51431448的博客

前端对图片压缩主要两种形式：一种是手动压缩项目中的静态资源图片，这样在打包的时候可以减小打包体积。另一种就是我们在上传图片到后端服务器之前在前端对当前的图片文件进行压缩。当然我们可以在上传前限制上传图片的大小，但其实限制图片大小体验不好，比如限制个2MB，现在的手机随便一拍原图可能就10多MB，所以我们这篇就说下对图片Blob的压缩方式。canvas是可以压缩图片的哈，不过它只能压缩JPG、JPEG格式图片，对png格式却无能为力。这篇说一下通过一个插件来实现对文件Blob的压缩。

平时开发中，我们经常遇到的场景应该是调用后端接口返回给前端pdf格式的文件流，然后我们可以通过URL.createObjectURL的方式转为object url临时路径然后可以通过window.open的方式来打开一个新的浏览器页签来进行预览，效果如下图：但有时候这样满足不了的需求，它不想这样预览，不想要那么多乱七八糟的东西，我只要PDF文件中的内容，然后在项目页面中类似个弹窗似的直接展示pdf文件的内容。所以，这篇就来说一下，我们可以将pdf文件转为图片来进行展示。

vue3.5发布好多天了，所以尽快来看一下新出了哪些特性。在3.5中，Vue的响应式系统经历了另一次重大重构，实现了更好的性能并显著提高了内存使用率（），而行为没有变化。此重构还解决了在SSR期间因挂起计算而导致的过时计算值和内存问题。此外，3.5还优化了大型深度响应式数组的响应性跟踪，在某些情况下使此类操作的速度提高了10倍。这里只介绍平时经常会有的东西、经常会写的东西、实用的东西哈。

在Vue2中 我们经常使用 >>> 或 /deep/ 样式穿透 修改elementui里面的样式但是Vue3中 弃用了 >>> 和 /deep/ 使用 :deep() 代替这是在 Vue3中使用 /deep/ 给出的警告修改为如下就可以：...

最近看到vue版本更新到3.4.x了，其中有个defineModel API，这个API就是Vue3简化组件v-model的写法的，所以这篇就一块儿来总结一下vue中的组件v-model先说下vue2中的使用，再说下vue3中的使用。

找到node_modules/@dataview/datav-vue3/package.json。然后我们pnpm dev启动的时候直接报错，并且发现dataV下面有波浪线报错。最后再重新执行npm install或者pnpm install方法即可。后来发现该库中的package.json中给的出口有问题。然后在package.json中scripts中添加。新建lib文件夹，将修改好的文件放在其中。然后main.ts全局注册。

npmjs: https://www.npmjs.com/package/epubjs 在线电子书转换器简单封装： src/hooks/使用： 这个示例电子书地址：https://example-files.online-convert.com/ebook/epub/example.epub 直接下载下来，放在public/static下。这篇只是简单写一下使用，还没有正式用到更多可以参考另一位博主的文章：https://blog.csdn.net/qq_42484429/art

我们在vue项目中，使用vue-router跳转的时候，在某些需求中可以使用router.resolve({path: '/test'})，返回一个返回一个路由地址的规范化版本，其中包含href属性，那我们就可以使用window.open()来打开一个新的浏览器页签跳转至某个vue页面。这篇就是要说一下之间的通信。

Monaco-editor，一个vs code 编辑器，需要将其继承到项目。不说闲话了，直接上代码。

在vue3中我们可以使用@wangeditor/editor、@wangeditor/editor-for-vue来实现其功能。

说一下Animate.css这个动画库，很多的动画在这个库里面都定义好了，我们用的时候可以直接使用里面的类名就可以了，就是直接目标元素绑定对应的类名就可以实现动画效果，非常方便，库其实也相对简单，使用起来也简单。这里示例就以v3为例了，v2也是一样的。

简单再说一下isProxy、isReactive、isReadonly、toRaw、shallowReactive、isRef等Vue3中其他的一些API

首先jspdf这个库就是用来生成pdf的，那为什么还需要使用到html2canvas。是因为jspdf直接生成pdf的话，用法可能会有些繁琐，并且可能不能保证原来的样式，不美观，也不满足需求。所以我们先使用html2canvas将目标dom元素转为canvas，然后调用canvas的toDataURL方法将其转为base64编码，然后再将图片添加到pdf中就可以了。

首先我们先使用html2canvas将某个dom元素为canvas，然后可以调用canvas中的方法，例如：toDataURL将其转为base64编码，或者toBlob转为一个二进制对象等等，然后就随意我们怎么操作了，可以进行下载，也可以将base64编码赋给img标签src在页面上再渲染出该dom以图片的方式，类似于复制了，下面来说下具体使用：

注意一下是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。在使用了之后在浏览器控制台会有如下打印，至少目前是是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态。就说Suspense可以直接使用的。基本使用如下：在等待异步依赖组件的时候，会先展示加载中..... 可以等待的异步依赖有两种：带有异步。

在开发中，如果上传的文件过大，可以考虑分片上传，分片就是说将文件拆分来进行上传，将各个文件的切片传递给后台，然后后台再进行合并。这里切片可以理解为字符串的截取，那这里文件的话就是切分字节，一个道理上传的时候，可能会需要一个文件的唯一 标识，在上传文件的时候也要将文件的唯一标识（文件的MD5加密文件的字符串，每个文件的唯一标识）传递给后端，后端会通过该标识返回给我们告诉我们这个文件是否已经上传过，没有这个文件就需要我们全部上传，存在了，前端就不需要再上传，这个文件上传了一部分，需要把剩余的上传。

这里就以setup语法糖来介绍，因为毕竟setup语法糖还是更方便些嘛。

在vite+vue3的项目中，当然是可以使用Vuex4的，但是如果让我选择的话，我肯定会选pinia，因为简单又好用，因为之前没写过结合TypeScript的使用，所以这篇就来简单写一下vite+vue3+ts搭配pinia的基本配置，其实也比较简单，然后具体使用的话这里也不细说，会写一个demo

加上ts其实就是多了类型的约束，vue-router中已经给我们提供了RouteRecordRaw类型，可能我们需要在路由对象中自定义配置属性的时候就得去扩展一下RouteRecordRaw类型了

大家有兴趣可以去看下，主要就是介绍了安装第三方插件可以在项目中使用require和vue3引入图片。这篇主要是跟大家分享下还有其他的方式。

Vue3兼容Vue2，也就是说咱们在Vue3的项目中，同样可以使用Vue2的options选项api，这也是Vue3的默认其行为，但是我认为既然选择使用了Vue3为什么要去写v2中的选项api呢，如果你非得要写，倒不如直接使用vue2了，并且对v2写法更加熟悉在Vue3中将Vue2中的optionsAPI关闭了之后，打完之后的包体积确实变小了下面介绍如何关闭，其实非常简单我这里是使用的vite搭建的，只需要在vite.config.js中设置如下：define: { __VUE_OPT

咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源vite却不能使用，确实有点点的难受，最近刚发现了一种开发时依赖插件vite-plugin-require-transform，那就试一下吧vitejs/ awesome-vite - github地址：ht.

需求描述：咱们播放一个视频，然后当咱们向下滚动直至离开可视区域的时候，会在右下角出现一个小窗口继续咱们的视频播放。需求分析：1. 初始化一个播放器2. 大视频播放区域如果出现在视口外，小窗口出现3. 大小视频切换的时候，保持视频状态不变主要用到：1. 一个成熟的播放器2. vueuse中的 useIntersectionObserver API来监视某个dom元素是否离开了可视区域3. Vue3中的 Teleport 内置组件 传送门 保持dom的前提下完成传送接下来

之前在Vue2中使用require来获取let imgs = reactive([ require('@/assets/img/index/index1.jpg'), require('@/assets/img/index/index2.jpg'), require('@/assets/img/index/index3.jpg'), require('@/assets/img/index/index4.jpg'), require('@/assets/img/index/index

VsCode一些相关设置然后打开vue.json打开之后将我下面的代码拷贝过去就可以(可以自定义修改){ "Print to v2": { "prefix": "vue2", "body": [ "<template>", " <div>\n", " </div>", "</template>", "<script>", ...

Vue2中我使用的是 vue-fullscreen官网：vue-fullscreen1.安装 npm install vue-fullscreen --save2.全局引入 （main.js）import fullscreen from 'vue-fullscreen'Vue.use(fullscreen)3.组件中使用<template> <div class="container" ref="container"> &l...

reactive：深度劫持（深监视）shallowReactive：浅度劫持（浅监视）ref:深度劫持（深监视），做了reactive的处理shallowRef：不做监视readonly:只读属性的数据，深度只读const state2 = readonly(state)shallowReadonly:只读的数据，浅只读的toRaw:·作用：将一个由reactive生成的响应式对象转为普通对象·使用场景：用于读取响应式对象对应的普通对象，对这个普通对象...

1.不使用setup语法糖，这种方式和vue2差不多，is可以是个字符串<template> <Child1 /> <Child2 /> <component :is="currentComp"></component> <el-button @click="compChange">切换组件</el-button></template><script> import

effectScope 可以直接控制响应式副作用的施放时间<script setup> import { reactive, watch, watchEffect, computed, effectScope } from "vue"; const scope = effectScope() // 创建一个作用域 const data = reactive({ counter: 0, incrementCounter: '' }) setInte

这里举个例子：就是类似于面包屑，会记录所有的打开过的页面，方便定位到某个页面。（因为这个例子核心就是路由监听）思路：首先首页会一直显示，不可以移除。 我这里把其他的路由对象存在Vuex中（mainTabs:[]），需要监听路由的变化，当路由改变就往里面push（注意这里需要判断一下，只有当前路由没在mainTabs里，才会往里面push）,因为存的都是路由对象，点击就跳转到对应的页面就可以。然后就是，当我们移除的时候直接splice删除掉就可以（这里注意如果删除的是当前正打开的页面，需考虑页.

Vue2中在main.js中向Vue原型上挂载Vue.prototype.<自定义属性>，通过this获取；Vue3中在main.js采用config.globalProperties.<自定义属性>，提供了 getCurrentInstance api，将其中的 proxy 解构出来，通过proxy 获取 全局属性这里以axios为例 main.jsimport { createApp } from 'vue'import App from './App.vue'

防抖和节流相似，都是为了减小服务器的压力。防抖：比如现在有个输入框，需求用户每次输入能够实时查询相关数据（模糊查询），这时候就需要做个防抖处理，也就是我们尽可能等用户输入完之后再去查询，可以设定个时间，输入完1.5秒或两秒后再去查询（如果在设定的时间又触发事件，会把上次的清除掉，重新计时）。要不然如果用户一直按着不停，一秒钟可能会有很多次请求，会给服务器造成很大的压力，导致页面卡顿节流：就是对连续发生的事件 做一下限制 不要那么频繁。针对可能每秒钟都会有很多次或几十次事件的发生。可以每两秒触发一.

pinia中使用要比Vuex简单。Vuex中有state、mutations、getters、actions、modules五种， 而 pinia中只有state、getters、actions。写法上有些不同。还是相对Vuex简单的安装yarn add pinia# or with npmnpm install piniamain.jsimport { createApp } from 'vue'import App from './App.vue'import { creat

在vue2中 我们可以绑定 ref 通过this.$refs 拿到dom 元素，如果绑定到子组件上，可以调用子组件方法等等。在vue3中setup函数在组件创建前执行，比beforeCreate 触发还要早，这时候，还没有data,methods等等一些东西，所以没有this这种东西。这里列举一下vue3通过ref来调用子组件的方法第一种是 配置setup 的方式<!-- -----------父组件------------------ --><template>.

1. 安装npm install vuex@next --save2. src 下新建 store/index.jsstore/index.jsimport { createStore } from 'vuex'// Create a new store instance.const store = createStore({ state: { count: 0 }, mutations: { updatecount(state,val) { .

父传子（和vue2差不多）父组件：<template> <div class="son"> <son1 :toChild="toChild" /> </div></template><script>import { reactive, toRefs } from 'vue'import son1 from './branch/son1.vue'export default { components

开始之前先说一下，process这个东西是nodejs中内置的，而且不需要require引入，vue2中我们可以通过process.env.NODE_ENV 来判断当前环境、通过process.env.VUE_APP_<自定义名称>，来获取.env、.env.development、.env.production配置文件中的变量（普通.vue文件和vue.config.js文件都可以获取到）。但是在vue3中移除了process，普通页面或者js文件中可以通过import.meta.en

1.安装npm install vue-router@42. vite.config.js（配置别名）import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'const path = require('path')// element -plus 配置 按需导入-> 自动导入import AutoImport from 'unplugin-auto-import/vite'import.