qq_42961150的博客

时光匆匆，一转眼离上次发布文章已经过去10天了。最近公司的事情比较忙，所以没时间写文章，忙里偷闲写点东西吧。我喜欢把做项目中遇到没用过或者不好记的知识，先用有道云笔记记录下来，后面抽时间一个一个整理成文章，再发布到CSDN上面，所以我的文章基本上都是原创。

custom-waterfalls-flow是一个瀑布流插件，灵活配置、简单易用、兼容多端、同时兼容vue2和vue3

uniapp开发的时候，可能会有获取dom节点信息的需求，在uniapp的vue2.X编译模式中可以直接通过API const query = uni.createSelectorQuery().in(this);去获取相关的节点信息。在vue3.2+中这段代码是会报如下错误：

js实现base64编码，前端一般应用场景在与后端接口参数中体现，后端可能需要某个字段是base64编码的字符，这时候就需要用前端的方法进行转换，再作为参数传递到服务端。

目录概要拉开序幕的setup语法糖生命周期钩子ref函数与reactive函数对比computed计算属性监视（watch、watchEffect）组件传值provide/injectstyle样式使用v-bind绑定动态值获取路由信息全局API的转移Composition API 的优势关注我，不迷路vue3.x相关会在将来持续更新…概要随着vue3.0的发布，不久后vue3.2紧接着发布了，现在uniapp也支持了vue3.2的编译。vue3.x的优点我在这里就不多

概要使用示例关注我，不迷路概要vue2.x中的vuex版本是4.x以下，vue3.x中使用的vuex版本必须保证在4.x以上。vue3.x中的vuex在用法上其实和vue2.x大同小异。vue3.2相关的知识可以到另一篇博客：快速体验vue3.2之setup语法糖，怎么使用怎么爽！使用示例接下来会使用一个简单的示例，在这里就不分模块了，示例代码只做展示使用。话不多说，快速体验vuex在vue3中的区别：1. 创建store/index.js首先在项目根目录创建一个store.

目录前言vue2配置跨域vue3配置跨域Tips关注我，不迷路前言由于浏览器的同源策略，所以h5请求接口，可能存在跨域的情况。uniapp的vue2版本运行至h5，跨域配置直接在manifest.json的源码视图中配置代理，下面会详细描述。uniapp的vue3版本运行至h5，跨域配置目前是不支持在manifest.json中配置，vue3使用了vite，需要增加vite.config.js中进行配置代理，下面会详细描述。vue2配置跨域在manifest.json的源码视图

目录前言使用步骤Tips关注我，不迷路前言随着vue3.0发布以来，紧随着vue3.2又发布了，这尤大大也太厉害了吧。在这里vue3.x的优点就不多说了，反正就是爽。uniapp也是跟紧的步伐，在前几个版本就开始支持vue3.x的使用，甚至在2.9.3的cli版本就开始支持了，更多相关信息查看官方更新日志。从 HBuilderX 3.2 起，支持创建 vue3 的 uni-app 项目，更多uniapp相关信息查看uni-app 项目支持 vue 3.0 介绍，及升级指南。用法与常规vu

vue开源项目1. vue-element-admingit地址：https://gitee.com/panjiachen/vue-element-admin.git这是一款基于vue2.x+element后台管理系统开源项目，开箱即用。但是首次使用的话最好是分析下源码思路，对后期开发效率才有更大的帮助。我现在做管理系统就是用的这款开源代码，对我对vue的提升也有很大的帮助，里面的思想甚至可以用到小程序开发之中。2. vue-vben-admingit地址：https://gitee.com/

在闲暇之余，总结出来一部分前端常用的工具函数，后面几个操作DOM的适用于h5项目（eg：vue）,其余适用于所有项目（vue、小程序等）。/** * 递归方式深拷贝数据 * @param {Object|Array} source 需要拷贝的对象 * @returns {Object|Array} * 使用示例：deepClone([1,2,3,4]) */export function deepClone(source) { if (!source && typeof so

axios请求的二次封装，以满足自身项目业务的需求。封装之前先需要准备以下6个依赖：store：作用是在登录失效的时候，调取store全局中的退出登录等方法，这里的逻辑可以根据自身需求修改，然后需要在封装中引入，详情查看代码。axios：这个就是最基础的，因为我们用的就是axios。安装命令npm install axios --save，然后需要在封装中引入，详情查看代码。router：在这里的作用是跳转401页面，要在封装中引入，详情查看代码。settings：这个是我自己写的配置基础参数的文

话不多说，直接上代码~父组件father.vue：<template> <div class="father"> <child :txt="txt" /> </div></template><script> import child from './components/child.vue' export default { name:'father', components:{ child },

在之前的文章中也提到了vue3的新特性，前不久uni-app也开始支持vue3。于是初体验uni-app的vue3，总体来说用法与vue3差不多，但是我发现一个问题：vue3中uni.navigateTo怎么传值？我去官方文档中逛了一圈，并没找到相关说明。也去社区的问答中逛了一圈，确实看到很几个开发者在问相关的问题，但是并没有确切的答案。于是我研究了下代码，暂时做出了一个解决方案，后续希望官方能出更好的方案。话不多说，直接贴代码：<script> import { onMount

在运行一个很久没运行的vue的时候，突然出现该警告：Browserslist: caniuse-lite is outdated. Please run next command `npm update`简单翻译一下：caniuse lite已过时。请运行下一个命令npm update按照提示运行npm update还是没解决，于是查阅了资料找到了最有效的解决方案解决方案：先删了node_modules/caniuse-lite和node_modules/browserslist两个

不喜欢说废话，反正点进来的也不是为了看介绍的，先贴上我自己的插件列表吧 首先这几个是VSCode推荐Vue开发必备的插件 Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着） EsLint —— 语法纠错 Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个） Auto Close Ta...

我与它的结缘：两年前，我一个做前端开发的朋友让我帮他跑通一个VUE项目，当时拿到项目的时候，顺便看了下里面的代码。第一次看到里面的代码的时候，感觉结构清晰，很好理解，当时第一反应，原来还可以这样实现！后来阅读代码的时候，发现里面有一个开源github的地址，打开一看是个开源项目。开发者直接拔下来使用了开源的架子，于是在后面的项目中和写法中，我再也利用了这个开源项目里面好的思路。于是在后面的一个vue项目中将开源项目中的思路用在了自己的项目中，这算是我对于vue的理解的一个转折点吧。所以作为