- 博客(51)
- 收藏
- 关注
RSS订阅原创 关于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关注的人