<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[L_squan的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/L_squan</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; L_squan]]></copyright><item><title><![CDATA[webpack打包优化进阶版]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/118388933</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/118388933</guid><author>L_squan</author><pubDate>Thu, 01 Jul 2021 16:49:12 +0800</pubDate><description><![CDATA[首先就是要在根目录下创建vue.config.js
1、设置静态资源路径否则 打包后会白屏
module.exports = {
  publicPath: "./", 
  }

2、关闭生产环境下的sourceMap映射文件 能减少dist文件的3/4内存
sourceMap 但是有一点 关闭后   打包 的报错不能提示准确位置
productionSourceMap: false,

3、添加进度条
需要安装nprogress
在main.js下可以这样操作
// 导入NProgress, 包对应的J]]></description><category></category></item><item><title><![CDATA[函数防抖和函数节流]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/118021743</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/118021743</guid><author>L_squan</author><pubDate>Fri, 18 Jun 2021 14:57:26 +0800</pubDate><description><![CDATA[是函数防抖就是：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
我们最经常用的就是输入框  搜索、添加等
举个搜索框的例子
&lt;body&gt;

  &lt;input type="text" id="text"&gt;
&lt;/body&gt;

 &lt;script&gt;
  function _debounce(fn,delay){
    var delay = delay || 400
    var timer
    return function(){
   ]]></description><category></category></item><item><title><![CDATA[vue双向数据绑定原理]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117983424</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117983424</guid><author>L_squan</author><pubDate>Thu, 17 Jun 2021 10:32:47 +0800</pubDate><description><![CDATA[vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
具体步骤：
第一步： 需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化
第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每]]></description><category></category></item><item><title><![CDATA[宏任务微任务]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117811739</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117811739</guid><author>L_squan</author><pubDate>Fri, 11 Jun 2021 11:57:34 +0800</pubDate><description><![CDATA[js代码执行时
可分为同步和异步 而  异步中又可 分为 微任务 和宏任务
宏任务：setTimeout  、setInteval、Ajax、DOM事件（nextTick最早执行）
微任务：Promise、async/await
执行时
一般  同步–》 异步—》 微任务  --》 宏任务 —》
 console.log('---start---');//第一轮主线程
 
setTimeout(() =&gt; {
  console.log('setTimeout');  // 将回调代码放入个宏任务队列]]></description><category></category></item><item><title><![CDATA[项目中如何修改element-ui的默认样式]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117811441</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117811441</guid><author>L_squan</author><pubDate>Fri, 11 Jun 2021 11:49:33 +0800</pubDate><description><![CDATA[1、可以去除scoped样式来更改
如果还更改不了可以加 !import 即权重
2、也可以穿透
这样就不需要去除scoped属性
直接  用 &gt;&gt;&gt;
&lt;style scoped &gt;
  .a &gt;&gt;&gt; b.{
  width:50px
  }
&lt;/style&gt;

3、如果使用的是sass、less
可以 用 /deep/
&lt;style scoped &gt;
  .a /deep/ b.{
  width:50px
  }
&lt;/styl]]></description><category></category></item><item><title><![CDATA[elemeng-ui 中el-form 表单如何校验]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117810819</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117810819</guid><author>L_squan</author><pubDate>Fri, 11 Jun 2021 11:42:57 +0800</pubDate><description><![CDATA[&lt;el-form :model="form" ref="addUserFormRef" :rules="userfrom"&gt;
          &lt;el-form-item prop="username" label="用户名" label-width="80px"&gt;
            &lt;el-input v-model="form.username" autocomplete="off"&gt;&lt;/el-input&gt;
          &lt;...]]></description><category></category></item><item><title><![CDATA[element-ui 按需引入]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117810307</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117810307</guid><author>L_squan</author><pubDate>Fri, 11 Jun 2021 11:26:39 +0800</pubDate><description><![CDATA[在src目录下创建一个plugins/element.js
 import Vue from 'vue'
 import { Button，Message} from 'element-ui'
  Vue.use(Button)
      // 将弹框组件全局挂在到VUe原形实例
    Vue.prototype.$message = Message


还需要下载npm install babel-plugin-component -D插件
在main.js引入
 import './plugins/]]></description><category></category></item><item><title><![CDATA[webpack打包优化]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117671637</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117671637</guid><author>L_squan</author><pubDate>Mon, 07 Jun 2021 18:58:08 +0800</pubDate><description><![CDATA[在根目录下创建 vue.config.js

设置静态资源路径

否则history模式会白屏
module.exports = {
  publicPath: "./", 
  }


**  关闭生产环境下的sourceMap映射文件 能减少dist文件的4/5内存**

 productionSourceMap: false,


跨域

devServer: {
    open: true,
    proxy: {
      "/api": {
        target: "http://]]></description><category></category></item><item><title><![CDATA[vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117654812</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117654812</guid><author>L_squan</author><pubDate>Mon, 07 Jun 2021 11:43:30 +0800</pubDate><description><![CDATA[1、下载Nginx
下载地址：http://nginx.org/en/download.html

下载 之后  解压到指定文件夹 重点来了 ！！！ 此路径下不能有中文名称 有的话 你就不能启动 nginx

然后切换的相应的控制台 nginx启动命令 ： start nginx  然后在浏览器地址框访问localhost

显示此页面就打开了
nginx的相关命令
（1）start nginx 开启nginx服务
（2）nginx.exe -s stop 关闭nginx服务，快速停止nginx，可能并不保]]></description><category></category></item><item><title><![CDATA[axios封装 （axios拦截，api统一管理）]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117636159</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117636159</guid><author>L_squan</author><pubDate>Sun, 06 Jun 2021 20:40:22 +0800</pubDate><description><![CDATA[首先在 src下新建 文件夹如 http 里面有
request.js 用来封装
api.js 用来放置我们的接口请求
然后就可以开始操作了
现在request.js里操作
先安装axios   npm  i axios --save
 import axios from "axios" // 引入axios
import store from "@/store/index"  //引入vuex
import { Toast } from "vant"  // 引入vant


创建axios实例
 con]]></description><category></category></item><item><title><![CDATA[项目开发流程（简述 +webpack打包）]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117535817</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117535817</guid><author>L_squan</author><pubDate>Fri, 04 Jun 2021 16:28:39 +0800</pubDate><description><![CDATA[项目开发流程（简述）

确定项目技术栈

vue	vue.js	2.0
vue-cli	vue脚手架	3/4
vue-router	vue路由	
vuex	vue状态管理工具	
axios	异步请求数据	
vant	移动端框架	
rem	自适应布局	
scss	CSS 扩展语言	
webpack	打包工具

搭建项目
可以用npm下载axios等插件   npm axios --save
或者是yard yard add axios --save （add是下载单个  install可以下载多个文件）
并且]]></description><category></category></item><item><title><![CDATA[多环境变量配置]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117467816</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117467816</guid><author>L_squan</author><pubDate>Wed, 02 Jun 2021 14:57:57 +0800</pubDate><description><![CDATA[多环境变量配置
首先我们需要在package.json里操作
默认只有serve和build 我们需要再添加一个test测试环境
"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build ",
    "test":"vue-cli-service --mode testing"
  },


通过 npm run serve 启动本地 , 执行 development
通过 n]]></description><category></category></item><item><title><![CDATA[transition转场动画]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117458874</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117458874</guid><author>L_squan</author><pubDate>Wed, 02 Jun 2021 08:10:54 +0800</pubDate><description><![CDATA[transition转场动画
可以分为这几个状态
v-enter： 进入之前
v-enter-to：进入后
v-enter-active：这里包含了上面的v-enter、v-enter-to两个时间段，在这里可以对上半场过渡定义过渡时间、曲线等
v-leave：离开前
v-leave-to：离开后
v-leave-active：这里包含了上面的v-leave、v-leave-to两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等
项目实战
 &lt;template&gt;
  &lt;div id="]]></description><category></category></item><item><title><![CDATA[keep-alive]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117454542</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117454542</guid><author>L_squan</author><pubDate>Wed, 02 Jun 2021 07:54:27 +0800</pubDate><description><![CDATA[keep-alive
keep-alive 标签 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
当组件在  内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执 行。
&lt;keep-alive :include="whiteList" :exclude="blackList" :max="amount"&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
&lt;/keep-alive&gt;

inc]]></description><category></category></item><item><title><![CDATA[事件委托]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117406593</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117406593</guid><author>L_squan</author><pubDate>Sun, 30 May 2021 22:02:13 +0800</pubDate><description><![CDATA[事件委托
就是把子元素的事件都绑定到父元素上
  &lt;ul class="max"&gt;
    &lt;li data-ind="1"&gt;11&lt;/li&gt;
    &lt;li data-ind="2"&gt;22&lt;/li&gt;
    &lt;li data-ind="3"&gt;3&lt;/li&gt;
    &lt;li data-ind="4"&gt;4&lt;/li&gt;
  &lt;/ul&gt;


var max = document.querySelect]]></description><category></category></item><item><title><![CDATA[var let const 区别]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117406142</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117406142</guid><author>L_squan</author><pubDate>Sun, 30 May 2021 21:37:55 +0800</pubDate><description><![CDATA[var let const 区别
var声明的变量属于函数作用域  而let、const声明的变量属于块级作用域
var存在变量提升 而let conts没有
var变量可以重复声明  而在同一个块级作用域 let变量不能重新声明 const不能修改 并且let存暂时性死区
 console.log(a)
 var a=10
 //后台打印  undefined

console.log(a)
let a=10
// 报错  ‘Uncaught ReferenceError: Cannot access ‘]]></description><category></category></item><item><title><![CDATA[作用域、作用域链、自由变量、变量提升]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117404543</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117404543</guid><author>L_squan</author><pubDate>Sun, 30 May 2021 20:18:24 +0800</pubDate><description><![CDATA[作用域
分为全局作用域、函数作用域、块级作用域
作用域链
自由变量向上级作用域一层一层的查找  知道找到为止（最高找到全局作用域）就形成了 作用域链
自由变量
一个变量在当前作用域被使用，但没被定义
向上级一层一层找
如果找到不到 就报 xx is not defined
变量提升
var声明的变量和function函数 都存在变量提升 （let \const不存在变量提升）

...]]></description><category></category></item><item><title><![CDATA[call/apply/bind]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117349530</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117349530</guid><author>L_squan</author><pubDate>Fri, 28 May 2021 08:05:38 +0800</pubDate><description><![CDATA[首先call/apply/bind都可以强行改变this的指向
call和apply都是有两个参数
第一个参数是 运行函数的作用域
第二个参数是 数组也可以i是伪数组
但是 call 不会把数组或伪数组展开
而apply会
bind就更特殊了
他需要执行也就是额外加一个()

...]]></description><category></category></item><item><title><![CDATA[原型、原型链]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117318059</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117318059</guid><author>L_squan</author><pubDate>Thu, 27 May 2021 08:17:23 +0800</pubDate><description><![CDATA[__ proto __
每一个实例都有__ proto __ 属性被称为隐式原型
每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype
prototype
每一个函数都有一个prototype属性，显示原型
constuctor
每一个prototype属性都有一个constructor属性，指向它关联的构造函数
原型链
获取对象属性时，如果对象本身没有这个属性那么就回去它的__proto__上去找，没有找到就去原型的原型prototype，在没找到就去construc]]></description><category></category></item><item><title><![CDATA[this指向问题、new的过程]]></title><link>https://blog.youkuaiyun.com/L_squan/article/details/117317730</link><guid>https://blog.youkuaiyun.com/L_squan/article/details/117317730</guid><author>L_squan</author><pubDate>Thu, 27 May 2021 07:57:33 +0800</pubDate><description><![CDATA[在全局范围内this指向window
在构造函数中this指向new出来的新对象
在函数中this指向调用者
箭头函数中this始终指向它的父级，并且apply、call、bind不能改变箭头函数的this指向
apply、call、bind可以改以定向改变this的指向


...]]></description><category></category></item></channel></rss>