- 博客(51)
- 收藏
- 关注
原创 关于macOS系统M1芯片安装node-sass报错的解决方案
通过arch -x86_64 zsh 让shell运行在Rosetta2下 安装的npm包会经过Rosetta2转译
2023-02-07 15:32:03
3889
原创 配置nginx清除客服端缓存
缓存策略:no-store表示不允许缓存,no-cache表示不允许缓存,must-revalidate表示必须重新验证,max-age=0表示缓存过期时间为0;过期时间:-1表示立即过期。
2023-02-06 15:21:35
1945
原创 macOS 的bash与zsh终端
二者均是shell的一种,zsh能基本完美兼容bash的命令,并且使用起来更加优雅。是一个对zsh命令行环境的配置包装框架,但它不提供命令行窗口,更不是一个独立的application。当从bash切换为zsh时,如果不想重新配置一遍.zshrc文件,可以在.zshrc文件中加上source ~/.bash_profile,从而直接从.bash_profile文件读取配置。如果通过homebrew安装的nvm,可使用以下指令配置nvm环境变量。可以通过直接打开.bash_profile文件的方式修改配置,
2023-02-06 15:12:44
5942
原创 vue常用loader扩展
loader扩展:svg图标 (svg-sprite-loader)icon雪碧图 (webpack-spritesmith)移动自适应布局(flexible) px单位转rem (postcss-px2rem)公共sass文件引入 (sass-resources-loader)
2022-04-15 10:50:14
619
原创 cdn方式优化vue项目首页加载慢问题
以cdn方式引入htmlWebpackPlugin中排除的插件包index.html 核心代码: <% if (process.env.NODE_ENV === 'production') { %> <% if (htmlWebpackPlugin.options.cdn.css) { %> <% for(var css of htmlWebpackPlugin.options.cdn.css) { %> <link hre
2022-04-15 10:46:49
822
原创 vue/cli@3.x项目pwa处理
前言什么是pwa?Progressive Web Apps,渐进式 Web 应用pwa是我们在追求webapp便捷和原生应用良好体验结合的过程中的产物,目前兼容性是最大障碍底层使用的是workBox (service worker的一个框架),封装了各种api和缓存策略,vue-cli3.0集成的是workbox-webpack-plagin,我们可以通过vue.config.js的pwa配置项进行配置pwa 特征?具有可离线、添加到桌面(一级入口)、后台同步、服务端推送等特征使
2021-09-30 18:05:18
1570
3
原创 vue2.x 项目 webpack升级vite避坑总结
前言目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大,导致项目在本地编译时热更新很慢,页面更新需要10几秒以上。为提高团体开发速度和效率,最近打算把底部打包构建的环境由webpack迁移为vite。为什么 Vite 启动这么快底层实现上, Vite 是基于 esbuild 预构建依赖的esbuild 使用 go 编写,并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了,js 的一般操作都是毫秒计,go 则是纳秒
2021-09-26 17:05:22
6197
7
原创 批量引入svg方案
1. webpack批量导出核心代码:import Vue from 'vue'import SvgIcon from '@/components/SvgIcon'// svg component// register globallyVue.component('svg-icon', SvgIcon)// 通过node的require批量导出const req = require.context('./svg', false, /\.svg$/)const requireAll = r
2021-09-23 10:08:09
688
原创 vite学习记录
Vite 官方中文文档rollup.js 中文文档vite解决服务器启动缓慢问题:当冷启动开发服务器时,基于打包器的方式启动必须优先抓取并构建你的整个应用,然后才能提供服务。Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类,改进了开发服务器启动时间。依赖 大多为在开发时不会变动的纯JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式(例如 ESM 或者CommonJS)。Vite 将会使用 esbuild 预构建依
2021-09-18 16:20:18
133
原创 CommonJS 和 ES Module 区别
CommonJsCommonJs中 require可以动态加载语句,代码发生在运行时CommonJs混合导出,还是一种语法,只不过不用声明前面对象而已,当我导出引用对象时之前的导出就被覆盖了CommonJs导出值是浅拷贝,可以修改导出的值,这在代码出错时,不好排查引起变量污染Es ModuleEs Module是静态的,import 不可以动态加载语句,只能声明在该文件的最顶部,代码发生在编译时Es Module混合导出,单个导出,默认导出,完全互不影响Es Module导出是引用值(存在映射
2021-09-18 15:17:19
163
原创 Pinia学习记录
Pinia官方文档1. Pinia 特点简介:Pinia 适用于 Vue 2 和 Vue 3使用Composition API设计适用于 Vue 的 Store,类似于vue的vuex状态管理库;也类似于React 的Recoil,但没有那么多的概念和 API,主体非常精简,极易上手(Recoil 是 Facebook 官方出品的用于 React 状态管理库,使用 React Hooks 管理状态)服务器端渲染支持2. 基础使用:创建store:// stores/counter.js
2021-09-16 14:07:07
273
原创 babel学习记录
一、babel相关文件说明babel.config.js 与 .babelrc 区别:全局配置 (babel.config.js) 和局部配置 (.babelrc)babel与polyfill 区别:babel只转换语法, 比如 像箭头函数,babel是能处理成 function这种但是像Array.from promise 这些 新的原生api方法,是需要引入polyfillcore-js@2 与core-js@3区别:core-js 2 封版于 1.5 年之前,所以里面
2021-08-20 16:53:10
279
原创 vue3.2版本新特性
Vue 3.2 版本包括许多重要的新功能和性能改进,但并不包含重大更改。Vue 3.2 原文链接主要更新如下:1. 新的单文件组件功能<script setup> 是一种编译时语法糖,可在 SFC 内使用 Composition API 时极大地提升工作效率。<style> v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。<style>起初 vue3.0 暴露变量必须 return 出来,template中才能使用<script
2021-08-16 17:27:02
12642
4
原创 vue2 扩展雪碧图
1. 相关依赖“webpack-spritesmith”: “^1.1.0”, // 雪碧图“sass-loader”: “^6.0.7”,“sass-resources-loader”: “^2.0.3”, // 公共样式全局加载2. webpack.base.conf配置1). webpack.base.conf文件添加:const SpritesPlugin = require('webpack-spritesmith'); plugins: [ //雪碧图 ne
2021-08-05 15:10:28
419
转载 window的IntersectionObserver特性使用
前言翻vant源码,看到有使用IntersectionObserver属性,才疏学浅的我居然不知道是啥玩意,百度一番,确实是个好东西!IntersectionObserver主要用于元素可见性的监听,比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新,存在兼容性问题,好在已经有了兼容的polyfill.其基本介绍和使用方式都可以在该polyfill对应网站上看到。使用场景1.图片懒加载监听scroll方式(旧):window.addEventLis
2021-08-03 14:52:40
689
转载 vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题
vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题一、思路解决移动端适配问题的根本思路在于将px转换成rem⑴ 使用postcss-px2rem-exclude可以将项目中的px自动转换成rem⑵ 而amfe-flexible则可以根据不同型号的手机,进行相应的HTML根节点(font-szie)的初始化。二、步骤安装 postcss-px2rem-exclude、amfe-flexiblecnpm install postcss-px2re
2021-07-28 10:25:53
605
原创 关于遮罩面板出现滚动条的处理
遮罩面板打开时: // 固定body fixedBody() { const scrollTop = document.body.scrollTop || document.documentElement.scrollTop; this.prevBodyCss = document.body.style.cssText; document.body.style.cssText += "position:fixed;width:1
2020-12-16 15:30:17
198
原创 日常代码学习记录
实现 Promise.retry,成功后 resolve 结果,失败后重试,尝试超过一定次数才真正的 reject Promise.retry = function(fn, num){ return new Promise(function(resolve, reject){ while(num>0){ try{ const res = await fn resolve(res).
2020-11-27 14:21:59
119
原创 vue-hooks的理解与使用
vue的hooks和mixins功能相似,但又比mixins具有以下几个优势:允许hooks间相互传递值组件之间重用状态逻辑明确指出逻辑来自哪里demo源码示意:hook1:import { useData, useMounted } from 'vue-hooks'; export function windowwidth() { const data = useData({ width: 0 }) useMounted(() => { data.
2020-09-23 15:42:23
6823
原创 vue3学习整理
Option API 与 Composition APIvue 2.x 使用的是Option API 构建组件。一个组件的功能需要通过methods,computed,watch,data等属性和方法,共同处理页面逻辑。存在多个业务功能共同使用一个实例化new vue()这种构建方式在业务逻辑复杂的大项目中,API比较分散,可能会存在分不清哪个方法对应哪个功能。项目的易读性、可复用性相对较差,耦合性较高。vue 3.x 使用的是Composition API 构建组件。代码是根据逻辑功能来.
2020-09-22 16:20:31
1398
转载 vue3与vue2 的v-model差别
v-model 指令在 vue 2.x 和 vue 3.0 存在一些差别:2.x 中 v-model 语法糖底层使用的是 :value 和 emit(‘input’), 绑定属性值是 value3.0 中可以绑定一个自定义值,支持统一组件绑定多个 v-model,v-model:firstName=“firstName”, :value=“firstName” 和 @input="$emit(‘update:firstName’, $event.target.value)"添加自定义修饰符 v-mo
2020-09-22 13:47:21
1924
原创 学习vue-element-admin引入svg图标
1.扩展svg-sprite-loader加载器安装依赖:npm install svg-sprite-loader在webpack.base.conf配置文件mudule.rules中加入扩展svg-sprite-loader加载器 { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/assets/icons')], options: { symbolId:'ic
2020-09-18 15:42:23
2893
原创 js常用工具库
LodashLodash是一个一致性、模块化、高性能的 JavaScript 实用工具库Lodash 中文文档Lodash 官网path-to-regexppath-to-regexp只要用于url 字符串的正则匹配,包含parse、exec、compile等方法path-to-regexp使用说明momentMoment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期moment.js中文网...
2020-09-15 17:40:49
1952
原创 react学习记录
1. Component和PureComponent的区别?PureComponent自带通过props和state的浅对比来实现 shouldComponentUpate(),而Component没有。但如果包含比较复杂的数据结构,可能会因深层的数据不一致而产生错误的否定判断,导致界面得不到更新。因为js使用的是引用赋值,新的对象简单引用了原始对象,改变新对象虽然影响了原始对象,但对象的地址还是一样,使用===比较的方式相等。而在PureComponent中,会被判定prop相等而不触发render
2020-09-15 15:18:29
71
转载 Fiddler手机http请求抓包
原文地址:Fiddler - 拦截手机请求1. 在电脑上安装Fillder2. 浏览器访问http://127.0.0.1:8888/fiddler,下载证书并安装3. 打开抓取https请求,打开抓取远程请求【Tools】->【options】->【https】【Tools】->【options】->【connections】4. 设置手机端先把电脑上的防火墙关掉手机打开【设置】–>【WLAN】–>连上当前的wifi网络–>点击网络详情–&g
2020-09-10 13:52:32
203
原创 yarn与npm
相同:两个是js包管理工具,都可以安装包、下载依赖都有lock 文件(package.lock.json 或 yarn.lock ),该文件主要记录项目中已安装的包的具体版本,当再次进行npm install 的时候,会安装指定版本的包。(npm版本5.0 后才有,但yarn一直有)区别:yarn下载更快npm是按队列顺序下载,且每次都从网络下载yarn是同时下载,yarn再次安装时是从缓存中获取,所以速度更快。在安装错误的情况下,可使用 yarn cache clean 清除
2020-09-09 12:00:56
153
原创 Immutable.js学习记录
一、什么是Immutable.js(不可变数据)先来看看常见的对象深拷贝问题:var obj = { a: 1 };var copy_obj = obj;copy_obj.a = 2;console.log(obj.a); // 2 对象属于引用类型,改变新复制的对象的值,会导致原对象值一起改变解决深拷贝问题常用的方法有:循环遍历、JSON.stringify与JSON.parse来回转化等方式。但如果需要频繁地操作一个复杂对象,每次都完全深拷贝一次的话效率太低了。大部分场景下都只是更新
2020-09-08 17:54:09
205
1
原创 关于react的理解
1.React如何实现数据更新?React的 Diff算法?react通过虚拟dom的 Diff算法,在状态发生变化的时候创造新的虚拟节点和以前的进行对比,让变化的部分进行渲染。整个过程没有对dom进行获取和操作,只有一个渲染的过程,所以react是一个ui框架。react采用setState来控制视图的更新,setState会自动调用render函数,触发视图的重新渲染,如果仅仅只是state数据的变化而没有调用setState,并不会触发更新2. 列表渲染的key有什么用?精准定位更新的列表位置
2020-09-08 16:35:48
190
原创 vue2.x解决pc端微信网页白屏问题 ——es6转es5
问题出现原因:低版本浏览器内核不支持es6语法解决方法:结合babel-polyfill插件将es6语法转为es5语法1.npm安装npm install babel-polyfillnpm install es6-promisepackage.json中会出现“babel-polyfill”: “^6.26.0”,“es6-promise”: “^4.1.1”,2.main.js引入import ‘babel-polyfill’import Vue from ‘vue’import
2020-09-01 10:55:19
1188
1
转载 nginx 常用配置文件详解
1、常用配置参数说明user username 指定用于运行worker进程的用户,默认和在编译nginx是指定–user参数有关worker_processes auto worker进程的个数,通常应该为物理CPU核心数量减1或者减2,worker_processes auto;可以根据物理CPU自动设定error_log logs/error.log info; 错误日志文件及级别pid logs/nginx.pid; 指定nginx进程的PID文件路径worker_rli
2020-07-21 10:23:32
118
转载 vue2中assets与static的区别
assets与static的区别相同点:资源在html中使用,都是可以的。不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。assets中的文件会经过webpack打包,重新编译,推荐该方式。而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来说,s...
2020-04-20 09:46:35
638
原创 ES6常用语法
1、Set通过new Set()可以创建Set,然后通过add()方法能够向Set中添加数据项,Set内部使用Object.is()方法来判断两个数据项是否相等,注意1与’-1’是2个不相等的项,+0和-0在Set中被判断为是相等的Set构造器会确保不会存在重复的数据项//Setlet set= new Set();set.add(1);set.add('1');console.lo...
2020-04-08 12:45:50
120
原创 vue2.x 与 vue3.X区别
1、有什么变化?1、代码更小体积只有10k2、界面结构更清晰3、将vue2中 Object.defineProperty 换成了es6的 Proxy代理器,在目标对象前加了层拦截,将原本对对象属性的操作变为对整个对象的操作4、启用 TypeScript 语法,大大的简化了代码2、引入Vue Composition API参考文献 vue3.0ES6composition api...
2020-04-08 12:45:17
552
转载 js数组常用方法整理
1、join数组转换成字符串 ,不改变原数组join(" "),括号里面规定连接字符,不填写时默认是逗号( ,)var arr = [1,2,3];console.log(arr.join()); // 1,2,3console.log(arr.join("-")); // 1-2-3console.log(arr); // [1, 2, 3](原数组不变...
2020-04-08 11:38:49
153
原创 css3的filter属性使用——全局滤镜
清明节 看到百度、csdn等网站、纷纷一片黑,好奇怎么快速实现的?趴了一下源码,其实实现的很简单,直接全局html上加个灰白色滤镜属性即可。html{ -webkit-filter: grayscale(100%); filter: grayscale(100%);}filter相关参数值:filter: none | blur() | brightness() | ...
2020-04-04 12:24:27
318
js面试基础
目录1、判断js类型有哪些方式?2、es5、es6申明变量的几种方式@3、数组去重的方法4、DOM 事件有哪些阶段?事件代理?5、javascript 的垃圾回收机制6、前端性能优化?安全?1、判断js类型有哪些方式?1、typeof (null、数组、对象的类型均为Object)2、instanceof构造函数的原型是否出现在对象的原型链中function A() {}let a =...
2020-03-29 23:49:15
113
原创 Navicat Premium使用记录
1. 什么是Navicat ?Navicat是一个强大的MySQL数据库管理和开发工具。Navicat,使用了极好的图形用户界面(GUI),可以让你用一种安全和更为容易的方式快速和容易地创建、组织、存取和共享信息。用户可完全控制 MySQL数据库和显示不同的管理资料,包括一个多功能的图形化管理用户和访问权限的管理工具,方便将数据从一个数据库移转到另一个数据库中(数据迁移),进行档案备份。总...
2020-03-25 13:13:24
1556
1
转载 RESTful API设计规范
RESTful(Representational State Transfer)资源"表现层状态转化"是一种API设计规范,参照这个规范,可以让接口更易读什么是RESTful架构:(1)每一个URI(统一资源标识符)代表一种资源;(2)客户端和服务器之间,传递这种资源的某种表现层;(3)客户端通过HTTP动词,对服务器端资源进行操作,实现"表现层状态转化"。常见的5个操作动词:...
2020-03-25 10:15:34
115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人