- 博客(37)
- 收藏
- 关注
RSS订阅原创 git本地仓库和远程仓库关联问题
命令行介绍1、本地项目不存在的情况2、本地项目已存在，但是git还没初始化3、本地git已初始化的情况4、本地git已初始化，但是远端不是空项目的情况
2022-06-14 17:54:47
2162
1
转载 prettier格式化不生效 单引号无效
记录一下最近使用Vue CLI创建项目，按照之前的设定，使用standard eslint标准。在格式化的时候发现，引号变成了双引号，结尾的分号也给我自动加上了，格式化的时候也没法自动格式化，一直报错，百思不得其解，自己的vscode 的setting文件里，prettier设置的都是单引号，不要分号的，完全不知道哪里出错了。关键时候还得Google，在prettier issue中发现了原因所在，prettier3.7以上会优先读取项目根目录下的editorconfig or prettier con
2022-05-07 23:41:40
911
原创 React报错：UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function
React中使用tailwind报错创建您的工程初始化 Tailwind CSS安装和配置 CRACO创建您的配置文件配置 Tailwind 来移除生产环境下没有使用到的样式声明按官网的方法安装,，最后npm run start会报错哦UnhandledPromiseRejectionWarning: TypeError: match.loader.options.plugins is not a function查阅了各种网站没有找到答案，最后在github上面找到了解答：github原因是C
2022-04-18 13:53:16
1776
4
原创 从 iterator 讲到 async/await
Iterator，即我们常说的迭代器。在许多编程语言中都有它的身影。而 JavaScript 在 ES6 规范中正式定义了迭代器的标准化接口。为什么需要迭代器这个问题嘛？需要从设计模式讲起了。我们知道设计模式中就有迭代器模式。迭代器模式要解决的问题是这样的：在遍历不同集合的时候（数组、Map、Set等），不同的集合有不同的遍历方式，每次都要针对集合的不同来重新编写代码。麻烦！懒惰的程序员们就想啊：是否可以有一种通用的遍历集合元素的方式呢？于是，迭代器模式诞生了。它是实现对不同集合进行统一遍历操作的一
2021-12-30 16:17:36
250
原创 js 继承的几种方式
首先，先写一个父类 Animal：function Animal(name) { this.name = name;}Animal.prototype.getName = function () { console.log(this.name);};// 测试用函数function test(Sup, Sub) { const o = new Sub(2, "name"); console.log(o); // 输出实例 console.log(o instanceof S
2021-12-28 17:59:48
275
原创 vue组件/实例的选项的顺序
常用属性的顺序export default { name:'component', // 组件名 components:{}, // 子组件 directives:{}, // 自定义指令 filters:{}, // 过滤器 mixins:{}, // 混入 model:{}, // 定义v-model props:{}, // 父组件传递的prop data() { return {} // 本地状态 }, computed:{}, // 计算属性
2021-11-05 12:21:09
897
原创 js实现单向链表
在js中存储多个数据的通常方式是使用数组，其实还可以使用链表这种数据格式来保存数据，但是原生js并没有提供链表这种特殊的数据格式在一些场景下，利用链表的的特性来解决一些算法类的问题是具有一定优势的。链表是什么先说说什么是链表，通常链表是由多个节点构成，每个节点都保存一个值（value），另外还保存了指向下一个节点的引用（指针next）上边的链表就由5个节点构成，其中第一个节点叫做链表的头部（head），最后一个节点叫做链表的尾部（tail）。我们猜想链表应该还具有一个length属性来记录链表长
2021-10-25 16:55:46
216
原创 从零开始实现一个promise（原理详解）
promise简单使用console.log(1);new Promise((resolve, reject) => { console.log(2); resolve("aaa");}) .then((value) => { console.log(4, value); return "bbb"; }) .then((value) => { console.log(5, value); return "ccc"; });co
2021-10-21 17:37:47
274
原创 js手写简易版本的Promise
原生Promise的基本用法const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('我是resolve的值') }, 200)})p.then((value) => { console.log(`成功时时触发我：${value}`)}, (error) => { console.log(`失败时触发我：${error}`);})Pr
2021-10-09 14:58:20
146
原创 js实现构造函数继承的extend方法
现在有两个构造函数 Super 和 Child如何实现Child 继承 自Superfunction Super() { this.age = 12}Super.prototype.sayHello = () => { }function Child() { this.color = 'red'}Child.prototype.getColor = () => { }首先分别 new 一下两个函数控制台打印出两个实例，他们分别都有自己的实例属性以及原型
2021-10-08 09:51:59
901
原创 js构造函数继承实现原理
对象创建首先，我们知道对象有两种创建方式：字面量创建法// 字面量const p = { age: 23, weight: 60 }new创建法// 构造函数function Person(age, weight) { this.age = age this.weight = weight}const p = new Person(23, 60)console.log(p) // {age: 23, weight: 60}或者使用es6语法// 类c
2021-10-05 20:11:00
286
原创 vue基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default { components: { Base
2021-08-20 14:42:10
226
原创 js new的实现原理
new的使用方法new用来创建一个实例对象，其隐式原型__proto__指向构造函数的原型prototype1、在构造函数中使用new// 构造函数function Car(color, brand) { this.color = color this.brand = brand this.age = 0 // 默认返回实例对象 this}// 原型方法Car.prototype.getcolor = function () { return this.
2021-08-18 13:15:44
452
原创 十大经典排序算法（动图演示）
算法概述算法分类十种常见排序算法可以分为两大类：比较类排序：通过比较来决定元素间的相对次序，由于其时间复杂度不能突破O(nlogn)，因此也称为非线性时间比较类排序。非比较类排序：不通过比较来决定元素间的相对次序，它可以突破基于比较排序的时间下界，以线性时间运行，因此也称为线性时间非比较类排序。算法复杂度相关概念稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面。不稳定：如果a原本在b的前面，而a=b，排序之后 a 可能会出现在 b 的后面。时间复杂度：对排序数据的总的
2021-08-18 08:59:33
636
原创 js保留n位小数
先上完整代码，这里提供3种解决思路/** * 保留n位小数，四舍五入 * @param {Number} _m_ 原始数字 * @param {Number} _n_ 保留n位，默认2位 * @returns */function fixed(_m_, _n_ = 2){ const num = Number(_m_), n = Number(_n_); return num.toFixed(n) // 或者 // Number.prototype.toFixed.
2021-08-17 16:33:16
705
原创 js解决精度丢失问题
js精度丢失问题先上完整代码解析加法减法乘法除法总结先上完整代码const math = { /** * 加法 * @param {Number} a 加数 * @param {Number} b 加数 * @returns */ accAdd(a, b) { let m, n, x; // a的小数位数，b的小数位数，放大倍数 try { m = a.toString().split(".")[1].length; } catc
2021-08-17 15:49:35
1473
原创 js call方法实现原理
前言我们知道call方法可以改变this的指向使用方法如下const book = '《十万个为什么》'function log() { console.log('这本书是' + this.book)// this默认指向全局window对象}log() // 这本书是《十万个为什么》const instance = {book:'《从你的全世界路过》'}// 改变this指向instancelog.call(instance)// 这本书是《从你的全世界路过》log函数中使
2021-07-30 12:53:47
1267
原创 vue中v-model实现原理，几种实现思路
通过props接收value,作为input的property(dom属性)，另外绑定input事件，通知父组件更新数据// input.vue<template> <input type="text" :value.prop="value" @input="notify" /></template><script>export default { props: { value: String },// 必须用 "value" 这个prop
2021-07-30 11:36:08
1257
原创 js bind方法实现原理
首先先了解下bind的使用方法（转MDN例子）bind() 方法创建一个新的函数 ，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数而其余参数将作为新函数的参数，供调用时使用。语法：function.bind(thisArg[, arg1[, arg2[, ...]]])参数thisArg调用绑定函数时作为this参数传递给目标函数的值。arg1, arg2, …当目标函数被调用时，被预置入绑定函数的参数列表中的参数。返回值返回一个原函数
2021-07-29 11:56:47
1198
原创 es6 export 与 import完整用法
基本用法模块导入导出各种类型的变量，如字符串，数值，函数，类导出的函数声明与类声明必须要有名称（export default 命令另外考虑）不仅能导出声明还能导出引用（例如函数）export const str = '字符串'export const num = 123export const obj = { name: 'Tom', age: 24 }export const arr = [1, 2, 3]export const set = new Set([4, 5, 6])ex
2021-07-20 12:23:07
1031
原创 vue的provide和inject使用方法及原理
provide / inject应用场景父子组件通讯：替代this.$parent祖孙组件通讯: 祖先组件不需要知道哪些后代组件在使用他提供的数据；后代组件也不需要知道注入的数据来自哪里使用方法// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 子组件注入 'foo'var Child = { inject: ['foo'], created () { console
2021-07-19 13:19:53
898
原创 js实现自定义事件
js实现自定义事件自定义事件类自身属性eventMapon方法off方法emit方法onOnce方法自定义事件类从自定义事件的功能上分析，它应该拥有以下几个方法：能够注册某个事件，并允许添加相应的方法能够移除某个事件能够触发某个事件有一个队列或者映射来缓存当前已注册的事件话不多说，先上代码class Observer { constructor() { this.eventMap = {} } /** * 注册事件 * @par
2021-07-16 09:42:29
2476
原创 控制台打印vue实例
前言：Vue项目运行后会把各个组件的数据挂载到对应的dom上根组件(#app)上获取实例首先app.vue会挂载到 id 为 “app” 的 div 上边打印这个divconsole.dir(document.querySelector('#app'))查看控制台，发现存在一个键："__vue__"其实app.vue对应的实例就是这个__vue__对象打印这个对象console.dir(document.querySelector('#app'..
2021-04-07 11:38:36
8442
1
原创 平滑滚动的3种实现方式
引言：锚点跳转或者返回页面顶部的时候通常是“嗖”的一下直接滚动到目标位置，缺少动画效果，感觉有点奇怪。这里提供3种滚动实现方式示例都在vue当中实现<template> <div class="scroll"> <a href="#bottom"> <div class="tag">这里是a标签</div> </a> <div class="placeholder">这里是中间占位元素</
2021-02-18 12:05:25
3162
原创 js 求数组最大值的方法
/** * * @param {Array} list 传入数组 * @return {Number} 返回数组最大元素 */// 方法一：利用Math里边的max方法function maxItem(list) { // 利用Math里边的max方法 return Math.max(...list)}// 方法二：利用Math里边的max方法function maxItem(list) { return Math.max.apply(null, list)}//.
2021-02-01 10:43:17
1391
1
原创 js数组原生方法的实现
1、数组遍历 forEach()/** * 自定义forEach * @param {Function} fn 待执行方法 */function forEach(fn) { for (let i = 0; i < this.length; i++) { this[i] = fn(this[i], i) }}2、数组映射 map()/** * 自定义map * @param {Function} fn 待执行方法 */function map(f...
2021-01-27 17:07:48
196
原创 js数组与字符串转换
数组转字符串const list = [1,2,3]1、利用数组原型方法 toStringconst result = list.toString()console.log(result) // '1,2,3'2、利用String对象const result = String(list)console.log(result) // '1,2,3'3、利用数组原型方法 joinconst result = list.join(',')consol...
2021-01-26 09:47:57
693
原创 CSS实现梯形
1.横向梯形<div class="div1"></div><div class="div2"></div><style> .div1{ width:100px; height: 0; border-bottom: 20px solid #000; border-left: 15px solid tra...
2020-12-17 16:59:23
12128
原创 更新vue/cli到版本4
1、卸载当前脚手架如果当前vue/cli版本大于3，执行以下命令npm uninstall @vue/cli -g如果当前vue-cli版本小于3，执行以下命令npm uninstall vue-cli -g2、安装指定版本脚手架cnpm install -g @vue/cli@版本号// 如果使用"npm install -g @vue/cli@版本号"容易报错，建议使用cnpm或者直接安装最新版本cnpm install -g @vue/cli@...
2020-10-17 18:25:12
521
原创 vue项目配置打包入口
配置文件为vue.config.js通过配置chainWebpack区分开发环境与生产环境的打包入口module.exports = { configureWebpack: { externals: { // vue: 'Vue', // "element-ui": "ELEMENT" // 'vue-router': 'VueRouter' } }, chainWe
2020-10-13 17:01:50
910
原创 Vue项目编译时移除console语句
脚手架里安装开发依赖：babel-plugin-transform-remove-console或者命令行安装：npm ibabel-plugin-transform-remove-console-D安装完成之后进行配置，这里介绍2种配置方法，选择其一使用。配置方法1：在项目中的babel.config.js写入配置方法2：在项目当中的.babelrc 文件当中写入（参考https://www.npmjs.com/package/babel-plugin-transf...
2020-10-13 14:03:58
415
原创 img底部边距问题
上下两个img元素总会有一条多出来的空隙，大概为4px。解决办法给img设置vertical-align:bottom;这样空隙就消失了
2020-09-19 13:54:40
130
原创 子元素margin溢出问题
发生条件当子元素与父元素的上边界重合时，给子元素设置margin-top这时候子元素的margin会挂载父元素上，变成了父元素的margin-top解决办法1父元素设置border-top：1px（会影响父元素的高度）解决办法2父元素设置padding-top替代子元素的margin-top解决办法3子元素前边加一个<table></table>标签解决办法4给父元素加overflow:hidden这个属性...
2020-09-19 13:35:42
665
原创 git ssh配置问题
git clone 的两种方式1、https方式常见的命令：git clonehttps://github.com/18602435706/test.gitclone之后如果要push，一般需要输入账号密码，每次输入很麻烦，于是：解决方案1：修改 C:\Users\Administator\.gitconfig[user] name = bossqiu //你的用户名 email = 123456789@qq.com //你的git邮箱账号[credential...
2020-09-18 10:17:07
189
原创 git连接远端仓库
1、初始化gitgit init2、设置远端地址git remote add origin 地址3、本地分支拉取远端mastergit pull origin master4、git add .5、git commit -m6、git push
2020-03-26 15:24:35
158
原创 js时间戳和日期互相转换
获取当前日期：var date = new Date() // 2020 17:09:29 GMT+0800 (中国标准时间)获取当前时间戳：var timeStamp = new Date().getTime() // 1584954684507日期转时间戳：var timeStamp = new Date('2020 17:09:29 GMT+0800 (中...
2020-03-23 17:23:59
238
原创 JavaScript中forEach的实现原理(简单实现步骤)
新建一个数组对象arr：var arr = ['xiaoming','lihua']给arr添加一个方法for_Each：arr.for_Each = function (fn) { for (var i = 0; i < this.length; i++) { fn(this[i]) }}调用for_Each方法：arr.for_...
2020-02-19 15:08:22
3146
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人