- 博客(98)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 安装node，配置npm, yarn, pnpm, bun
安装包的安装过程很简单，基本只要注意安装目录以及环境变量就行。，包含各种安装方式以及多版本管理方式。命令移除项目级和用户级的配置项，则使用内置的默认值。具体的命令需要哪些标志或参数，可以使用。使用包管理器也有好多种，这里介绍一个。命令相似，多了一个仓库管理。的功能类似，但更加强大。，可以指定项目使用的包管理器。没有对应命令的话，可以尝试使用。一样执行命令，并提供了许多内置。命令，所以需要手动修改项目的。默认配置是项目级，文件名是。自带的包管理器，默认使用。只能指定项目级和系统级。的配置文件，否则就写入。
2025-03-27 02:57:10
522
原创 windows安装nvm
其它配置文件以及环境变量也需要先删除到回收站或重命名。可以可选的勾选那4个通知，也可以安装好后根据命令修改。如果下载太慢，可以使用一些github加速工具，比如。环境变量，这两个的值就是之前的目录。安装过程有两处地方需要注意，一个是。不要安装在一个当前用户没有权限的位置。安装的目录没有权限。这样的环境变量，就需要将它的值保持和。如果还是有问题，那说明是一开始说的。如果命令报错，有两个可能。所以安装前需要创建两个目录：一个。的链接目录，这个目录会链接到。一个是环境变量有问题，链接目录，这个目录链接到。
2025-03-26 00:52:36
439
原创 nvm-win安装与使用
如果已经安装了node，安装软件会提醒，确认后将已安装的node移动到nvm安装路径内。网上应该都可以找到，或者去github搜nvm。，这是一个链接目录，实际是指向上面路径中的实际node版本的目录。的值，这是因为以前安装的node会被移动到nvm路径下，安装基本都是下一步，nvm的安装路径可以修改为。这个链接目录成为当前node版本的新目录了。是node安装的，其它两个是nvm安装的。就是安装时候设置的路径值，应该都在。下安装，否则安装可能会失败。这个链接目录里的内容实际都是。设置node链接路径为。
2023-03-24 16:18:09
704
原创 node复制文件夹及文件
或复制文件调用总共三种模式，可以使用按位或的方式同时指定：，。复制文件夹直接复制文件夹使用。将目录的内容复制到目录。复制特定文件或文件夹需要使用函数：函数返回会递归遍历文件夹下的所有文件或文件夹
2022-12-05 18:13:34
1374
原创 正则表达式基础
断言的组成之一是边界。对于文本、词或模式，边界可以用来表明它们的起始和终止部分(如先行断言，后行断言及条件表达式)。适合匹配表情，标点符号及特定语言或文字的字母。这些量词匹配默认会尽可能多的匹配。等都可以表示成字符集的形式，代表匹配和记住的范围。正则表达式模式是简单字符和特殊字符构成的。这些代表文本字符串的开始结束及单词的边界。字符类可以区分各种字符。匹配字符集及捕获组和非捕获组以及具名捕获组。可以清楚的查看你的正则表达式是否符合需要。量词表示匹配的字符或表达式的数量。等各自代表特定类型的字符。
2022-09-26 16:12:29
668
原创 CSS伪类介绍
表示设置了 checked 属性的 checkbox 和 radio 元素，设置了 selected 属性的 option 元素，表单的默认提交按钮(type=submit)。link 是链接的初始状态，visited 是链接访问过(点击)之后的状态，hover 是鼠标悬停的状态，active 是激活状态(鼠标主键按下及松开之间的状态)。因为索引是从 1 开始，所以同级兄弟元素的第一个元素就是奇数 1。css伪类就是元素的一种特殊状态，下面的伪类是相关的，可以尝试其中的示例代码看看实际效果。
2022-09-20 17:54:41
2006
原创 前端从零搭建简单的工作流
文章目录windows 从零搭建工作流项目创建项目项目初始化gitpackage.jsontsconfig.jsonprettiereslintlint-staged 配合 huskywindows 从零搭建工作流项目以下命令建议在 git-bash 中执行。创建项目# mkdir [projectName]mkdir pro-test && cd pro-test项目初始化git# 初始化Git仓库git init# 创建 .gitignore，编辑该文件例如node
2022-04-01 22:15:16
914
原创 防抖与节流
文章目录防抖与节流防抖节流防抖与节流防抖与节流都是高阶函数。防抖是让函数延迟执行，多次点击触发事件以最后一次点击为准。节流是以第一次点击为准，短时间内的多次点击都会被忽略。节流函数是以防抖函数为基础调用的，所以先实现防抖函数。防抖// 防抖函数function debounce(fn, wait, immediate) { // immediate参数是在节流函数中调用传递的，防抖函数中不用 let timeout; // lastTimeInterval 记录两次点击之间的时间
2022-03-28 16:04:13
265
原创 伪类与伪元素
文章目录伪类与伪元素比较常见伪类常见伪元素伪类与伪元素比较伪类伪元素使用:使用::，为了兼容也可以使用:代表元素的某个状态信息表示元素的某个部分，通常是实际存在的常见伪类通用:hover:root锚点相关:link:active:visited元素相关:empty:only-child:only-of-type:not():first-child:first-of-type:last-child:last-of-type:n
2022-03-27 18:39:03
966
原创 原生js处理多行文本溢出
文章目录介绍示例介绍目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号，但是兼容性可能不太好。最近我发现一个兼容性比较广的方法，那就是getClientRects，大家可以点击链接查看完整的介绍。这里简单介绍一下，对于块元素没什么好说的，主要是对于行内元素(比如a，span)会将每一行文本的位置信息作为ClientRect对象返回，主要包含left，top，right，bottom，width，height等属性。示例<div class="box"> <
2022-01-20 12:31:48
1665
原创 JavaScript事件传播简单介绍
文章目录事件传播事件传播顺序事件传播类型事件捕获事件冒泡示例终止事件传播事件传播事件传播顺序事件传播的顺序是先执行事件捕获，然后执行事件冒泡。事件传播类型事件捕获事件冒泡addEventListener(type, listener, options)用于注册事件监听。type是事件监听的类型，listener是事件监听函数，options是一个可选项，默认值是false，表示在事件冒泡阶段监听事件。options如果是boolean类型，true就是在事件捕获阶段监听事件，fal
2022-01-17 12:40:29
590
原创 javascript浮点数介绍
文章目录介绍图示浮点数形式特殊数值规格化非规格化总结介绍单精度浮点数32位，双精度浮点数64位。其中单精度由1位符号位，8位指数位，23位尾数位组成。双精度由1位符号位，11位指数位，52位尾数位组成。图示以64位浮点数为例，sign表示符号位用S表示，exponent表示指数位用E表示，mantissa表示尾数用M表示。浮点数形式规格化：当指数位E不全为0也不全为1时就是规格化形式浮点数非规格化：当指数位E全为0时就是非规格化形式浮点数特殊数值：当指数位E全是1时就是特殊数值，当尾数M
2022-01-12 23:03:17
3021
原创 jest使用es6语法
jest使用es6安装依赖设置package.json添加jest配置文件添加babel配置文件最后安装依赖// npmnpm i --save-dev jest babel-jest @types/jest @babel/core @babel/preset-env// yarnyarn add -D jest babel-jest @types/jest @babel/core @babel/preset-env// pnpmpnpm add -D jest babel-jest @typ
2021-12-28 10:29:27
774
原创 call, apply, bind的分析与实现
改变函数this指向如何改变函数的this指向自定义实现`call`，`apply`，`bind`如何改变函数的this指向如果是函数声明，那么函数内部的this指向全局对象或者调用该函数的对象。箭头函数的this绑定的是父级作用域内的this使用call，apply，bind可以绑定this指向。其中bind是永久改变this指向并且不会立即执行。apply，call临时改变this指向并且立即执行。apply，call不同之处在于调用的参数形式：call(thisArg, arg1?,
2021-12-25 16:07:06
556
原创 prettier简单介绍
prettierprettier的目标prettier的配置方式prettier的规则prettier的目标prettier不针对代码质量，目的就是格式化代码的样式而不影响功能，并且可格式的文件类型众多。prettier的配置方式prettier配置的方式有很多，同样也支持.prettierignore的过滤package.json中的prettier字段用JSON或YAML写的.prettierrc文件.prettierrc.json, .prettierrc.json5, .pretti
2021-12-21 15:36:27
944
原创 eslint内置规则介绍
内置规则eslint 内置规则介绍eslint 推荐配置eslint 内置规则介绍modules.exports = { // 所有规则页面(https://eslint.org/docs/rules)标记为 ✔ 的规则将会默认开启 extends: ['eslint:recommended'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, /* Rules *代表recommended
2021-12-18 23:25:07
1125
原创 vue监听路由
vue监听路由两种方式监听路由vue2监听路由vue3组合式api监听路由两种方式监听路由一种是使用vue2的写法，还有一种是组合式api的写法。vue2监听路由export default defineComponent({ watch: { $route: { handler: (val, oldVal) => { console.log(val); }, immediate: true, }, },});这
2021-12-06 15:55:14
4036
原创 vue3简单处理全屏
处理全屏1. 尝试fullscreenchange事件2. 使用keydown事件3. 最后的收尾处理1. 尝试fullscreenchange事件// script setup tsimport { onBeforeUnmount, ref } from "vue";const isSupport = document.fullscreenEnabled;const isFullscreen = ref(false);const handleFullscreenchange = () =&g
2021-12-02 11:10:07
2151
原创 vscode报错：找不到.d.ts中定义的名称
假如你在写ts的类型时报错：找不到名称 xxx，并且你已经在types或者typings目录中定义好了。那你应该检查你的tsconfig.json的include字段。include数组应该包含所有的你写了ts的文件。比如你的include如下：{ "include": [ "src/**/*.ts", "src/**/*.d.ts", "types/**/*.d.ts" ]}这时你在<project>/build/test.ts文件中使用了ty
2021-11-19 13:56:24
9568
原创 element-ui 点击dialog右上角关闭图标不关闭的问题
网上一些人说不起效是因为 visible 属性没有添加 .sync 修饰符。一般情况下是因为一个 before-close 属性，这个是关闭前的回调，会暂停dialog的关闭。该回调接收一个 done 函数作为参数，必须在回调里执行 done() 才能关闭dialog。如下所示，具体示例可以参考element官网，查看具体怎么使用。参数说明类型before-close关闭前的回调，会暂停 Dialog 的关闭function(done)，done 用于关闭 Dialog
2021-07-29 15:40:58
4463
3
原创 Vue初始渲染的过渡
初始渲染就是在页面刚出现或者刷新的时候实现一些过渡效果，而且默认状态肯定不能是隐藏的，否则无法使用初始渲染。若要使用初始渲染，必须给transition添加 appear attribute或者v-on:appear 钩子<transition appear>...</transition><transition v-on:appear="customAppearHook">...</transition>初始渲染默认和进入过渡一样。
2021-07-09 19:45:47
655
原创 js驼峰命名与短横线命名互转
在js中，驼峰命名一般首字母小写，其它首字母大写的形式。短横线命名所有字母小写，单词与单词之间用短横线连接。搞清楚区别之后就很简单了，使用正则全局匹配大写字母并替换成短横线+小写字母，或者匹配短横线+小写字母替换成大写字母。replace的具体用法参考MDNString.prototype.replace// 驼峰转短横线let str = "testStrName";let newStr = str.replace(/([A-Z])/g, (match, p1, offset, stri
2021-07-09 17:15:30
1704
1
原创 js正则表达式验证IP地址
/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/支持0.0.0.0到255.255.255.255(没有前导0)菜鸟工具提供的正则表达式:/^((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))$/支持000.000.000.000到255.255.255.255(可以含有前导0)..
2020-09-27 09:42:47
1222
原创 计算元素的位置
元素位置的计算主要是一个相对的概念, 相对于父级元素, 相对于父级定位元素, 相对于body等.所以元素分为了定位元素(position: 不是static)和普通元素(postion: static)滚动元素是普通元素的一种, 由于父级元素框架限制, 而内容溢出导致的首先说一下屏幕, window.screen返回的对象就是你的屏幕信息参数{ availHeight: 834, availLeft: 0, availTop: 0, availWidth:
2020-09-06 09:36:55
791
原创 Vue基础(三)模板语法
插值 1. 文本vue 使用 "{{" 和 "}}" 作为数据绑定的文本插值, 这个也可以修改成你习惯的形式, 比如:<div id="app"> ${message + ' ' + vueStr}</div><script>new Vue({ data: { message: 'Hello', vueStr: 'Vue' }, delimiters: ['${', '}']...
2020-08-28 16:02:34
153
原创 Vue基础(二)实例
Vue实例化是通过 new Vue()实现的, Vue3.0就不是这么干了, 当然这是以后的事.Vue实例化就会将数据遍历通过 Object.defineProperty() 来让属性获取getter和setter, 从而可以监听数据的改变.这个也和 Vue3.0有很大的不同, 因为 Object.defineProperty() 的限制 Vue 不能检测数组和对象的变化. 所以 Vue 做了一些额外的工作.有关 Vue 响应式的一些原理可以在以后参考:https://cn.vuejs.org/..
2020-08-27 09:43:28
170
原创 Vue基础(一)安装
这里主要涉及Vue核心的一些功能, 对 vue 的其他生态插件不作为重点.Vue的学习路线更加简单, 需要html, css及 javascript 作为基础就可以了.对于新手及小型项目来说, 直接引入vue脚本就够了<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>在用 Vue 构建大型应用时推荐使用 NPM 安装, 这里就需要涉及到 Node 的相关知识了# 最新稳定版
2020-08-26 17:11:00
206
原创 js去除字符串中的空白字符
上下文中的空白字符是所有的空白字符(space, tab, no-break space 等) 以及所有行终止符字符（如 LF，CR等）String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');};上面就是官方源码用于兼容旧环境实现的 trim() 方法, 用于去除字符串左右两端的字符串详情见:https://developer.mozi...
2020-07-31 17:26:25
1220
原创 JavaScript原生实现事件监听及手动触发
我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件.jquery实现方法就是trigger('eventType')原生实现:<input type="checkbox" id="chk">document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec
2020-07-30 09:17:43
14596
1
原创 javascript原生获取多选下拉框选中的值
下拉框一般都是单选的, 所以直接通过document.querySelector('select').value就可以知道选中的值了.如果只是想判断是否有选中的话还可以通过document.querySelector('select').selectedIndex, 这个属性是一个数字,表明第一个被选中的值的索引, 所以如果返回为-1说明没有option被选中.如果select添加了multiple属性, 那么可以通过Shift或Ctrl像操作文件一样操作select的选项来多选.获取多选下拉框
2020-07-29 16:01:56
3607
原创 Win10系统打开CMD一片漆黑
不知道怎么回事，我的cmd和vscode产生了一点冲突。在vscode中通过项目打开终端会直接打开cmd，而不是在vscode的终端区域。后来百度一波，发现可以设置cmd，取消勾选使用旧版控制台。这样VScode的终端可以正常打开了。后来，我直接打开cmd，发现页面一片漆黑，啥也没有，但是我用鼠标选中左上角区域的时候可以看到光标，说明是有内容的，只不过无法看到而已。再次百度一波，网上有的人说是因为背景和文字颜色一致导致的。我一看就很有道理，于是设置了上图的颜色页面，分别设置了屏幕文字的颜色和屏幕背景
2020-07-24 16:16:01
864
1
原创 使用bootstrap-datetimepicker遇到的问题
遇到的那些样式的问题: 刚开始我明明用的是bootstrap3.X的,而且是按照官方demo写的,但是还是出现一些奇葩的样式问题,可能和我引入的其它文件产生了冲突,查看源码后96行我找到bootcssVer这个属性,所以如果在初始化时将bootcssVer:3传入,就会按照bootstrap3.X. 传入bootcssVer: 2就会按照bootstrap2.X的样式处理.pickerPosition可以指定四个方向,先上下后左右即(top,bottom和left,right)的组合,不支持默认判断最.
2020-06-19 10:23:12
2416
原创 webpack不是内部或外部命令，也不是可运行的程序或批处理文件
有的时候,我们局部安装webpack后,可以在node_modules下的.bin目录中看到webpack脚本文件.但是在根目录中输入webpack后,报错"webpack不是内部或外部命令，也不是可运行的程序或批处理文件".如果是全局安装webpack当然不会有问题,可以正常执行,如果局部安装就必须先到webpack脚本目录下才能输出正确信息.所以一些人就把node_modules/.bin/webpack脚本文件复制一份到项目根目录,这样在当前根目录下就可以找到webpack了.不过我们
2020-06-15 10:08:41
1613
原创 DataTables初始化配置选项学习
这个是我在学习DataTables时参考官方1.10.20的文档写的一些理解,在这里分享给大家,如果理解有误,欢迎大家在评论区留言.该文档是用yaml文件,所以大家可以用其它支持yaml的编辑器打开查看.如果只需要DataTables核心功能,只要看前600行就好,如果需要官方扩展的可以参考后600行的部分内容.当然有些部分可能是历史版本的参数,这里并没有记录%YAML 1.2 # ...
2020-04-19 12:15:51
1839
原创 原生实现滑动条效果
实现效果类似如上：html:<input type="range" min="0" max="1" value="0.1" step="0.01" id="range"><span class="val" style="width: 20px;height: 20px;display: block;margin: 20px;"></span>...
2020-03-31 09:23:26
333
原创 实现简单的进度条效果
封装一个简单的jquery插件，实现简单的可滚动进度条。可能一些情况没有考虑到，仅供参考。(function ($) { $.fn.sliderProgress = function (options, actions) { var defaults = { width: 200, // 这是宽度 height: 10,...
2020-03-24 15:14:40
255
原创 jquery简单实现无缝可滑动轮播图
话不多说，直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
2020-03-20 09:34:13
441
Vue中的父组件在不使用render函数的情况下怎么渲染子组件的插槽内容
2022-12-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人