- 博客(113)
- 收藏
- 关注
RSS订阅原创 vue2 computed 中不要写箭头函数
在vue2中，computed中需要引用data里 数据，需要用到this， 所以在computed中不能使用箭头函数，否则会报错。
2023-07-28 16:34:10
169
原创 pnpm install报错： ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies
【代码】pnpm install报错： ERR_PNPM_PEER_DEP_ISSUES Unmet peer dependencies。
2023-03-21 14:38:04
833
原创 小程序开发遇坑记录
小程序开发遇坑记录微信小程序原生textarea的placeholder-style对rgba识别bug：(0,10-15,27,0.15)识别不出来，会设置不上颜色滚动穿透：popup中滚动会穿透到底层微信原生picker mode=date start，end设置后，依然会展示不在设置范围内的，只是不能选择setTimeout、setInterval实现的定时器在鸿蒙系统出现掉帧现象，目前已解决，参考高刷屏对requestAnimationFrame和setTimeout的影响
2022-01-07 12:51:57
504
原创 【node】express热更新&跨域
express热更新:npm install supervisor修改package.json中scripts，"start": "supervisor bin/www"express跨域：app.js:app.all('*', function(req,res,next) { res.header('Access-Control-Allow-Origin', '*'); next();})
2021-09-21 12:18:11
124
原创 npm发包
前提：需要有自己的npm账号常用指令：npm login：登录npm whoami：查询登录npm publish：发布npm unpublish：取消发布v1.0.2:主版本号：1，做了不会向下兼容的改动；次版本号：0，做了会向下兼容的功能新增；修订号：2，做了会向下兼容的问题修正；npm version patch: 修订号递增1；npm version minor: 次版本号递增1，修订号归零；npm version major: 主版本号递增1，次版本号和修订号归零；发包：
2021-09-21 12:10:33
66
原创 mac平台 vscode提示Extension host terminated unexpectedly.
vscode插件没有正常加载；我这里是因为装了EasyScss,会报这个错，具体是哪个插件得自己感觉，最近装了哪个插件会报错，那应该就是这个插件的问题；
2021-09-16 16:34:35
484
原创 node.js记录
SemverSemver是一个专门分析Semantic Version（语义化版本）的工具，“semver”其实就是这两个单词的缩写。Npm使用了该工具来处理版本相关的工作。// 计较两个版本号的大小semver.gt(‘1.2.3’, ‘2.3.4’) // falsesemver.lt(‘1.2.3’, ‘2.3.4’) // true// 验证版本号是否合法，返回null即不合法semver.valid(‘1.2.3’) // ‘1.2.3’semver.valid(‘a.b.c’) /
2021-08-31 22:05:48
75
原创 Hexo博客插入本地图片、Markdown图片设置图片位置和大小
###Hexo博客插入本地图片修改工程根目录下的_config.yml的配置：post_asset_folder: true；创建一个文件夹，文件夹的名字和博客文件名一样，在里面放置你要引入的图片；在文章中正常引用，只需要把图片名字引入即可，不需要写相对地址和绝对地址eg:这是我文件目录：这是文章引入方式：Markdown设置图片大小及位置eg:设置大小只需要给img标签添加属性即可；设置位置可以再img标签外添加div标签，然后给div添加align属性；<div al
2021-08-31 09:56:12
2236
原创 electron探索
官网：https://www.electronjs.org/docs桌面应用的优点Web 应用受限于网络和浏览器特性，在这些方面，桌面应用要优于 Web 应用，下面列出桌面应用的一些优点：启动和运行不依赖于网络；桌面应用可以即时启动，不需要等待资源从网络上下载完再启动；桌面应用可以访问计算机的操作系统和硬件资源，包括连接在计算机上的硬件设备；桌面应用可以更好地控制软件的用户体验，不需要担心不同浏览器处理 CSS 的规则以及哪些 JavaScript 特性是被支持的；一旦桌面应用安装到用户计算
2021-07-28 10:43:44
258
原创 【js】js加载问题
你创建的script对象上提供了加载的钩子函数:onload/onreadystatechange(浏览器的兼容性处理),当你把script标签插入到DOM中时，浏览器另开一个线程去异步加载你需要的js资源，在加载的不同阶段：this.readyState对应不同的值，这个时候根据需要设置你的回调函数。这样就完成了对于一段js代码异步获取的监控。注：当script标签插入到html中时才会异步加载和执行。加载js文件方法：export const loadScript = (url) => .
2021-07-26 18:29:08
358
原创 【eslint】通过命令行修复eslint报错
eslint官网：https://eslint.org/docs/user-guide/getting-started局部安装eslint:npm install eslint -save-dev修复eslint报错：npx eslint ./src/pages/tabDemo --fix ： 修复./src/pages/tabDemo下的所有文件的eslint报错npx eslint xxx xxx xxx(支持多个路径) --fix...
2021-07-26 18:24:04
892
原创 前端单元测试
https://zhuanlan.zhihu.com/p/340615580示例：为生成router.js代码写一个单元测试import { Router } from '../tranform/vue/router';import { PageParser } from '../index';const babelParser = require('@babel/parser');const generate = require('@babel/generator').default;
2021-07-20 20:52:01
193
2
原创 vue-拖拽浏览器兼容问题
背景：当加上draggable="true"时，会导致火狐拖拽出现问题，会触发dragstart事件，然后mousemove和mouseup监听出现问题。但不会影响Chrome浏览器。解决办法：去掉draggable="true"语句，在火狐中拖拽正常了demo正确代码：<template> <div class="wrapper"> <div class="moveBox"> <div class="leftDiv"><
2021-07-09 15:26:41
656
原创 Vue.use(UI组件库)原理
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：// 调用 MyPlugin.install(Vue)Vue.use(MyPlugin)new Vue({// …组件选项})Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。插件暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，然后在install中去注册各个组件。官方use源码：import { toAr
2021-07-06 12:29:47
329
原创 【vue源码】模板编译
什么是模板编译把用户在标签中写的类似于原生HTML的内容进行编译，把原生HTML的内容找出来，再把非原生HTML找出来，经过一系列的逻辑处理生成渲染函数（render函数），这一段过程称之为模板编译过程。模板编译内部流程：第一步是将 模板字符串 转换成 element ASTs（解析器）第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）解析器整体流程：// 代码位
2021-06-04 20:31:53
122
原创 【Vue&JS】解决鼠标拖拽与点击事件冲突&元素在指定div中拖拽移动场景
拖动的元素在鼠标按下时通过时间差给元素添加一个属性（drag-flag），若超过规定时间则认为是在拖拽，属性设置为true, 否则设置为false。点击方法中通过获取这个属性判断是否要执行点击后的指令。html:<div class="drag-area"> <div v-if="isShowHelp" class="help-control" ref="helpControl" draggable="true" @mousedown.stop=.
2021-05-11 15:22:00
5081
2
原创 【Vue源码】虚拟DOM和diff算法
参考笔记：https://blog.csdn.net/weixin_44972008/article/details/115620198
2021-04-26 20:33:29
120
原创 【JS】判断Dom是否在可视区
// dom元素是否在可视区export const elementIsVisibleInViewport = (el, partiallyVisible = true) => { // 第一个参数是element 第二个参数是 是否部分可见也算可见 // 设置为false 即有一部份不可见即不可见 // 设置为true 即部分可见即算是可见 const { top, left, bottom, right, } = el.getBounding
2021-04-02 13:49:00
1993
原创 动态引入背景图片：background动态传参
<template><fin-carousel height="530px" class="carousel" arrow="never"> <fin-carousel-item v-for="(item,index) in templateInfo.templateData.list" :key="index"> <div :class="['item','banner-bg-'+(index%3+1)]">
2021-03-30 09:43:13
1559
原创 vue 动态引用背景图片
<template> <div :class="['item','banner-bg-'+(index%3+1)]"> <div class="title">{{title(item.bannerName)}}</div> <div class="content">{{content(item.bannerName)}}</div> <div v-if="item.bannerUr
2021-03-22 17:09:04
213
原创 promise理解和使用
1 Promise是什么抽象：是js中进行异步编程的新方案（旧方案就是纯回调）具体：从语法上说: 是一个构造函数；从功能上来说：promise对象用来封装异步操作并可以获取其结果；2 为什么用Promise1.指定回调函数的方式更加灵活；旧的：必须在启动异步任务前promise：启动异步任务 =>返回promise对象 =>给promise对象绑定回调函数（甚至可以在异步任务结束后指定）2.支持链式调用，可以解决回调地狱问题回调地狱：回调函数嵌套调用，外部回调函数异步执行
2021-03-18 00:02:55
374
原创 vuex学习
官方文档： https://vuex.vuejs.org/zh/1 vuex概述组件之间共享数据的方式父->子：v-bind子->父：v-on兄弟之间共享数据：EventBus只适用于小范围共享。vuex是一个状态管理模式，适用于多个组件共享同一状态时的场景，这里状态也可以理解为数据变量。使用vuex好处：能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同
2021-03-15 10:36:10
55
原创 import和require区别
遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方（虽然这么说但是还是一般放开头）import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使
2021-03-15 10:07:45
119
原创 模块化（二）
CommonJS每个文件就是一个模块，内部定义的变量是属于这个模块的，不会对外暴露，也就是不会污染全局变量。node和webpack都对commonjs原生支持。核心思想是通过require方法同步加载所依赖的其他模块，然后通过exports或者module.exports来导出需要暴露的接口.浏览器不兼容CommonJs,原因是浏览器缺少module,export,require,global四个环境变量，如需使用要用工具转换。commonJs采用同步加载不同模块文件，适用于服务端。因为模块文件
2021-03-15 10:06:35
57
原创 web前端模块化(一)—前言
什么是模块化将一个复杂的程序依据一定的规则规范封装成几个块文件，并进行组合在一起。内部数据与实现是私有的，只是向外暴露一些接口方法与外部其他模块通信。模块化的进程1.全局function模式-把不同的功能封装成不同的全局函数2.命名空间模式-基于简单的对象封装,劣势：数据不安全，外部可以直接修改模块内部的数据;所有成员都暴露在外；let obj = { data: '', func1: () => {}, func2: () => () {},}obj.data
2021-03-15 10:05:43
138
原创 搜索关键词高亮
接口请求数据后返回的结果进行正则替换然后用v-html插入页面使用方法如下：html代码:<div class="doc-body-item-title"> <span class="doc-body-item-title-word" v-html="item.replaceFileName" @click="goDetails(item)"> </span></div><div class="doc-body-ite
2021-03-12 14:46:36
71
原创 深度选择器/deep/覆盖组件样式没生效问题
场景：vue 在scoped中想覆盖组件样式没生效需要用到/deep/深度选择器，但要注意，/deep/前要有一个类名，不然找不到/deep/后面的类名
2021-03-01 15:13:30
989
原创 Github action自动部署Hexo Next
Hexo + GitHub搭建个人博客主要分为以下几个步骤：搭建环境准备（包括node.js和git环境，gitHub账户的配置）安装Hexo配置Hexo将Hexo与github page 联系起来详细请看：手把手教你用Hexo+Github 搭建属于自己的博客GitHub Actions自动部署HexoGitHub Actions自动部署Hexo教程：GitHub Actions部署Hexo博客遇到问题参考：https://www.jianshu.com/p/42453
2021-02-24 21:09:01
458
原创 【JS】Promise学习总结
若想系统学习Promise可以阅读：阮一峰大神写的Promise对象，此篇记录常用用法。Promise顺序请求方法1——连续使用then链式调用方法2——使用promise构建队列方法3——使用async、await实现类似同步编程，async函数内部实现同步参考：https://www.jianshu.com/p/dbda3053da20方法1：链式调用function getA(){ return new Promise(function(resolve, reject).
2021-02-24 10:32:00
302
原创 echarts地图使用
echarts地图使用先安装ehcarts: npm install echarts --save-dev引入echarts引入china.js<template> <div class="box"> <div id="chart"></div> </div></template><script>import echarts from 'echarts';import c
2021-01-26 18:29:24
484
转载 eslint最全规范讲解
参考链接：https://blog.csdn.net/weixin_40013817/article/details/108003812
2021-01-22 11:36:21
572
原创 vue&js 带有canvas的全屏和退出全屏
问题描述：因为canvas画布的高度和宽度是一开始固定写好的，当需要全屏时，画布的高度是开始定义的高度，就会出现屏幕下方黑了一块，如下图，所以我们需要判断是否全屏，画布根据这个属性改变画布高度。1.绑定resize事件，当浏览器窗口大小发生变化时判断是否全屏created() { this.isFullScreen = this.isFullscreen(); window.addEventListener('resize', () => { this.isFu.
2021-01-14 16:14:27
1391
原创 js 下载文件流
方法一：打开新的标签页下载download(row) { const link = document.createElement('a'); link.download = row.name; const prefix = this.$isMicro ? this.$prefixApi : '/api'; link.href = `${prefix}/package/download?id=${row.id}`; // 下载链接 link.target = '_bla
2021-01-13 09:57:08
575
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人