该系列已更新文章： 分享一个实用的 vite + vue3 组件库脚手架工具，提升开发效率 开箱即用 yyg-cli 脚手架：快速创建 vue3 组件库和vue3 全家桶项目 Vue3 企业级优雅实战 - 组件库框架 - 1 搭建 pnpm monorepo Vue3 企业级优雅实战 -...[2022/11/17]

目录解决方法：一、先开启uni-file-picker组件里对于压缩图片的配置项 sizeType，默认是有两个选项的：二、将图片再次进行压缩，压缩至1兆以下，再传至服务器中： 我在做uniapp项目时，用的uni-file-picker组件，这是我做的一个项目实例，主要是将图片通过接口传至后台服务...[2022/11/17]

在写uniapp项目中，对于上传图片有时会有这样的需求：只可使用照相机拍摄上传，不可使用相册。 在uniapp中，我们通常会使用uni-file-picker这个组件，但是这个组件中，有点缺陷，就是没有对这个功能的传值设置，这里就要给组件进行修改了。 1、在uni-file-picker组...[2022/11/17]

目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改button总结 form结构 <el-form :model="formData" label-width="80px"> <el-form-item labe...[2022/11/17]

耽误了几天, 终于开始写第二篇博客了, 这篇会讲怎么将vue项目打包部署到服务器, 其实和上一篇的uni-app步骤一样的, 就是最后多了一步修改nginx配置, 好 , 上操作 一 ,打包项目 vscode下载链接： 链接: https: pan.baidu.com 1PD-Sts-e...[2022/9/20]

目录前言第一种：父向子传值新建文件导入结构引入 注册 使用子组件子组件内部代码完善父组件内部代码完善操作main.js文件思路总结 前言 大家好，这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路。最常见的vue组件传值分为三种，第一种是父向子传值，第二种是子向父传值，第三种是兄弟组件...[2022/9/15]

目录文章目标P6P6+ ~ P7一、背景二、前端路由特性三、面试！！！四、Hash 原理及实现1、特性2、如何更改 hash3、手动实现一个基于 hash 的路由五、History 原理及实现1、HTML5 History 常用的 API2、pushState/replaceState 的参数3、H...[2022/9/15]

目录前端状态管理出现的意义及解决的问题Vuex 源码解读Vuex 公共方法Vuex 介绍及深入使用Vuex 使用（官网）1、基本框架2、基本使用3、State3.1 mapState 辅助函数4、Getter4.1 通过属性访问4.2 通过方法访问4.3 mapGetters 辅助函数5、Mutat...[2022/9/15]

目录Vuex获取getter对象中的值1.直接从根实例获取2.使用mapGetters取值3.使用module中的getter计算属性获取的getter值需要刷新才能更新描述解决 Vuex获取getter对象中的值 getter取值与state取值具有相似性 1.直接从根实例获取 m...[2022/8/31]

目录使用vue-video-player无法播放本地视频方法使用vue-video-player播放视频及遇到的问题安装引入 使用vue-video-player无法播放本地视频 方法 因为引入的是本地资源，要把资源写在“require”方法里 ? sources...[2022/8/23]

目录一、使用场景二、补充组件注册三、深度解析 Vue.extend()虽然已近用过很多次了，但都没有深入思考过这个东西，仔细想了想，有点意思 一、使用场景 按需使用组件，也叫懒加载，性能蹭蹭往上走 扩展的组件，其自由度高到你无法想象 二、补充组件注册 平日里，我们使用组件： ...[2022/8/23]

目录1.不允许直接修改2.存在异步的情况解决思路 经过测试父组件中传递过来的数据有以下特点： 1.不允许直接修改 如果直接使用 this.xxx = action 操作的话 控制台会报下面这个错误 大概的意思是 你小子不要随便劈我瓜，我父组件的瓜岂是你能变的，父组件重新渲染时，这个...[2022/8/23]

本文实例为大家分享了vue实现二级弹框的具体代码，供大家参考，具体内容如下 二级弹框案例，如下图所示 <template> ? ? <div cla ="zw-dialog"> ? ? ? ? <div cla ="zw-top"> ?...[2022/8/23]

目录深度优先遍历多层数组对象比如树结构是这样的vue遍历包含数组的对象请求来拿到后数据格式是下面这种最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id，自己Id，父亲Id；其实如果想要拿到label的话就把data.id换成data.label...[2022/8/23]

目录一、计算属性1、插值语法实现2、通过方法实现3、通过计算属性二、监视属性三、深度监视 一、计算属性 在开发中，可以有这样的需求，在属性（date）中，有fistName和lastName两个属性，需要将两个属性拼接起来，这种需求也很简单，有以下实现方式 1、插值语法实现 直接在bod...[2022/8/23]

目录对数组和对象进行遍历和修改1、对数组进行循环2、 修改数组的时候，不能直接通过下标去增加修改删除3、对对象进行循环4、增加对象的时候修改数组和对象的特殊情况以及修改方法修改数组的两个特殊情况修补方法 对数组和对象进行遍历和修改 1、对数组进行循环 v-for进行循环，有两个参数（item...[2022/8/23]

目录v-for循环遍历图片的方法解决方法如下vue循环显示多个图片小扩展（require 和 import） v-for循环遍历图片的方法 写项目时，遇到后台无法提供背景图片，需要自己在本地循环遍历到页面上，并和后台数据一起展示的需求 解决方法如下 resourceList是后台传...[2022/8/23]

目录什么是插槽默认内容具名插槽动态插槽名作用域插槽作用域插槽具名作用域插槽写在最后 Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过，但是它的所有用法你是否全部理解呢？本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。 什么是插槽 简单来说就是子组件中的提供给父组件...[2022/8/23]

目录前言安装挂载VuexPinia修改状态vuexPiniaPinia解构(storeToRefs)gettersPiniaVuexmodulesPiniaVuex写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5，只不过为了尊重原作者的贡献就沿用...[2022/8/23]

目录一、配置vite二、router路由1、安装router路由2、配置router路由3、注册router路由4、使用router路由三、安装element plus等其他依赖1、注册element plus并配置图标四、pinia使用     &...[2022/8/22]

目录引言_renderProxy是干什么的initProxy方法总结 引言 之前的文章提到，Vue实例化时_init方法做了很多处理，其中就有这么一段： if (__DEV__) { initProxy(vm) } else { vm._renderProxy = vm } ...[2022/8/22]

目录rollup介绍以命令行方式打包Tree ShakingRollup 的命令行使用命令行format 格式rollup.config.js设置/获取环境变量插件 plugins rollup介绍 开源类库优先选择以 ESM 标准为目标的构建工具Tree Shaking 以命令行方式打包 ...[2022/8/22]

目录正文v-model 正文 首先我们来看一段代码： <input value="value"> 这里是一个原生的input输入框，每一个原生的输入框都会有一个value的属性来用于存储用于输入的最新的数据。 如果我们想要获取到这个值我们可以通过input.targe...[2022/8/22]

今天面了家小公司，上来直接问 computed 底层原理，面试官是这样问的，data 中定义了 a 和 b 变量。computed 里面定义了 c 属性，c 的结果依赖与 a 和 b，模板中使用了变量 c。假设改变了 a，请问底层是如何收集依赖，如何触发更新的？ <div>{<...[2022/8/22]

目录引言例一例二总结 引言 相信很多人都用过proxy，这里就不多说proxy的基本使用，这里要说一下很多人使用proxy的一个误区，大家一般都是直接将管官方的例子拿过来，修改一下代理目标直接就是用了，但是代理的路径匹配你真的会用么？ 如果你能够认证看完那么我保证你下次再配置代理的时候就能一...[2022/8/22]

1、登录页登录成功时将服务端返回的标识存放起来 2、在router中给不需要登录的页面设置 meta : { auth : false }，如首页  3、使用路由前置守卫beforEach，由于给路由设置了meta : { auth : false }，如果是符合该属...[2022/8/22]

目录一、每个 Vue 实例都实现了事件接口二、注意事项三、例子及说明 四、总说明 一、每个 Vue 实例都实现了事件接口 即： 1、使用 $on(eventName) 监听事件 2、使用 $emit(eventName, optionalPayload) 触发事件 二、注意...[2022/8/22]

目录关于redirect(重定向)初学者的坑vue-router路由重定向redirect的使用事项 关于redirect(重定向)初学者的坑 第一个对象里是配置路由重定向path:’/'为项目的根目录，redirect重定向为渲染的路径（这里我是指向了第二个对象里的p...[2022/8/16]

在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。在定义组件这一步，我们就需要使用到 extend 这个方法。当然，也可以在一个html文件中使...[2022/8/16]

目录什么是 Pinia如何使用 Pinia认识 Store定义一个store使用 store操作 StateGetters1. 认识和定义 Getters2. 访问 Getters认识和定义 Action 什么是 Pinia Pinia (西班牙语中的菠萝)，本质上依然是一个状态管理的库，用于跨...[2022/8/16]

目录为什么需要配置环境变量和模式呢？环境变量1）环境变量文件分类2）环境变量配置3）环境变量访问模式1）模式分类2）模式定义与使用结合实际应用 为什么需要配置环境变量和模式呢？ 所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中，一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上...[2022/8/16]

目录vue老项目引入TypeScripe从零开始创建vue+TypeScripe项目vue3加ts的配置与基本语法格式下面是我写的一个小demo 通过前端各个框架的发展，例如vue3.0，react和angular等框架的源码都是用ts（TypeScripe）进行编写的，因此我感觉未来的中大型项目的...[2022/8/16]

目录如何根据id在数组中取出数据Vue获取数组的数组数据 如何根据id在数组中取出数据 这是一个非常实用的操作，尤其是编辑数据的时候。点击编辑数据，通常会将编辑的这条数据发送给后端，然后后端在根据这个编号查询出相应的数据在返回给前端。 那么请问，后端都将数据给你了，你直接在数组中取出来不是很...[2022/8/15]

目录文档推荐组件挂载相关方法jest-api为什么要使用单测总结 当我初次听到单元测试时，心里的第一感觉就两个字nb，然后就是疑惑，这是啥，干啥用，对代码又有什么帮助？接下来我会细细说一说我在学习以及应用单元测试的一些心得。（安装教程不再叙述，按照文档教程自行学习） 文档推荐 学习新知识，有...[2022/8/15]

目录el-tree @node-click传自定义参数给el-tree添加自定义图标 el-tree @node-click传自定义参数 <el-tree node-click="(data, node, item) => nodeClick(data, node, item, pa...[2022/8/15]

目录vue动态设置元素的高度获取元素高度总是不准确的问题解决办法 vue动态设置元素的高度 1. 添加样式绑定 <div cla ="container" :style="{height: scrollerHeight}"> </div> 2. 添加属性计算 ...[2022/8/15]

目录DOM Diff整体思路处理简单情况比对优化尾部新增元素头部新增元素开始元素移动到末尾末尾元素移动到开头乱序比对写在最后 DOM Diff Vue创建视图分为俩种情况： 首次渲染，会用组件template转换成的真实DOM来替换应用中的根元素当数据更新后，视图重新渲染，此时并不会重新通过组...[2022/8/15]

目录自定义指令中无法获取this解决方法Vue使用this的这几个坑你都知道吗一、普通函数二、Vue中的this 自定义指令中无法获取this 问题 最近在使用自定义指令时遇到一个问题,我想在指令里通过this直接去访问vue实例数据,但是显示未定义,经大佬提醒,里面的this很可能不是指向...[2022/8/15]

目录html2canvas介绍jspdf介绍printjs介绍 html2canvas介绍 分享一下几个后台管理系统比较常用的插件：下载、打印 html2canvas是在浏览器上对网页进行截图操作，实际上是操作DOM，这个插件也有好长时间了，比较稳定，目前使用还没有遇到什么bug ...[2022/8/15]

目录自定义指令钩子函数自定义指令先上官方解释小贴士钩子函数运行顺序 自定义指令钩子函数 自定义指令 除了VUE 内置指令外，VUE也支持我们自定义注册指令，分为局部和全局注册 但这些想必大家都不陌生，其中官方API也是写的明明白白 官方API点这里 而且自定义指令也会极大程度上帮助我们日...[2022/8/15]

目录一、cookie的使用 1. 首先加载模块2. 在使用cookie的页面上进行引入3. 使用方法二、localStorage的使用1. 储存2. 获取3. 删除4. localStorage可以储存JSON对象5. localStorage.setItem()6. 用localStor...[2022/8/3]

目录一、判断语句v-if、v-else、v-else-ifv-show案例二、循环语句遍历数组遍历对象三、v-if和v-for的注意事项总结 一、判断语句 v-if、v-else、v-else-if v-if是判断是否将DOM元素显示出来 不满足条件的元素，会直接删除，不会存在浏览器上面...[2022/8/3]

目录vue下载文件导出保存到本地另一种情况vue中a标签下载本地文件-未找到,原因及解决错误代码原因解决 vue下载文件导出保存到本地 先分析如何下载：先有一个链接地址，然后使用 location.href或window.open()下载到本地 看看返回数据 res.config....[2022/8/3]

目录前言Vue中如何使用provide和inject在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性，Props是我们将数据传递到子组件的主要方式之一。例如，下面的代码，我们往子组件（PopularList ）传递了属性 name,其值是Mo...[2022/8/2]

目录正文理解Proxy与ReflectProxyReflect实践示例 正文 在第四章中，作者讲述了Vue.js中响应式系统的设计与实现，这一块其实是整个框架的基石，也是MVVM中，ViewModel(VM)的重要组成部分。 其实在上一章中我已经感觉很难了，有一些操作作者也只是几笔带过，却很值得...[2022/8/2]

目录正文读取属性xx in objfor ... in 正文 从这一章开始，作者将更新深入的讲解响应式，尤其是vue3响应式的具体的实现。其实在前面一章，如果你仔细阅读，你是可以实现一个简单的响应式函数的，类似于@vue/reactive,当然那只是个demo，是个玩具，我能不能在生产环境上去使...[2022/8/2]

目录Vue数据更新视图不更新的几种解决知识拓展对象属性的添加或删除异步更新队列Object.a ign方法vue多层循环Vue更改了数据但是视图却没有更新 Vue数据更新视图不更新的几种解决 知识拓展 在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或...[2022/8/2]

目录正文setdelete 正文 上一篇文章我们学习了如何代理对象的读取，下面我们学习如何代理对象的修改和删除属性。 set set就是修改代理的属性，按照我们之前写的reactive,它大概是这样的 const ITERATE_KEY=symbol() const p = new...[2022/8/2]

目录vue table表格里面数组多层嵌套取值表格部分methods里面定义方法vue 多层数组嵌套循环,动态取值匹配 vue table表格里面数组多层嵌套取值 我现在是在表格里拿到级联选择器的多选的id，然后要根据这个id来匹配一个嵌套了三层的数组的第三层id，来拿名字渲染 表格部分 ...[2022/8/1]

目录自定义hooks中使用useRouter报错useRouteruseRoute使用Vue.use()报错“Cannot read property ‘use‘ of undefined”原因正解 自定义hooks中使用useRouter报错 随...[2022/8/1]