- 博客(268)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue cli 4 添加、移除typescript
移除 .eslintrc.js extends 里的 '@vue/typescript/recommended'步骤一：移除npm依赖。将所有ts文件改为js。
2022-11-03 11:35:01
624
转载 前端实现 Excel 导入和导出功能
以上只是实现了简单的单个导入、导出功能，可以将其完善为批量操作，但是要注意批量操作带来的耗时性，将对应的耗时部分通过 webworker等方式处理，这样页面就不需要一直等待当前的操作完成。另外，如果有要求在导出 Excel时有表格样式（如：行列宽高设置等）可以通过来实现。给我实现一个前端的 Excel 导入和导出功能 - 掘金。
2022-10-19 00:30:55
895
转载 browser-sync（监测文件修改，自动刷新浏览器）
在当前需要调试目录下，打开命令行窗口，输入命令：，这样就会根据当前目录启动一个小的服务器，这个目录下的所有文件只要修改，访问的地址就会自动刷新。需要到监测的文件夹下。
2022-10-08 11:17:25
718
原创 单例 Promise 和 Promise 缓存
单例 Promise 就是只会有一个 Promise，接口也就只会请求一次。这里，我们将 Promise 放入缓存中，然后将其返回给调用方。最终，获取用户信息接口只会调用一次。最后的效果：连续点击按钮，但最终只会调用一次获取用户信息的接口。
2022-09-07 00:02:51
129
原创 standard-version（发版与 Changelog 自动化）
我们就可以使用 standard-version 进行版本管理自动化，包括更新 CHANGELOG.md，以及使用 。它也会自动修改 package.json 里的 version。在使用 之前，需要遵循 Conventional Commit Specifications 来进行标准化的 commit message 编写。这是因为 是基于 commit 类型来更新版本号的（feature 会更新 minor, bug fix 会更新 patch, BREAKING CHANGES 会更新 major
2022-07-14 00:00:00
1683
转载 commitizen ~ git 提交信息标准化
1. 安装2. 设置 changelog adapter：3. 在 package.json，中增加如下脚本：首先我们 文件，然后 ，此时 commitizen 会通过 CLI 对我们进行询问：选择提交类型后，会需要我们填写详细信息： 总结：概括起来就是：本来我们用 git commit -m "xxx" 这一条指令就能提交完成的提交操作改成用终端提示什么我们填什么进行提交信息规范化。...
2022-07-13 22:56:41
170
转载 浏览器的5种观察器
该观察器自动"观察"目标元素与根元素交叉区域的变化。默认根元素为文档视口，此时交叉区域的变化决定了用户在当前视口能否看到目标元素，因此它经常被用于“元素可见性”观察。比如：图片懒加载、无限滚动、广告曝光量统计等。兼容性：IE不支持1. 创建观察器实例2. 定义观察到目标元素与根元素交叉区域变化时的回调函数 callback(entries, observer)。entries数组中,每个成员都是一个IntersectionObserverEntry对象,如果同时有两个被观察的对象的可见性发生变化，en
2022-06-21 23:32:42
162
原创 如何监听DOM元素尺寸的变化？
window 有 resize 事件，我们可以联想到 iframe 也有 resize 事件。我们在要监听尺寸变化的 DOM 元素内添加一个 iframe，iframe 设置 width、height 都为 100%，并绑定 resize 事件就可以监听了。
2022-06-20 23:14:33
622
转载 .gitignore 语法
除了 .gitignore 以外，很多工具都有 ignore 文件，比如 .eslintignore, .prettierignore 等等。它们的语法都是跟 .gitignore 一样的。现在我们来看一下 .gitignore 的一些基础语法。转载自：ESlint Prettier Git 中使用 ignore忽略文件的规则解释_胡聊前端的博客-CSDN博客_prettier忽略文件......
2022-06-07 23:11:53
253
1
原创 node内存溢出：JavaScript heap out of memory
今天在给项目 build 的时候，出现了以下报错：这是 node 内存溢出的报错。我们知道 node.js 是基于 V8 引擎，V8 引擎有内存限制。在《深入浅出nodejs》书中说明，默认内存限制，64位系统约为1.4GB，32位系统约为0.7GB。如何解决这个问题呢？那就是扩大内存。node --max-old-space-size=1700 test.js // 单位为MB// 或者node --max-new-space-size=1024 test.js // 单位为KB
2022-05-30 22:43:25
430
转载 GitHub Actions 是什么？
一、GitHub Actions 是什么？大家知道，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。GitHub 把这些操作就称为actions。很多操作在不同项目里面是类似的，完全可以共享。GitHub注意到了这一点，想出了一个很妙的点子，允许开发者把每个操作写成独立的脚本文件，存放到代码仓库，使得其他开发者可以引用。如果你需要某个action，不必自己写复杂的脚本，直接引用他人写好的action即可，整个持续集成过程，就变成了一个action...
2022-05-23 23:08:43
321
原创 vue-lazyload — 懒加载图片和组件
仅支持 Vue2，不支持 Vue3安装依赖包npm i vue-lazyload -S在 main.js 使用插件import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload, { preLoad: 1.3, // 预加载高度的比例 error: require('./assets/error.gif'), loading: require('./assets/loading.gif'), attempt: .
2022-05-03 13:16:29
237
原创 js【剪切、复制、粘贴】功能实现
针对现代浏览器实现（Navigator.clipboard）Navigator.clipboardAPI可以用来访问系统剪贴板，可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式，不兼容 IE。使用 Navigator.clipboardAPI时会弹出用户授权弹窗。如果用户没有授予权限，则不允许读取或更改剪贴板内容。let clipBoard = navigator.clipboard;// 写入文本至操作系..
2022-03-21 00:22:21
1584
原创 什么是 Vite？
一、什么是 ViteVite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。二、Vite 和 Webpack 区别Vite 优势：vite 开发服务器启动速度比 webpack 快 webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。 vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时
2022-03-06 22:01:04
9443
1
原创 微前端笔记
如上图就是采用single-spa实现微前端的整体流程：资源模块加载器：用来加载子项目初始化资源。我们将子项目的入口js构建成umd格式，然后使用模块加载器远程加载，通常会使用SystemJs（不是必须）通用模块加载器来进行加载。子应用资源配置表：用来记录各个子应用的入口资源url信息，以便在切换不同子应用时使用模块加载器去远程加载。因为每次子应用更新后入口资源的hash通常会变化，所以需要服务端定时去更新该配置表，以便框架能及时加载子应用最新的资源。注意：single-spa本身是不支....
2022-03-03 22:45:11
227
转载 什么是微前端
一、什么是微前端？微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。二、特性技术栈无关主框架不限制接入应用的技术栈，子应用可自主选择技术栈 独立开...
2022-03-01 22:08:27
14956
1
转载 Vue响应式原理的核心 - Observer、Dep、Watcher
Object.definePropertyVue的响应式原理最底层是通过 Object.defineProperty 的 get 和 set 实现的。function defineReactive (obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: () => { consol
2022-02-27 18:00:34
219
转载 Configure your bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js“
我们在用 Vue 脚手架，比如 vue-cli 或者 Vite 创建的项目里使用如下普通对象创建组件的时候const Profile = { template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' }
2022-01-30 17:12:22
1896
2
原创 使用＜script setup＞报错： ‘defineProps‘ is not defined
解决方法1：在 .eslintrc.js 的 env 增加配置 env: { 'vue/setup-compiler-macros': true // 新增的配置 }刚配置完重新启动开发服务的时候可能会报错：Environment key "vue/setup-compiler-macros" is unknown再重新编译了一下错误就消失了。解决方法2：在 .eslintrc.js 增加 globals 配置 globals: { definePro
2022-01-25 12:35:18
2615
原创 解决m1芯片Mac安装node失败问题
终端报错：<--- Last few GCs --->[57807:0x128008000] 54 ms: Scavenge 11.1 (14.0) -> 10.5 (14.8) MB, 0.4 / 0.0 ms (average mu = 1.000, current mu = 1.000) allocation failure[57807:0x128008000] 58 ms: Scavenge 11.7 (15.0) -> 11.1 (15
2022-01-16 10:55:18
1837
原创 解决 axios 跨域 Request Method: OPTIONS问题(预检请求)
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求如下图为什么会出现这种原因呢？这是因为CORS跨域分为 简单跨域请求和复杂跨域请求；简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。1.简单跨域满足的条件1.请求方式是以下三种之一：HEADGETPOST2.HTTP的头信息不超出以下几种字段AcceptAccept-Language
2022-01-06 23:07:24
4229
原创 css样式中的百分比都是相对于谁的？
1. 绝对定位的 top、leftposition: absolute;top: 50%;left: 50%;top 和 left 的百分比是分别根据它相对的祖先元素的高度和宽度来计算的。2. 固定定位的 top、leftposition: fixed;top: 50%;left: 50%;top 和 left 的百分比是分别根据浏览器视口的高度和宽度来计算的。3. translateYtransform: translateY(-50%);translateY
2022-01-04 23:51:07
1835
转载 高性能渲染十万条数据(时间分片)
原文：「前端进阶」高性能渲染十万条数据(时间分片) - 掘金原理：就是把本来要一次性渲染10万条数据的任务分成，n个每次渲染10条或者20条的小任务。优点：可以提高列表可视区首屏的渲染速度 减少页面开始加载到能响应用户操作之间的时间...
2022-01-04 00:09:39
240
转载 高性能渲染十万条数据(虚拟列表)
高性能渲染十万条数据(虚拟列表)对文章的几点补充：1. 计算 this.startOffset 时，为什么要减去“scrollTop % this.itemSize”？scrollEvent() { //当前滚动位置 let scrollTop = this.$refs.list.scrollTop; //此时的开始索引 this.start = Math.floor(scrollTop / this.itemSize); //此时的结束索引 this.end = t.
2021-12-26 22:58:58
134
转载 vue 解决seo优化之预渲染prerender-spa-plugin
最全、最详细的解释请看prerender-spa-plugin 插件 Github解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。预渲染流程预渲染原理在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（谷歌官方的 headless 无头浏览器）访问.
2021-12-26 11:09:57
1025
原创 Vue 点击按钮显示弹窗的几种不同组件封装
封装一：只把弹窗封装成一个单独的组件1. 弹窗组件 my-dialog.vue<template> <el-dialog title="选择水果" :visible.sync="dialogVisible" width="30%" @close="handleClose" > <el-checkbox-group v-model="checkList"> <el-checkbox
2021-12-12 21:48:34
3805
原创 深入浅出 Linux
一、Linux 内核 Linux 是一套开源的类 Unix 操作系统，是一个基于Posix和Unix的多用户、多任务、支持多线程和多CPU的，用C语言写成的操作系统。目前成型的系统有如下：手机：Android、ios（只能算半个） 电脑：linux、ubuntu、MAC等二、Linux 目录结构1. /root 超级用户目录2. /sbin/sbin 超级用户（root权限）可以使用的命令的存放目录。存放大多涉及系统管理的命令（例如引导系统的init程序）。...
2021-12-04 22:56:34
123
原创 inquirer 用户与命令行交互工具
Weekly Downloads: 20,787,079一、安装npm i -S inquirer二、所有 type 使用示例var inquirer = require('inquirer');const questions = [ { type: 'confirm', name: 'order', message: '您好，需要点餐吗?', default: true, }, { type: 'number', na.
2021-11-28 18:12:47
1217
原创 Element UI 组件库分析和二次开发（二）
一、 Makefile 文件Make是最常用的构建工具，它的规则配置一般写在 Makefile 文件里。make 的使用有点像 package.json 里的 scripts，把一段长命令用一段短命令来执行。Makefile文件由一系列规则（rules）构成。每条规则的形式如下。<target> : <prerequisites> [tab] <commands>上面第一行冒号前面的部分，叫做"目标"（target），冒号后面的部分叫做"前置条件
2021-11-21 23:09:24
820
原创 Make 命令教程
Make 命令教程补充：1. make 命令时报错：Makefile:5: *** missing separator. Stop.原因：Makefile 文件命令前没有 tab，或者 tab 的格式不对。我用的是 VSCode 编辑的 Makefile 文件，可能是编辑器的 tab 跟 make 解析Makefile 时的 tab 不一致。用 vim 编辑Makefile 文件就好了。...
2021-11-21 11:08:24
278
原创 node安装依赖包时 node-pre-gyp 报错解决办法
报错信息：gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2gyp ERR! stack at ChildProcess.onExit (/Users/node_modules/node-gyp/lib/build.js:194:23)gyp ERR! stack at ChildProcess.emit (events.js:315:20)gyp ERR! stack .
2021-11-13 17:57:30
13305
原创 Element UI 组件库分析和二次开发（一）
一、Element UI 组件库二次开发的大致流程1. 从 Element 官方 clone 一份dev 源码到本地2.安装依赖：npm i3.修改组件源码组件内容在 “packages/组件目录” 里修改。组件样式在 “packages/theme-chalk/src/组件名.scss” 里修改。查看效果可以在 “examples/docs/zh-CN/组件名.md” 里增加自己需要调试的代码，就可以在页面的相应的组件的例子中看到自己修改后的效果。4.如果要上传到 n.....
2021-11-08 09:41:53
3614
原创 vue-create-api
一、介绍vue-create-api是一个能够让 Vue 组件通过 API 方式调用的插件。经常在弹出框上使用。组件必须定义 name 属性，例如，this.$createHello 里的 hello 就是组件名 调用 $create 方法时，组件会被添加到 body 调用 $create 方法返回值是Vue组件实例，可以用返回值的 remove() 方法去销毁组件和删除添加到 body 下DOM元素二、安装npm i -S vue-create-api三、使用..
2021-10-15 00:04:21
835
3
原创 sortablejs — 强大的拖拽库
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。一、sortablejs 最基本的示例<div id="itxst"> <div data-id="a">item 1</div> <
2021-09-29 00:10:34
10694
2
原创 yarn - 包管理工具
一、简介Yarn 是一款快速、可靠、安全的包管理器，跟 npm 功能类似，但是是为了弥补 npm 的一些缺陷而出现的。yarn 也是从 npm 安装软件包并保持相同的包管理流程。1、yarn 对比npm 的优势1. 缓存下载过的包Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。npm同一个包每次安装都要重新下载。2. 并行下载yarn 同时利用并行下载以最大化资源利用率，因此安装速度更快。npm 是按照队列执行每个 package，也就是说必须要等到当前 package.
2021-09-25 15:28:04
636
原创 nvm ~ node版本管理工具
一、安装 nvm1. 卸载之前安装的 node安装 nvm 前，要把之前安装的 node 卸载干净，详细卸载步骤，请移步这里。2. 安装 nvm这里要注意，官方明确说明用 homebrew 安装是不支持的，那我们就不用 brew 安装，就安装官方介绍的安装。1. 检查主目录下有没有 .bash_profile或 .zshrc 文件bash 终端开发者检查有没有 ~/.bash_profile 文件，zsh 终端开发者检查有没有 ~/.zshrc 文件。cd ~/ls...
2021-09-12 21:39:50
438
原创 Mac彻底卸载node
一、卸载从node官网下载pkg安装的nodesudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}二、卸载用 homebrew 安装的nodebrew uninstall node三、如果你感觉删的不够干净，可以再细分删除1. 删除 npm 相关内容sudo npm uninstall npm -gsudo rm -rf ~/.npm2. 删除/u.
2021-09-12 11:18:16
18138
6
转载 Vue.js CLI4 Vue.config.js标准配置 （最全注释）
前言：Vue.js CLI工具 不知不觉发展到了4.0时代，CLI给人最直白的感受是没有了build文件夹跟config文件夹，所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。有三种方式，推荐第二种标准版（无需安装依赖，直接复制即可配置）。1、依赖库npm install vue-cli-configjs2、标准版// vue.config.jsconst path = require('path');const
2021-09-11 15:43:34
555
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人