<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ganle的博客]]></title><description><![CDATA[向着更好的自己前进！加油！]]></description><link>https://blog.youkuaiyun.com/ganle</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ganle]]></copyright><item><title><![CDATA[nvm管理node版本]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/129954466</link><guid>https://blog.youkuaiyun.com/ganle/article/details/129954466</guid><author>ganle</author><pubDate>Tue, 04 Apr 2023 15:42:22 +0800</pubDate><description><![CDATA[安装node对应版本：使用node对应版本：卸载node对应版本：]]></description><category></category></item><item><title><![CDATA[yarn安装私有依赖包，报错unexpected end of file问题]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/127563292</link><guid>https://blog.youkuaiyun.com/ganle/article/details/127563292</guid><author>ganle</author><pubDate>Fri, 28 Oct 2022 00:28:41 +0800</pubDate><description><![CDATA[yarn安装私有依赖包，部署报错unexpected end of file问题，重新拉取依赖失败]]></description><category></category></item><item><title><![CDATA[疑难Bug记录：Network与console及debugger的结果不同]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/125313872</link><guid>https://blog.youkuaiyun.com/ganle/article/details/125313872</guid><author>ganle</author><pubDate>Thu, 16 Jun 2022 12:48:32 +0800</pubDate><description><![CDATA[疑难Bug记录：Network与console及debugger的结果不同]]></description><category></category></item><item><title><![CDATA[Chrome浏览器访问页面报错 NET:ERR_CERT_AUTHORITY_INVALID 和 跨域问题解决]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/125201336</link><guid>https://blog.youkuaiyun.com/ganle/article/details/125201336</guid><author>ganle</author><pubDate>Thu, 09 Jun 2022 13:33:25 +0800</pubDate><description><![CDATA[chrome浏览器访问页面证书无效和跨域问题解决方案]]></description><category></category></item><item><title><![CDATA[vuex实现数据持久化]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/124608895</link><guid>https://blog.youkuaiyun.com/ganle/article/details/124608895</guid><author>ganle</author><pubDate>Fri, 06 May 2022 14:32:35 +0800</pubDate><description><![CDATA[Vue项目中使用Vuex作为状态管理，其本质上类似于全局的变量存储，方便在所有Vue组件中共享数据，而且也可以动态改变状态。Vuex是单向数据流，实现了双向数据绑定。

在单页应用中Vue项目集成Vuex足够基本使用，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。



持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。



1、安装插件 vuex-persistedstate


np]]></description><category></category></item><item><title><![CDATA[浏览器缓存]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/123329900</link><guid>https://blog.youkuaiyun.com/ganle/article/details/123329900</guid><author>ganle</author><pubDate>Mon, 07 Mar 2022 14:59:28 +0800</pubDate><description><![CDATA[【前言】

## 数据的缓存

数据 既可以在 浏览器（客户端）本地存储，也可以在 服务器端存储，

浏览器端（客户端） 可以保存一些数据，需要的时候直接从本地获取。
	服务器端 可以保存所有用户的数据，但需要的时候浏览器要向服务器请求数据。


## Web缓存从微观上可以分为以下几类：

浏览器缓存 （每个浏览器都实现了HTTP缓存，当我们通过浏览器使用HTTP协议与服务器交互时，浏览器就会根据一套与服务器约定好的规则进行缓存工作）
	数据库缓存 （当web应用关系复杂，数据表剧增时，可以将查询后的数据]]></description><category></category></item><item><title><![CDATA[浏览器本地存储]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/123329472</link><guid>https://blog.youkuaiyun.com/ganle/article/details/123329472</guid><author>ganle</author><pubDate>Mon, 07 Mar 2022 14:29:59 +0800</pubDate><description><![CDATA[总结：浏览器本地存储分为 ——

cookie
	Web Storage （localStorage、sessionStorage）
	indexedDB
【tips】WebSQL属于关系型数据库，目前未列入html标准中，只有chrome、Safari等部分webkit浏览器支持，其他浏览器均不支持，IE11仅部分支持IndexedDB数据库。

（1）cookie

## 会话（Session）跟踪：

会话，指用户登录网站后的一系列动作，比如浏览商品添加到购物车并购买。会话跟踪是Web程序中常用的技术]]></description><category></category></item><item><title><![CDATA[前端开发粗心问题]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/121765008</link><guid>https://blog.youkuaiyun.com/ganle/article/details/121765008</guid><author>ganle</author><pubDate>Tue, 07 Dec 2021 11:22:59 +0800</pubDate><description><![CDATA[不要写重了window等的事件监听函数
不要写重了钩子函数
马大哈

]]></description><category></category></item><item><title><![CDATA[手把手教你使用vite简单搭建ts+vue3全家桶]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/120869773</link><guid>https://blog.youkuaiyun.com/ganle/article/details/120869773</guid><author>ganle</author><pubDate>Wed, 20 Oct 2021 18:01:47 +0800</pubDate><description><![CDATA[一、vite环境搭建，构建vite-vue-ts项目



1、安装vite环境


npm init @vitejs/app

或者


yarn create @vitejs/app



2、使用vite初始化vite+vue+ts的项目


npm init @vitejs/app app-name

或者


yarn create @vitejs/app app-name

3、选择项目类型为vue+ts（小tips:git bash中直接按上下键切换选择自己想要的选项，虽然界面中不会动态展示切]]></description><category></category></item><item><title><![CDATA[移动端H5项目开发遇到的问题]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/120862942</link><guid>https://blog.youkuaiyun.com/ganle/article/details/120862942</guid><author>ganle</author><pubDate>Wed, 20 Oct 2021 11:45:15 +0800</pubDate><description><![CDATA[第一类：架构问题

（1）移动端H5项目可能涉及到微应用等的项目上传的大小限制，视情而定选择较小的依赖包，做好代码压缩混淆，图片处理，用打包工具处理掉依赖包中不需要的代码等。



第二类：兼容性问题

（1）不同手机屏幕的px值可能会出现小数，我们在需要用到相关数据时可以进行取整处理。

（2）要考虑手机顶部的不同刘海进行设计。



------------------------------------------ 持续更新 --------------------------------------]]></description><category></category></item><item><title><![CDATA[vue中使用quill富文本编辑器及其拓展插件]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/113242476</link><guid>https://blog.youkuaiyun.com/ganle/article/details/113242476</guid><author>ganle</author><pubDate>Wed, 27 Jan 2021 10:52:55 +0800</pubDate><description><![CDATA[一、安装 quill 及其插件


npm install quill quill-image-drop-module quill-image-resize-module -S

二、在页面中使用 quill 及其插件：quill-image-drop-module、quill-image-resize-module


//myQuill.vue

&lt;div id="quillEditor"&gt;&lt;/div&gt;


------------------------------------]]></description><category></category></item><item><title><![CDATA[vue项目中修改项目源码（echarts为例）]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/111311985</link><guid>https://blog.youkuaiyun.com/ganle/article/details/111311985</guid><author>ganle</author><pubDate>Thu, 17 Dec 2020 11:40:12 +0800</pubDate><description><![CDATA[找到node_module中的echarts，程序在引用包时一般是从包的index.js进入，所以我们找到index.js：



在index.js中看到引用了很多文件，我们根据自身需求去进行修改即可。

如我想添加一个charts的公用函数：



找到了公用方法的路径，进入修改：



添加了一个我自定义的方法：



如此，就可以在项目中使用这个方法：


......]]></description><category></category></item><item><title><![CDATA[创建项目时容易出现的问题]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/110957150</link><guid>https://blog.youkuaiyun.com/ganle/article/details/110957150</guid><author>ganle</author><pubDate>Thu, 10 Dec 2020 17:09:08 +0800</pubDate><description><![CDATA[1、包版本问题导致的错误（如引用包出现语法更新等）；

2、文件后缀的缺失（如js和vue文件同时存在于一个文件夹下时无后缀名引用报错）；

3、CMD规范和ES Module规范的混用；
]]></description><category></category></item><item><title><![CDATA[mouseleave在多次鼠标点击下被错误触发的避免办法]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/109820636</link><guid>https://blog.youkuaiyun.com/ganle/article/details/109820636</guid><author>ganle</author><pubDate>Thu, 19 Nov 2020 18:26:06 +0800</pubDate><description><![CDATA[项目中遇到个问题：
在监听鼠标移入移出事件时有时会因为鼠标在移入的元素中进行了点击就自行触发了鼠标移出事件，很不得解。
打印出event对象发现，因为多次点击触发的mouseleave事件和正常触发的mouseenter事件有一个区别：
其relatedTarget属性（ie中是toElement）值不同。
多次点击触发的鼠标移出事件的这一属性值为null；
正常触发的则会是鼠标移出元素后所悬浮于上的DOM对象；
以上~待深究……

...]]></description><category></category></item><item><title><![CDATA[css不常用但很有用的属性记录]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/108320692</link><guid>https://blog.youkuaiyun.com/ganle/article/details/108320692</guid><author>ganle</author><pubDate>Mon, 31 Aug 2020 14:38:00 +0800</pubDate><description><![CDATA[一、radial-gradient


&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt; 
&lt;title&gt;菜鸟教程(runoob.com)&lt;/title&gt; 
&lt;style&gt;
#grad1:after {
  content: radial-gradient(closest-corner at 35% 35%, white 10%, pink 70%);
  displa]]></description><category></category></item><item><title><![CDATA[vue项目开发遇到的问题记录和细节list]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/108253073</link><guid>https://blog.youkuaiyun.com/ganle/article/details/108253073</guid><author>ganle</author><pubDate>Thu, 27 Aug 2020 09:38:34 +0800</pubDate><description><![CDATA[1、this.$set(); 设置数组对象的值；

2、子组件调用父组件函数：this.$parent.func();

3、在一个页面中的window上绑定scroll事件，路由跳转后该事件还在，需要在绑定事件页面的生命钩子destroyed上解绑事件；

4、vue-router的生命钩子、重定向；

5、$ref的使用；
...]]></description><category></category></item><item><title><![CDATA[css/less 样式开发遇到的问题]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/107998902</link><guid>https://blog.youkuaiyun.com/ganle/article/details/107998902</guid><author>ganle</author><pubDate>Fri, 14 Aug 2020 10:22:02 +0800</pubDate><description><![CDATA[一、vue修改elementUI的样式无效

解决：

1、深度作用选择器（ &gt;&gt;&gt; ）

2、/deep/ 预处理器less下使用



二、li :hover无效

解决：

:hover与前面的元素之间不要有空格！
]]></description><category></category></item><item><title><![CDATA[JavaScript中的词法作用域（也叫 静态作用域）、动态作用域、函数作用域和块级作用域]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/107702049</link><guid>https://blog.youkuaiyun.com/ganle/article/details/107702049</guid><author>ganle</author><pubDate>Thu, 30 Jul 2020 22:43:01 +0800</pubDate><description><![CDATA[静态作用域：

一段代码，在它执行之前就已经确定了它的作用域，

简单来说就是在执行之前就确定了其可以应用哪些地方的作用域（意指：该作用域下的变量）。

以下例子为《JavaScript权威指南》中经典的一个例子：

例一：


var scope = "global scope";

function checkScope() {
	var scope = "local scope";

	function fn() {
		return scope;
	}
	return fn();
}
checkSc]]></description><category></category></item><item><title><![CDATA[箭头函数&普通函数 区别]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/107700315</link><guid>https://blog.youkuaiyun.com/ganle/article/details/107700315</guid><author>ganle</author><pubDate>Thu, 30 Jul 2020 21:50:02 +0800</pubDate><description><![CDATA[区别：

箭头函数采用词法作用域



1、相比普通函数更简洁的语法

2、没有this，而是捕获其所在上下文的 this 值，作为自己的 this 值

普通函数：每个新定义的函数都有其自己的 this 值。

3、不能使用new

箭头函数作为匿名函数,是不能作为构造函数的,不能使用new。

4、箭头函数没有原型属性


var a = ()=&gt;{
  return 1;
}

function b(){
  return 2;
}

console.log(a.prototype);//un.]]></description><category></category></item><item><title><![CDATA[在严格模式下不推荐使用callee、caller的原因]]></title><link>https://blog.youkuaiyun.com/ganle/article/details/106733579</link><guid>https://blog.youkuaiyun.com/ganle/article/details/106733579</guid><author>ganle</author><pubDate>Sat, 13 Jun 2020 16:13:46 +0800</pubDate><description><![CDATA[callee

我们知道，在递归函数中可以通过arguments.callee来实现解除函数体内代码与函数名的耦合状态，但是这种方法会导致函数体内的this指向的对象被修改；


var global = this;

var sillyFunction = function (recursed) {
 	if (!recursed) {
    	return arguments.callee(true);	
	} 
  	if (this !== global) { 
    	console.log(]]></description><category></category></item></channel></rss>