- 博客(138)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vuejs 3.x项目使用terser-webpack-plugin 去除console 没有生效
【代码】vuejs 3.x项目使用terser-webpack-plugin 去除console 没有生效。
2023-12-14 18:52:58
435
原创 chakra-ui useForm 数组动态遍历FormControl组件 表单验证 TS react nextjs
【代码】chakra-ui useForm 数组动态遍历FormControl组件 表单验证 TS react nextjs。
2023-11-11 11:35:20
162
原创 webpack与vite区别
总体来说,Vite在开发体验上更加快速和顺滑,webpack提供了更完整的功能和生态,两者都有各自的使用场景。webpack采用“打包”的方式构建,需要将所有模块打包成几个大的bundle文件,构建速度较慢。assistant: 在Vite中,可以通过配置vite.config.js文件来实现代理功能。在开发环境下,代理是一个非常有用的功能,可以避免跨域问题。Vite采用了“按需编译”的方式,只在浏览器请求时才编译对应模块,启动速度更快。Vite HMR采用细粒度更新,只更新修改的模块,HMR速度更快。
2023-08-06 19:53:49
611
原创 vite4 + vue3 + pinia + axios + vue-router + elementPlus
创建项目后node_modules 有但是就是找不到使用pnpm i 重新加载依赖就可以了关键是其他电脑上没有这个问题…(可能是我本机配置有问题)
2023-04-14 18:11:49
1206
原创 vue中动态跟新 favicon.ico；＜link rel=“icon“ href=“＜%= BASE_URL %＞favicon.ico“＞
因为第一次加载成功后就会有缓存（再vue项目，请各位大神解惑为啥）相同域名首次加载成功后，会被缓存无法更改，首次加载不成功可以有效。updateFavicon 内容。其次再router守卫 处理。不href控制会被缓存。
2023-01-31 20:00:59
2455
原创 vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
【代码】vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
2023-01-17 13:34:11
392
原创 正则实用列表2023
验证多行xyz坐标 尾部可以没有\n 每行开头可以有除去\n 以外的空白字符。验证有多少个xyz坐标的原子。验证0-0.7之间的数字。验证0-1之间的数字。
2023-01-04 10:31:14
128
原创 CSS linear-gradient 实现背景双色或多色，颜色渐变，颜色分明
参考连接：https://blog.csdn.net/qq_41860203/article/details/111559665。/* 背景色45度倾斜 *//* 由深蓝渐变为白色 *//* 上下两色分明 *//* 左右两色分明 */
2022-12-16 14:02:24
1181
原创 webpack运行原理；构建工具的定义；webpack的定义；编写webpack loader； 编写webpack plugin；
构建工具的定义构建就是做这件事情，把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。自动刷新：监听本地源代码的变化，自动重
2022-04-07 18:43:08
398
原创 tapable 中文文档
Tapabletapable 公开了许多Hook类，可以用来为插件创建钩子实例。const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook, AsyncParallelHook, AsyncParallelBailHook, AsyncSeriesHook, AsyncSeriesBailHook, AsyncSeriesWaterfallHook } = require("tapable");安装npm in
2022-04-07 17:04:44
663
原创 JS的继承 ES5；javascript的继承；
基础概念说继承之前简单介绍一下，几个概念，有助于更深刻的理解继承。能用口述或者文字的形式，说一下什么是函数吗？按照犀牛书的说法，函数简单的说就是重复执行的代码块。函数是这样的一段JavaScript 代码，它只定义一次，但可能被执行或调用任意次。//使用方式//1.直接声明function(){}//2.函数表达式let fun = function(){}//3. new Function()var fun1 = new Function (arg1 , arg2 ,arg3 ,…
2022-01-29 16:30:22
1047
原创 js关闭浏览器页签
兼容性js实现function closeWebPage(){ if (navigator.userAgent.indexOf("MSIE") > 0) { if (navigator.userAgent.indexOf("MSIE 6.0") > 0) { window.opener = null; window.close(); }else { window.open('', '_top'); window.top.c
2021-12-22 19:11:45
1217
原创 主动取消请求的多种情况，原生Ajax、Jquery、axios、fetch
原生Ajax对于原生XHR对象来说，取消的ajax的关键是调用XHR对象的.abort()方法 var xhr = new XMLHttpRequest(); xhr.open("GET","https://api.github.com/"); xhr.send(); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ c
2021-12-02 19:46:22
543
原创 Object.defineProperty & Proxy
object.definePropertyObject.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。官网地址使用：let arr = [1,2,3]let obj = { arr,}Object.defineProperty(obj, 'arr', { get () { console.log('get arr') return arr }, set (newVal) { console.
2021-12-02 19:46:06
519
原创 javascript 结束 forEach
使用抛出异常来跳出foreach循环let arr = [0, 1, "stop", 3, 4];try { arr.forEach(element => { if (element === "stop") { throw new Error("forEachBreak"); } console.log(element); // 输出 0 1 后面不输出 });} catch (e) { consol
2021-12-02 19:45:44
1314
原创 nuxt设置全局loading
创建js文件elLoading.jsimport { Loading as ElLoading } from 'element-ui'class LoadingConf { constructor(){ this.loading = null this.loadingCounter = -1 } showLoading(config) { if (config) { // config.loading 自定义 变量 通接口中传过来，用于控制那些接口需要load
2021-12-01 19:57:27
1934
原创 必须有数字和字母组合的密码正则表达式
由数字和字母组成，并且要同时含有数字和字母，且长度要在8-16位之间。^(?![0-9]+)(?![a−zA−Z]+)(?![a-zA-Z]+)(?![a−zA−Z]+)[0-9A-Za-z]{8,16}$分开来注释一下：^ 匹配一行的开头位置(?![0-9]+)预测该位置后面不全是数字(?![a−zA−Z]+) 预测该位置后面不全是数字(?![a-zA-Z]+)预测该位置后面不全是数字(?![a−zA−Z]+) 预测该位置后面不全是字母[0-9A-Za-z] {8,16} 由8-16位数字或这
2021-11-29 13:51:28
1297
原创 css实现圆环进度条
vue组件<template> <div class='container'> <div class="left"> <div class="leftcircle"></div> </div> <div class="right"> <div class="rightcircle"></div> </d
2021-11-22 14:27:35
1239
原创 axios 上传二进制
import axios from 'axios'const http = axios.create()const BASE_URL = process.env.BASE_URLconst newUpload = (url, data) => { if(data && Object.keys(data).length > 0){ let formData = new FormData(); for(let key in data){
2021-11-17 21:00:50
1366
原创 NUXT使用笔记
问题：怎么在js中使用 vuex vue-router解答： 在js中直接使用 $nuxt 调用window.$nuxt /* $nuxt 是挂在 window上的 window.$nuxt */ $nuxt.$router $nuxt.$route // 对当前router // 跳转页面的时候使用 name为key 不能使用 path 会报错 $nuxt.$router.replace({ 'name': '/name'}) // vuex 同理 $nuxt.$store..
2021-11-08 18:20:58
213
原创 nuxt.js的 XX is not defined
主要原因是因为 nuxt 不兼容的问题需要在用之前在组件这样判断参考文章：https://www.nuxtjs.cn/faq/window-document-undefinedhttps://blog.csdn.net/qq_37124515/article/details/106467640https://www.cnblogs.com/yifeng555/p/9955644.html...
2021-11-01 20:15:50
733
原创 颜色透明度16进制对照表
100% — FF99% — FC98% — FA97% — F796% — F595% — F294% — F093% — ED92% — EB91% — E890% — E689% — E388% — E087% — DE86% — DB85% — D984% — D683% — D482% — D181% — CF80% — CC79% — C978% — C777% — C476% — C275% — BF74% — BD73% — BA72%
2021-08-13 19:23:20
202
原创 nuxt.js 在开发环境使用 mock
安装npm install mockjs -D新建mock文件夹目录结构如下plugins/mock/index.jsimport management from './constant/app'console.log(process.env.NODE_ENV,'process.env.NODE_ENV'); // developmentif(process.env.NODE_ENV === 'development'){ const Mock = require('mockjs')
2021-08-07 20:57:02
1130
原创 nginx 常用命令
查看进程列表ps -ef | grep nginx1、启动nginx命令sudo nginx2、重启nginx命令sudo nginx -s reload3、优雅的停止nginx（具体区别没测试）sudo nginx -s quit4、快速停止nginxsudo nginx -s stop
2021-07-29 16:02:31
92
原创 mac 上传文件和解压文件
直接使用macos自带的终端上传文件Linux常用命令: zip、unzip 压缩和解压缩命令 - zjcao - 博客园
2021-07-27 15:59:29
392
原创 js html table转excel文件&& js获取(复制 / 粘贴板)的内容&&js复制table粘贴到excel中
前端转excel参考资料：https://blog.csdn.net/z591102/article/details/107632099[](https://blog.csdn.net/weixin_34116110/article/details/88953293[](https://blog.csdn.net/qq_42788117/article/details/111628383[](https://segmentfault.com/a/1190000018993619[](http:/
2021-07-06 17:34:15
1359
原创 实现一个简单的Promise
function promiseTest () { this.status = 'pending' // 2.1 this.msg = '' // 存储value与reason 成功或者失败的返回值 let process = arguments[0], that = this process (function () { that.status = 'resolve' that.msg = arguments[0] }, function () { that
2021-06-27 17:51:21
90
原创 宏任务和微任务都有哪些？
宏任务：#浏览器nodeI/O✅✅setTimeout✅✅setInterval✅✅setImmediate❌✅requestAnimationFrame✅❌script标签✅❌微任务：#浏览器nodeprocess.nextTick❌✅MutationObserver✅❌Promise.then catch finally✅✅async await✅✅什么是r
2021-06-24 16:33:25
683
原创 算法题学习和积累
斐波那契数组 算法题最优解function df (num) { if(num === 0) { return 0} if(num === 1 || num === 2) { return 1} let f = 0; let s = 1; for(let i = 4; i <=num; i += 2){ f = f + s; s = f + s; } if(num % 2 > 0){ f = f + s; } return f +
2021-06-10 23:39:11
172
原创 2021笔记-遇到的问题
1、删除原有的package-lock.json文件 给node-sass 版本号头部加上 ^ 表示兼容大版本 例如： ^4.10.1 ,兼容 4.10.1以上的版本到，4.x.x，不会兼容到 5.x.x；2、新增 package-lock.json：npm i --registry=https://registry.npm.taobao.org。快速停止或关闭Nginx：nginx -s stop。查看Nginx的详细的版本号：nginx -V。查看Nginx的简洁版本号：nginx -v。.
2021-05-31 17:01:32
136
原创 vue2 按需引入 vuex 模块
目录store/index.tsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// 使用 require.context 动态引入 vuex modulesconst modulesFiles = require.context('./common', true, /\.ts$/)const modules = modulesFiles.keys().reduce((module: any, modulePath) =&
2021-05-11 14:18:23
741
原创 vue2 + vant + typescript（TS）使用 postcss-to-px-viewport
module.exports = { ...... // css 相关配置 css: { // 为预处理器的 loader 传递自定义的选项。 loaderOptions: { postcss: { // 传递给 postcss-loader的自定义选项 plugins: [ require('postcss-px-to-viewport')({ unitToConvert: 'px', //需
2021-04-28 16:24:22
792
原创 vue2前端工程化动态引入文件(require.context) vue全局注册组件 vue router 模块化 vuex
require.context主要使用require.context实现前端工程化动态引入文件require.context(directory, useSubdirectories = false, regExp = /^.//)require.context 参数目标文件夹是否查找子集 true | false正则匹配比如：require.context('./router',true,/\.routes\.js/)可以理解为获取router文件下以.routes.js结尾的文
2021-04-27 16:08:20
1532
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人