- 博客(54)
- 收藏
- 关注
RSS订阅原创 css伪类函数 :is()、:where()、:has()、:not()
本文主要描述:is()、:where()、:has()、:not()，四个方法大部分内容相同，首先主要讲:is()方法，并根据:is()方法与:where():has():not()方法的不同来说明这三种方法的特性:is()使用方法选择器特定性安全性伪类和伪元素的支持前空格意义兼容性:is()
2024-02-21 16:17:53
1248
1
原创 nuxt3 env配置 打包路径设置 预渲染
Nuxt使用nitro，而nitro自身就支持env配置，在根目录设置.env文件就可以支持，# 预渲染打开预渲染后，Nuxt会将开启预渲染的页面渲染完毕后打包成`.html`文件，并放到静态资源目录下，当客户端请求该页面时，直接返回html文件。利用`routeRules`配置可以实现部分页面的预渲染
2024-01-15 09:33:37
986
原创 nuxt3 SEO相关优化
1. TDK（标题、描述、关键词）设置，推荐使用Nuxt的钩子useSeoMeta设置tdk。2. sitemap.xml 通过nuxt-simple-sitemap实现 3.robots.txt 通过nuxt-simple-robots实现 4.特殊配置-路由规则 Nuxt支持一个项目中不同的页面使用不同的渲染模式，比如一个SEO项目中，可能某些页面不需要SSR（如注册页、admin页等），可以通过配置路由规则，以混合渲染的方式实现整个项目
2024-01-11 09:19:08
574
原创 stale-while-revalidate / swr 一看就懂，一用就会
swr可以理解为：当该接口缓存过期后的60秒（60秒为例子中的60）内，再次请求该接口，仍然会立刻返回已经过期的信息，同时也会调用接口向服务器获取最新的数据，并重新保存在缓存中。为方便理解，swr可以总结为有三个特性 swr发生在缓存失效后（max-age后）swr会在缓存失效后的一定时间内（swr期间）的第一次请求，仍然会返回老数据swr。整体流程如下图
2024-01-10 09:53:00
996
原创 nuxt3 nuxtjs/i18n 配置
国际化页面配置成静态渲染（预渲染）页面，该选项会在打包时将页面预渲染成默认语言的html文件，访问该页面时服务端会直接返回当前html（因为与渲染会将函数执行，导致服务端返回的一直是默认语言的页面），最终导致页面语言和排版混乱。：cookie中没有设置值的话，默认使用此致（并不是默认。对应的值的效果，他会偶尔抽风，错误的去设置默认。总是重定向到存储在cookie中的值，：支持的语言列表，可以是数组或对象。：（必填）-区域设置的唯一标识符。需求允许的情况下，修改后调用。在需要切换国际化时，通过
2024-01-09 10:34:58
1187
2
原创 nuxt3 路由相关
Nuxt 3提供了钩子，允许完全更改Nuxt自动生成的路由，我们可以通过该钩子实现vue-router路由方案（适合老项目迁移，并不是很推荐这样用）首先创建文件path: "",meta: {},...创建钩子函数hooks: {// 清空Nuxt.js自动生成的路由// // 重新将自定义路由配置设置进去},},})
2024-01-08 15:16:22
697
原创 nuxt3 请求相关问题
#配置跨域 本地的反向代理我们可以通过Nitro引擎来配置服务器请求没有跨域，也就不需要配置代理转发。#接口封装 nuxt3中虽然也可以使用axios，但nuxt本身对fetch做了封装，并提供了几个函数 #推荐用法 更推荐使用useFetch直接在业务中请求数据，将返回的数据直接当做ref使用
2024-01-05 09:45:01
406
原创 nuxt3 服务端请求其他接口犯的问题与解决
useAsyncData/useFetch返回的代理数据，是类似`useState`生成的**SSR 友好组合**代理，会根据内部的`key`来校验是否需要重复请求的，删掉了就很容易出现重复请求的结果
2024-01-04 10:15:48
1121
原创 nuxt3 env文件、全局变量处理
通过配置nuxt.config.ts + Nuxt提供的钩子函数，实现全局变量的获取文件往放入内容通过env文件配置来获取服务端全局变量，客户端通过vite.define实现。
2024-01-03 13:40:42
1208
原创 js文件上传 分片上传/断点续传/极速秒传
(极速秒传)利用md5判断上传的文件是否存在 优点 服务器中不会出现重复文件 **思路是**在文件上传到服务器前，将文件进行MD5转换，然后将转换完后的MD5码传给服务器，服务器判断当前MD5码是否存在，如果存在就代表着服务器上已经有了跟该文件相同的文件，不再需要上传文件 分片上传分片上传就是把一个大文件，按照一定的大小，分割成多个小文件分别进行上传，文件上传结束后，服务器对所有的文件进行合并（前端负责拆分、后端负责整合）
2024-01-02 15:26:11
761
原创 vue3响应式核心 reactivity 源码逻辑分析
当创建reactive后，会对传入对象进行proxy代理，在被订阅者使用（get）时，触发track函数 收集依赖，记录下“订阅者在这里用到当前reactive啦！”，在对象被修改（set）时，触发trigger函数 触发依赖，“要去更新所有用到当前reactive的订阅者！”......
2023-03-13 14:49:39
264
1
原创 vue 组件通信 事件处理
本文主要是通过源码了解，vue是怎样把事件传递给子组件并能够给正常调用的。首先看一个超级简单的demodemo中有一个组件，父级向里边传入了一个函数，个组件中通过调用了它，这是一个最简单的事件通信方法跳过不相干的步骤，我们从创建组件的虚拟节点处的源码开始说起想了解他的实现原理，可以拆开的整体流程，从方法下手，来看看子组件中函数调用时都做了什么（函数就是一个通过调用并抛出错误的通用函数，文章最底下会简略说明该函数）可以看到，方法实际就是找到并调用该素组中的所有方法，那我们现在的目标就是找到中的数据怎么存
2022-07-08 14:53:21
916
原创 vue 组件通信 props
了解props源码主要是解决两个疑问答：父组件怎么将值传递给子组件的？父组件的值更新后，子组件如何更新？我们写的节点模板会被解析并生成`render`函数，函数执行时会从父组件中获取到传参，子组件获取到传参后，会对其外层进行响应式绑定，并代理到vm上详细的说，可以从两个部分来解释，分别是父组件怎么传给子组件子组件怎么处理传过来的参数1. 父组件怎么传给子组件我们写的节点模板会被解析并生成render函数、然后通过render函数最终生成一个vnode虚拟节点，render函数大概.........
2022-06-10 16:54:42
463
1
原创 vue diff算法
vue diff算法 在vue中的实现原理，patch函数、patchVnode、updateChildren、sameVnode函数的介绍
2022-04-28 16:00:32
3562
原创 Vue的响应式原理-数组处理
数组和对象处理的区别是在`class Observer{}`中开始区分的，对象的话是调用了`walk`方法进行处理，数组的话是首先执行`protoAugment`/`copyAugment`方法来“劫持”数组七种方法，然后调用`observeArray(value)`将数组中的属性循环执行`observe(item)`
2022-03-08 11:15:39
667
原创 Vue的响应式原理-两个创建Dep的位置
在`Vue`响应式的`class Observer`部分，我们发现会有两个部分都创建了`Dep`实例。分别为1:defineReactive创建的dep 2:Observer创建的dep，那么这两个dep到底都是干什么用的呢？
2022-03-03 13:32:56
567
原创 Vue的响应式原理
Vue的响应式实现主要有三块重点内容，分别为Observer、Dep、watcher。我们常说的`Object.defineProperty`就是通过`observe函数`、`Observer类`、`defineReactive函数`的递归执行实现，`defineProperty`写在`defineReactive`函数中；而数据与视图的相互绑定（数据改变页面也跟着改变），是通过`Dep类`（发布者）和`watcher类`（观察者）实现的
2022-03-01 10:27:14
909
原创 vue3 + vite使用addroute时接口返回数据导致component的问题
vue3+vite使用addroute时接口返回数据导致component的问题处理很多后台管理系统，路由都是通过请求获得，一般流程都是通过使用addroute处理接口返回的路由信息在vue3+vite中，动态路由component写法是 router.addRoute({ name: "demo", path: "/demo", component: () => import('view/demo.vue'), });除了com
2021-12-03 14:51:12
1995
原创 vite搭建vue3项目
首先按照官网创建项目,yarn create vite 项目名字 --template vue(这里我用的yarn,用npmnpm init vite@latest 项目名字 -- --template vue)安装依赖 yarn(npm install)typescript首先安装 yarn add typescript然后在项目跟目录下创建ts配置文件 tsconfig.json/** * ts配置文件 * 配置参考于文档 https://www.cnblogs.com/fan
2021-10-15 18:03:32
1430
原创 pm2 启动 nodejs 项目
首先全局安装npm i pm2 -g最基础的使用方法pm2 start xxx这种方法一般都不会满足我们的需求，因为我们在package.json中配置的start，一般都不是只有运行一个文件这么简单，比如我举一个例子"npm start": "cross-env NODE_ENV=production nodemon --inspect ./bin/server.js",想要实现上边的方法，可以先创建一个配置文件pm2 init simple创建配置文件运行完成后，会创建一个ecosyst
2021-10-12 16:50:50
2412
原创 yarn add 安装指定版本
yarn add xxx 安装默认版本yarn add [email protected] 安装指定版本yarn add xxx@tag 安装特定版本在安装[email protected],[email protected],[email protected]等这种需要安装特定大版本时，有两种方法，下边用安装 [email protected]举例1. yarn add webpack@^4可以使用yarn add webpack@^4,安装package.json中显示的是"vue-router": "^4",实际安装的版本
2021-10-08 17:25:49
14540
原创 h5打开小程序的方法 总结
两种方法，一种是通过Url Scheme进行跳转，另一种是通过wx-open-launch-weapp标签进行跳转Url Scheme: 需要生成scheme码，weixin://dl/business/?t=加scheme码生成一个链接，跳转进入小程序，参数在生成scheme码时就要固定，适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用wx-open-launch-weapp: 需要对接微信的jssdk，获取wx-open-launch-weapp标签权限后才可以使用，可以在生成
2021-07-12 20:42:43
10110
3
原创 微信小程序获取地区code
微信小程序获取地区code （接腾讯地图）微信小程序官方文档中，有一个 wx.getLocation（点击跳转API） 接口，可以获取当前的地理位置、速度。如没有code/省市区等相关信息，我们可以对接一个腾讯地图，来获取相关信息// wx.getLocation接口示例wx.getLocation({ type: 'wgs84', // wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标 success (res) { const latitud
2021-05-11 14:00:47
2386
1
原创 前端 vue 直传 华为云OBS（BrowserJS 断点续传方法）
需求：可多个文件同时上传，需要显示文件名、上传进度、上传速度，可以暂停、继续开始1、搭建OBS服务环境相关请参考官网教程 点击跳转2、下载OBS BrowserJS SDK开发包 点击跳转，引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js文件import ObsClient from "../util/esdk-obs-browserjs-without-polyfill-3.19.5.min.js";3、创建OBS实例<scri
2021-02-23 22:53:23
5989
32
原创 vue 3.0 prototype 替代用法
在vue2.x中，我们想设置全局变量，可以在main文件中用prototype绑定vue实列，在vue3.0中，可以用app.config.globalProperties来代替prototype，具体用法如下// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'a
2020-12-14 10:15:03
21049
8
原创 公众号h5授权与实际中遇到的问题 - 前端
首先放上官方文档获取公众号授权可以获取到用户的openId，可以通过openId获取到用户的昵称、性别、所在地等信息获取授权的流程：首先需要用户打开或者跳转到授权页，用户点击统一后跳转到我们设置的回调页面（比如项目首页）授权后跳转回来的页面，url上会有code，我们把code传到后端，换取openId完成…1、首先是配置网页授权域名在微信公众平台中左侧菜单拉到底，选择公众号设置，然后下边有个网页授权域名，输入需要授权的域名后，不要忘了把设置页面中的文件扔给后端2、跳转授权页配置好域名
2020-11-11 17:35:10
1479
原创 微信公众号 h5 中 获取 微信JS-SDK
首先放上官方文档微信JS-SDK是用于调用微信提供的一些方法，比如拍照、上传图片、分享、等功能（微信虽然提供了自己的一套功能，但比如原生的上传图片、分享等功能再微信浏览器中仍然使用(实际使用体验欠佳)，所以如果遇到无法兼容的问题，可以直接使用原生的方法）1、首先是绑定js安全域名，在微信公众平台中左侧菜单拉到底，选择公众号设置输入js接口安全域名，需要注意三点安全域名是要“掐头去尾”的，比如添加百度（https://www.baidu.com）要写成（www.baidu.com）不要忘记把js
2020-11-10 14:55:23
984
原创 微信小程序 form-data 传参 传文件
传参格式为form-data的话，分为两种情况一种是没有文件传输，只传普通的数据的一种是有文件要传输的没有文件传输的如果不需要传文件的话，我们只需要修改请求（wx.request）中的header:{"content-type"}就可以了wx.request({ url: "url", // 你自己的路径 method: "POST", header: { "content-type": "multipart/form-data;", 'accept': 'appl
2020-10-15 15:18:59
6747
1
原创 js正则 断言
创建正则字面量和实列两种创建方法var reg = /正则表达式/修饰符var reg = new RegExp(正则表达式, 修饰符)var reg = /123123123aaa.*/g// 或var val = '匹配'var reg = new RegExp('123123123aaa.*','g');修饰符i 忽略大小写匹配m 多行匹配g 全局匹配修饰符可以写多个，如/1234aaaa/img常用元字符. 匹配除\n以外的任何字符\w 匹配数
2020-09-18 11:11:09
2080
原创 vue axios form-data格式 传输数据和文件
vue axios form-data格式 传输数据和文件form-data在post请求下的一种传输方式，数据会在Form Data中传输，传输的数据由boundary来分割------WebKitFormBoundaryRO0YA4pq9oCgwTktContent-Disposition: form-data; name="id"undefined------WebKitFormBoundaryRO0YA4pq9oCgwTktContent-Disposition: form-data;
2020-09-09 15:06:55
8317
6
原创 canvas基础
初学canvas，把基础知识整理一下创建canvas画布进来的都知道的HTML标签 <canvas></canvas>canvas画布默认有300*150的大小，建议使用canvas属性(width,height)修改canvas的大小，如果用style可能会因为比例问题导致画布被拉伸变形。渲染var canvas = document.querySelect('canvas');var context = canvas.getContext('2d');.
2020-09-05 13:23:12
284
原创 require.context批量导入
require.context如果想引入一个文件夹中的所有（或部分）文件，可以使用require.context方法来引入使用方法require.context(“文件路径”,“是否搜素子路径Boolean”,“匹配文件的正则表达式”)返回require.context() 返回的是一个functionconst requireApi = require.context("./api",false,/\.js$/);console.log(requireApi)想要获取到require回
2020-09-02 21:19:13
581
原创 vue createElement与elementUI中表头修改
vue $createElementVue推荐在大多数情况下用模板来创建你的 HTML（template中写dom）。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。createElement在正常开发下是一个不太常用的函数，他可以创建虚拟dom（VNode）createElement参数createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项
2020-08-26 22:48:33
2252
原创 JS运行机制、宏任务与微任务
JS是单线程的avaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞
2020-08-26 22:44:12
196
原创 使用electron 将网页打包成应用程序
需求： 将一个已经上线的后台管理系统（只兼容Chrome）打包成一个不需要谷歌浏览器就可以运行的软件需要安装：npm install electron -gnpm install electron-packager -gWinRAR解压工具（或者2345等其他解压工具也可以）Powershell 3 或 3 以上版本（electron-packager打包需要）NET 4.5 或 4.5 以上版本（electron-packager打包需要）此例只进行最简单的转换，详细electron用法
2020-08-26 22:43:07
3546
原创 对象与数组遍历部分方法整理
数组for、forEach、map、filter…for of 便利出来的是value而不是keyforEach的第二个参数Array.forEach(function(item){...},ArrayThis)传入forEach的第二个参数会让function的this指向改变为第二个参数（第一个function如果为箭头函数的话则不会生效）var a = [1,2]a.forEach(function(item){console.log('this为--', this)},a)// th
2020-08-26 22:39:20
228
原创 浏览器问题个人记录
------------------------ 仅作为个人整理 ------------------------重绘和回流网页主要由三部分组成：结构（Structure）（HTML）、表现（Presentation）（CSS）和行为（Behavior）（JS）。浏览器渲染DOM树: 浏览器把获取到的html代码解析成1个Dom树，html中的每个节点（tag）都是Dom树中的1个节点，根节点是document对象 。dom树里面包含了所有的html标签，包括display:none隐藏，还有用JS
2020-08-26 22:38:27
170
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人