自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(43)
  • 收藏
  • 关注

原创 HTML知识点总结篇(一)

HTML复习之知识点汇总

2022-11-16 20:33:47 673 1

原创 Vue3+TS+Vite 搭建组件库记录

Vue3+TS+Vite 搭建组件库过程

2022-11-16 17:27:34 3222

原创 组件库技术选型总结

组件库技术选型,包含架构、技术路线、编码规范、单元测试、文档生成和部署、发包

2022-11-16 17:19:09 1731

原创 主流组件库学习

分析的这些组件库都是基于几大前端的生态来实现的,在设计上都已经形成了自己的风格和规范,也有自己的沉淀。

2022-11-16 17:14:58 1225

原创 闭包学习+ 实践 -- 用闭包实现重载

闭包就是能够读取其他函数内部变量的函数。由于在JS中,只有函数内部的子函数才能做到,因此我们也可以简单理解为:定义在一个函数内部的函数。

2022-11-15 15:30:50 146

原创 前端的导入导出:「CommonJS」「ES Module」模块化规范

模块化开发有助于我们将代码进行拆分,便于开发和维护,但如果不清楚模块化规范,就会在开发时不知道该用 require 还是 import,导出时该用 export 还是 module.exports,所以我们必须搞清除它们的区别和事情的来龙去脉。本篇主要内容是 CommonJS 和 ES Module 规范。其它还有 AMD、CMD、UMD规范,感兴趣的小伙伴可以自行了解一下。

2022-11-14 21:19:20 1751

原创 npm发包一定要了解的知识

这几个文件在npm publish的时候都是默认作为包的一部分的。发布一个包,考虑到别人的下载速度,包体积肯定需要尽量小,所以源文件最好不包括,那如何控制只发哪些文件呢?包发布了很多次后,使用者升级就需要知道他是否需要升级,需要查看文档看看有哪些不兼容性改动,所以需要一个。如果手动的维护肯定会有忘记的时候,所以需要使用工具来自动生成,我们可以使用。信息,自动生成日志,比如新增啥啥功能,修复啥啥啥bug。字段的值是一个数组,你可以写具体文件名,也可以写目录,还支持。字段来控制,这个字段中的文件默认会加入到。

2022-11-14 21:01:14 3082

原创 package.json及package-lock.json文件分析

package.json及package-lock.json文件分析

2022-11-14 20:58:51 1720

原创 npm 生态

npm相关及 npm、yarn、pnpm区别

2022-11-14 20:57:05 781

原创 CJS、ESM、AMD、CMD、UMD

CJS、ESM、AMD、CMD、UMD

2022-11-14 20:55:07 911

原创 CNS、DNS知识点总结

CNS、DNS

2022-11-14 20:50:25 563

原创 performance 工具学习

performance 工具学习

2022-11-14 20:48:51 410

原创 html加载过程

html加载过程

2022-11-14 20:35:22 809

原创 页面优化解析总结

为什么做性能优化?经典问题:白屏时间长,用户体验差 产生原因:网络问题、关键路径渲染(CRP)问题

2022-11-14 10:03:45 1008

原创 Vue实现Word文档在线预览功能(内网、外网)!!!

Vue实现Word文档在线预览功能

2022-08-01 09:19:17 13364 3

原创 Vue中使用el-data-picker报错 Avoid mutating a prop directly since the value will be overwrite

使用 el-data-picker报错

2022-07-18 21:16:01 5000 5

原创 Vue项目中使用@代替src——并在VScode中开启@路径自动提示

vue项目设置@路径提示,@代替src

2022-06-24 16:09:18 1418

原创 关于vue新增 - $attrs & $listeners & inheritAttrs

$attrs & $listeners & inheritAttrs

2022-06-24 15:30:41 358

原创 vue实际运用:处理token过期

处理token过期

2022-06-20 08:58:26 2434

原创 Vant Uploader 图片上传,根据后端url回显问题

Vant Uploader 图片上传,根据后端url回显问题

2022-06-13 08:49:38 1421

原创 React生命周期

组件的挂载:组件在首次创建后,进行第一次的渲染为挂载期。挂载期有的一些方法会被依次触发,列举如下:constructor(构造函数,初始化状态值)getInitialState(设置状态机)getDefaultProps(获取默认的props)UNSAFE_componentWillMount(首次渲染前执行)render(渲染组件)componentDidMount(render渲染之后执行的操作)//组件挂载import React from 'react';import React

2022-05-15 17:32:02 180

原创 npm run eject 报错This git repository has untracked files or uncommitted changes解决方案

在创建 React 项目之后,使用 npm run eject 命令会报错:This git repository has untracked files or uncommitted changes。这个的原因是因为初始化项目之后,该项目并没有本地 git 仓库,而此项目目录下又有 .gitignore 文件,所以此时会向上级寻找未提交的项目。解决方法1.初始化仓库git init2.添加并提交git add .git commit -m '初始化项目'3.重新执行npm run ej

2022-05-02 22:28:55 978

原创 使用NVM安装NodeJS并解决npm下载依赖失效问题(最全流程)

本人因为刚学习react,需要创建项目。下载过react依赖后才发现黑窗口提示我因node版本过低无法创建项目,怎么办呢?我去网上看了很多node升级的文章,大多数说的是重新去官网下载更高版本,我就跟着他们一步步走,但是很快问题就出现了。先是文章中说应该更改node缓存地址,防止给C盘造成过大压力。这就涉及到更改环境变量,我一顿操作后忽然发现我新安装的node版本查不到。emmmmmm 这是为什么呢?我去看了我的文件夹,发现之前的NodeJs版本是由nvm管理的。哦~~~原来是这样。我立马改道又去搜了nvm

2022-04-28 20:02:17 7970 2

原创 正确理解闭包及闭包使用场景

一、闭包的特性函数嵌套函数函数内部可以引用外部的参数和变量参数和变量不会被垃圾回收机制回收二、闭包的定义及其优缺点定义:闭包 是指有权访问另一个函数作用域中的变量的函数,创建闭包的最常见的方式就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量缺点:闭包的缺点就是常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。存在闭包的原因:内部的函数存在外部作用域的引用就会导致闭包。闭包是javascript语言的一大特点,主要应用闭包场合主要是为了:设计私有的方法和变.

2022-04-25 15:08:32 5535

原创 前后端分离开发之权限篇及 VUE路由守卫 next() / next({ ...to, replace: true }) / next(‘/‘) 说明

写项目过程中在权限部分遇到了不少有关next() 的问题,解决完之后发现对于权限篇的整体逻辑清晰不少,在这里记录一下。首先是路由守卫,是不是感觉简简单单beforeEach((to, from, next) => { to // 要去的路由 from // 当前路由 next() // 放行的意思}但是在看别的项目时常常能看到next('/logon') 、 next(to) 或者 next({ ...to, replace: true }) 这又是啥意思呢其实在路由守卫中,只有ne

2022-04-15 17:23:41 728

原创 vue3 整合 mock.js(2022)

第一步:安装1. 安装mockjs// 将mockjs 安装在 devDependencies 中,只能在生产环境中起作用npm install mockjs -D2. 安装axiosnpm i axios --save第二步:编写请求文件user.ts1.在src下面新建mock文件夹,然后在其中创建 index.ts 文件将所需的mock请求文件home.ts引入,并在该页面做相关mock配置,具体配置可查看官网。// 首先引入Mockconst Mock = require('

2022-03-27 11:13:34 1833

原创 TypeScript学习日记

文章目录简介为什么会有TypeScript?JavaScript 与 TypeScript 的区别TypeScript优势TypeScript安装、编译配置TS开发工具 Vscode自动编译 .ts文件三、TypeScript数据类型及理解四、函数函数声明法匿名函数法没有返回值方法传参---可选参数方法传参---设置默认参数剩余传参---即 es6 中的 ... 语法函数重载箭头函数---和 es6 一样类基本语法类的继承修饰符Get/Set访问器静态属性接口基本语法继承接口泛型介绍泛型函数泛型类泛型接口

2022-03-20 17:57:59 1585

原创 JavaScript常用八种继承方式

1、原型链继承构造函数、原型和实例之间的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个原型对象的指针。继承的本质就是复制,即重写原型对象,代之以一个新类型的实例。function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property;}function SubType() {

2022-03-14 10:38:17 180

原创 javaScript 原型、原型链、继承

一、prototype在JavaScript中,每一个函数都有一个prototype属性,这个属性指向函数的原型对象。例如:function Person(age){ this.age=age;}Person.prototype.name='张三';val per1= new Person();val per2= new Person();console.log(per1.name); //张三console.log(per2.name); //张三上述例子中,函数Person

2022-03-06 11:38:32 111

原创 VUE的扩展运算符

含义:扩展运算符( spread )是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。操作数组: //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2', '3']; console.log(...iArray); // 打印结果 1 2 3

2022-02-27 19:07:12 339

原创 JavaScript中的内存溢出和内存泄露

内存溢出概念:一种程序运行出现的错误,当程序运行需要的内存超过了剩余的内存时,就出抛出内存溢出的错误。举例:var obj = {}for (var i = 0; i < 10000; i++) { obj[i] = new Array(1000000000)}内存泄露概念:占用的内存没有及时释放,内存泄露积累多了就容易导致内存溢出。常见的内存泄露:(1)意外的全局变量(2)没有及时清理的计时器或回调函数*闭包举例:(1)意外的全局变量function fn()

2022-02-21 18:25:24 645

原创 Vue 清除Form 表单二次弹出表单时上次的提示信息

二次打开表单,验证提示信息还在,如何解决呢?话不多说,直接上代码在弹出表单方法内加入下面代码即可①清除表单内容和清除表单验证消息this.$nextTick(()=>{ this.$refs.form.resetFields();})②只清除表单验证消息、不清楚表单内容this.$nextTick(()=>{ this.$refs['form'].clearValidate() // 只清除清除验证})...

2022-01-16 20:01:47 667

原创 ElementUI 之 Cascader 级联选择器指定 value label

ElementUI 的 Cascader 级联选择器对 :options=“options” 里的数据格式是有特定要求的:input 框显示的值是 options 里的 label 值。如果 options 的键值对不是 value label ,就需要 props 来配置。<el-cascader ref="cascader" v-model="companyForm.industry" style="width: 500px; " :options="belongInd

2022-01-02 19:32:34 1048

原创 取消el-upload自带动画效果及图片不裁剪功能

在应用el-upload所在页面加上如下代码,可以取消过渡效果,并且更改图片显示方式/*去除upload组件过渡效果*/.el-upload-list__item { transition: none !important;} .el-upload-list__item-thumbnail { /* 图片在方框内显示长边 */ object-fit: scale-down !important;}如果加上后仍然没有效果,可以加上::v-deep深度选择器/*去除uploa

2021-12-26 19:18:37 3271 7

原创 Cannot read properties of undefined (reading ‘split‘)

这次在写小程序项目中,有一个需求其中需要将获取的时间数据 “2021-10-25 02:10:20” 转换格式成 “2021/10/25 02:10” 这种格式, 需要用split来截取。截取过程中遇到一个我之前没有遇到过的问题,那就是[Vue warn]: Error in render: “TypeError: Cannot read property ‘split’ of undefined”页面会报错无法读取为定义的属性split如果大家也遇到了这个问题,那就需要将其更改为以下写法:let

2021-12-19 18:14:39 7310 3

原创 setInterval 实现页面轮询

本文实例讲述了JavaScript使用setInterval()函数实现简单轮询操作的方法。分享给大家供大家参考。具体分析如下:概念:轮询(Polling)是一种CPU决策如何提供周边设备服务的方式,又称“程控输出入”(Programmed I/O)。setInterval是一个实现定时调用的函数,可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval方法会不停地调用函数,直到 clearInterval被调用或窗口被关闭。由 setInterval 返回的ID值可用作 clea

2021-12-05 19:34:06 944

原创 Vue搭建项目框架及常见问题总结

一、安装node环境1、下载地址为:https://nodejs.org/en/2、检查是否安装成功:如果输出版本号,说明我们安装node环境成功3、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/    输入:npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。    检查是否安装成功:二、搭建vue项目环境

2021-11-28 19:43:09 990

原创 css3 unset应用

unset属性unset 关键字我们可以理解为不设置,其实,它是关键字initial和inherit的组合。当我们给一个css属性设置了unset的话:1,如果该属性默认继承属性,该值等同于inherit2,如果该属性是非继承属性,该值等同于initial先了解下,哪些属性是可继承的,哪些是不能继承的属性:不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-

2021-11-20 15:15:56 855 1

原创 setInterval使用过程中报Uncaught SyntaxError: Unexpected identifier

背景:项目需求是需要在附件下载下载成功之前定期请求接口,因此我使用了setInterval,即间歇调用。间歇调用与超时调用setTimeout()方法类似,只不过它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载。问题:chrome下运行编写的javascript代码时,在工具javascript控制台下有时会出现“Uncaught SyntaxError: Unexpected identifier ”的报错。我查了很多有关报错信息,大部分都说是因为代码不规范,可能是在define里

2021-10-31 11:15:01 1920 1

原创 el-select多选选择器(在懒加载的基础上) 重磅:实现模糊搜索+多选+未加载数据的正确回显!!

项目需求:由于表单中的一个el-select中的数据过多,下拉框用户体验不好,因此需要做成有懒加载且分页的下拉框。后又因为该功能需要多选,并且打开表单要能够正确回显。这些需求加起来,导致问题变得复杂起来。我在网上也看了许多文章,没有找到好的解决方案。因此我将自己的记录下来,还望各位指点!!!(本项目请求后端需要传id,page,size,name)(name的格式为JSON形式的[id:1,name:’’],[id:2,name:’’])1、在需要使用懒加载的el-select加上我们的自定义指令(v-

2021-10-23 21:26:18 3072

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除