<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[var_deng的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/var_deng</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; var_deng]]></copyright><item><title><![CDATA[移动端1px像素问题]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/130559244</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/130559244</guid><author>var_deng</author><pubDate>Mon, 08 May 2023 15:01:17 +0800</pubDate><description><![CDATA[几种常见的解决移动端1px像素的解决方案]]></description><category></category></item><item><title><![CDATA[git 设置别名]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/129421236</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/129421236</guid><author>var_deng</author><pubDate>Thu, 09 Mar 2023 13:44:59 +0800</pubDate><description><![CDATA[git 别名设置]]></description><category></category></item><item><title><![CDATA[关于macOS系统M1芯片安装node-sass报错的解决方案]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/128916127</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/128916127</guid><author>var_deng</author><pubDate>Tue, 07 Feb 2023 15:32:03 +0800</pubDate><description><![CDATA[通过arch -x86_64 zsh 让shell运行在Rosetta2下 安装的npm包会经过Rosetta2转译]]></description><category></category></item><item><title><![CDATA[配置nginx清除客服端缓存]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/128902273</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/128902273</guid><author>var_deng</author><pubDate>Mon, 06 Feb 2023 15:21:35 +0800</pubDate><description><![CDATA[缓存策略：no-store表示不允许缓存，no-cache表示不允许缓存，must-revalidate表示必须重新验证，max-age=0表示缓存过期时间为0；过期时间：-1表示立即过期。]]></description><category></category></item><item><title><![CDATA[macOS 的bash与zsh终端]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/128900844</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/128900844</guid><author>var_deng</author><pubDate>Mon, 06 Feb 2023 15:12:44 +0800</pubDate><description><![CDATA[二者均是shell的一种，zsh能基本完美兼容bash的命令，并且使用起来更加优雅。是一个对zsh命令行环境的配置包装框架，但它不提供命令行窗口，更不是一个独立的application。当从bash切换为zsh时，如果不想重新配置一遍.zshrc文件，可以在.zshrc文件中加上source ~/.bash_profile，从而直接从.bash_profile文件读取配置。如果通过homebrew安装的nvm，可使用以下指令配置nvm环境变量。可以通过直接打开.bash_profile文件的方式修改配置，]]></description><category></category></item><item><title><![CDATA[vue常用loader扩展]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/124189887</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/124189887</guid><author>var_deng</author><pubDate>Fri, 15 Apr 2022 10:50:14 +0800</pubDate><description><![CDATA[loader扩展：
svg图标 （svg-sprite-loader）
icon雪碧图 （webpack-spritesmith）
移动自适应布局（flexible） px单位转rem (postcss-px2rem)
公共sass文件引入  (sass-resources-loader)

]]></description><category></category></item><item><title><![CDATA[cdn方式优化vue项目首页加载慢问题]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/124189518</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/124189518</guid><author>var_deng</author><pubDate>Fri, 15 Apr 2022 10:46:49 +0800</pubDate><description><![CDATA[以cdn方式引入htmlWebpackPlugin中排除的插件包
index.html 核心代码：
  &lt;% if (process.env.NODE_ENV === 'production') { %&gt;
    &lt;% if (htmlWebpackPlugin.options.cdn.css) { %&gt;
      &lt;% for(var css of htmlWebpackPlugin.options.cdn.css) { %&gt;
        &lt;link hre]]></description><category></category></item><item><title><![CDATA[vue/cli@3.x项目pwa处理]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120570057</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120570057</guid><author>var_deng</author><pubDate>Thu, 30 Sep 2021 18:05:18 +0800</pubDate><description><![CDATA[前言


什么是pwa？
Progressive Web Apps，渐进式 Web 应用
pwa是我们在追求webapp便捷和原生应用良好体验结合的过程中的产物，目前兼容性是最大障碍
底层使用的是workBox (service worker的一个框架)，封装了各种api和缓存策略，
vue-cli3.0集成的是workbox-webpack-plagin，我们可以通过vue.config.js的pwa配置项进行配置


pwa 特征？
具有可离线、添加到桌面（一级入口）、后台同步、服务端推送等特征


使]]></description><category></category></item><item><title><![CDATA[vue2.x 项目 webpack升级vite避坑总结]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120488439</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120488439</guid><author>var_deng</author><pubDate>Sun, 26 Sep 2021 17:05:22 +0800</pubDate><description><![CDATA[前言
目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。为提高团体开发速度和效率，最近打算把底部打包构建的环境由webpack迁移为vite。

为什么 Vite 启动这么快


底层实现上， Vite 是基于 esbuild 预构建依赖的


esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒
]]></description><category></category></item><item><title><![CDATA[批量引入svg方案]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120428711</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120428711</guid><author>var_deng</author><pubDate>Thu, 23 Sep 2021 10:08:09 +0800</pubDate><description><![CDATA[1. webpack批量导出
核心代码：
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// 通过node的require批量导出
const req = require.context('./svg', false, /\.svg$/)
const requireAll = r]]></description><category></category></item><item><title><![CDATA[vite学习记录]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120368045</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120368045</guid><author>var_deng</author><pubDate>Sat, 18 Sep 2021 16:20:18 +0800</pubDate><description><![CDATA[Vite 官方中文文档
rollup.js 中文文档
vite解决服务器启动缓慢问题：

当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。
Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。
依赖 大多为在开发时不会变动的纯
JavaScript。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会存在多种模块化格式（例如 ESM 或者
CommonJS）。
Vite 将会使用 esbuild 预构建依]]></description><category></category></item><item><title><![CDATA[CommonJS 和 ES Module 区别]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120367623</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120367623</guid><author>var_deng</author><pubDate>Sat, 18 Sep 2021 15:17:19 +0800</pubDate><description><![CDATA[CommonJs
CommonJs中 require可以动态加载语句，代码发生在运行时
CommonJs混合导出，还是一种语法，只不过不用声明前面对象而已，当我导出引用对象时之前的导出就被覆盖了
CommonJs导出值是浅拷贝，可以修改导出的值，这在代码出错时，不好排查引起变量污染
Es Module
Es Module是静态的，import 不可以动态加载语句，只能声明在该文件的最顶部，代码发生在编译时
Es Module混合导出，单个导出，默认导出，完全互不影响
Es Module导出是引用值（存在映射]]></description><category></category></item><item><title><![CDATA[Pinia学习记录]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/120325342</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/120325342</guid><author>var_deng</author><pubDate>Thu, 16 Sep 2021 14:07:07 +0800</pubDate><description><![CDATA[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
]]></description><category></category></item><item><title><![CDATA[babel学习记录]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/119825707</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/119825707</guid><author>var_deng</author><pubDate>Fri, 20 Aug 2021 16:53:10 +0800</pubDate><description><![CDATA[一、babel相关文件说明


babel.config.js 与 .babelrc 区别：
全局配置 (babel.config.js) 和局部配置 (.babelrc)


babel与polyfill 区别：
babel只转换语法， 比如 像箭头函数，babel是能处理成 function这种
但是像Array.from  promise 这些 新的原生api方法，是需要引入polyfill


core-js@2 与core-js@3区别：



core-js 2 封版于 1.5 年之前，所以里面]]></description><category></category></item><item><title><![CDATA[vue3.2版本新特性]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/119726194</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/119726194</guid><author>var_deng</author><pubDate>Mon, 16 Aug 2021 17:27:02 +0800</pubDate><description><![CDATA[Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。
Vue 3.2 原文链接
主要更新如下：
1. 新的单文件组件功能

&lt;script setup&gt; 是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。
&lt;style&gt; v-bind 在 SFC 标签中启用组件状态驱动的动态 CSS 值。&lt;style&gt;

起初 vue3.0 暴露变量必须 return 出来，template中才能使用
&lt;script]]></description><category></category></item><item><title><![CDATA[vue2 扩展雪碧图]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/119418060</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/119418060</guid><author>var_deng</author><pubDate>Thu, 05 Aug 2021 15:10:28 +0800</pubDate><description><![CDATA[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]]></description><category></category></item><item><title><![CDATA[window的IntersectionObserver特性使用]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/119349017</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/119349017</guid><author>var_deng</author><pubDate>Tue, 03 Aug 2021 14:52:40 +0800</pubDate><description><![CDATA[前言
翻vant源码，看到有使用IntersectionObserver属性，才疏学浅的我居然不知道是啥玩意，百度一番，确实是个好东西！

IntersectionObserver主要用于元素可见性的监听，比传统通过全局监听scroll事件去判断可见性无论是性能还是便利性都要好得多。因为api比较新，存在兼容性问题，好在已经有了兼容的polyfill.其基本介绍和使用方式都可以在该polyfill对应网站上看到。

使用场景
1.图片懒加载
监听scroll方式（旧）：
window.addEventLis]]></description><category></category></item><item><title><![CDATA[vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/119172373</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/119172373</guid><author>var_deng</author><pubDate>Wed, 28 Jul 2021 10:25:53 +0800</pubDate><description><![CDATA[vue使用lib-flexible和postcss-px2rem-exclude解决移动端适配问题
一、思路
解决移动端适配问题的根本思路在于将px转换成rem
⑴ 使用postcss-px2rem-exclude可以将项目中的px自动转换成rem
⑵ 而amfe-flexible则可以根据不同型号的手机，进行相应的HTML根节点(font-szie)的初始化。
二、步骤


安装 postcss-px2rem-exclude、amfe-flexible
cnpm install postcss-px2re]]></description><category></category></item><item><title><![CDATA[关于遮罩面板出现滚动条的处理]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/111280029</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/111280029</guid><author>var_deng</author><pubDate>Wed, 16 Dec 2020 15:30:17 +0800</pubDate><description><![CDATA[遮罩面板打开时：
  // 固定body
    fixedBody() {
      const scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      this.prevBodyCss = document.body.style.cssText;
      document.body.style.cssText +=
        "position:fixed;width:1]]></description><category></category></item><item><title><![CDATA[日常代码学习记录]]></title><link>https://blog.youkuaiyun.com/var_deng/article/details/110230361</link><guid>https://blog.youkuaiyun.com/var_deng/article/details/110230361</guid><author>var_deng</author><pubDate>Fri, 27 Nov 2020 14:21:59 +0800</pubDate><description><![CDATA[实现 Promise.retry，成功后 resolve 结果，失败后重试，尝试超过一定次数才真正的 reject

 Promise.retry = function(fn, num){
    return new Promise(function(resolve, reject){
       while(num&gt;0){
           try{
                  const res = await fn
                  resolve(res)
.]]></description><category></category></item></channel></rss>