L_squan-优快云博客

原创 webpack打包优化进阶版

首先就是要在根目录下创建vue.config.js 1、设置静态资源路径否则打包后会白屏 module.exports = { publicPath: "./", } 2、关闭生产环境下的sourceMap映射文件能减少dist文件的3/4内存 sourceMap 但是有一点关闭后打包的报错不能提示准确位置 productionSourceMap: false, 3、添加进度条需要安装nprogress 在main.js下可以这样操作 // 导入NProgress, 包对应的J

2021-07-01 16:49:12 578

原创函数防抖和函数节流

是函数防抖就是：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时我们最经常用的就是输入框搜索、添加等举个搜索框的例子 <body> <input type="text" id="text"> </body> <script> function _debounce(fn,delay){ var delay = delay || 400 var timer return function(){

2021-06-18 14:57:26 301

转载 vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步： compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每

2021-06-17 10:32:47 193

原创宏任务微任务

js代码执行时可分为同步和异步而异步中又可分为微任务和宏任务宏任务：setTimeout 、setInteval、Ajax、DOM事件（nextTick最早执行）微任务：Promise、async/await 执行时一般同步–》异步—》微任务 --》宏任务 —》 console.log('---start---');//第一轮主线程 setTimeout(() => { console.log('setTimeout'); // 将回调代码放入个宏任务队列

2021-06-11 11:57:34 155

原创项目中如何修改element-ui的默认样式

1、可以去除scoped样式来更改如果还更改不了可以加 !import 即权重 2、也可以穿透这样就不需要去除scoped属性直接用 >>> <style scoped > .a >>> b.{ width:50px } </style> 3、如果使用的是sass、less 可以用 /deep/ <style scoped > .a /deep/ b.{ width:50px } </styl

2021-06-11 11:49:33 256 1

原创 elemeng-ui 中el-form 表单如何校验

<el-form :model="form" ref="addUserFormRef" :rules="userfrom"> <el-form-item prop="username" label="用户名" label-width="80px"> <el-input v-model="form.username" autocomplete="off"></el-input> <...

2021-06-11 11:42:57 381 1

原创 element-ui 按需引入

在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/

2021-06-11 11:26:39 265 1

原创 webpack打包优化

在根目录下创建 vue.config.js 设置静态资源路径否则history模式会白屏 module.exports = { publicPath: "./", } ** 关闭生产环境下的sourceMap映射文件能减少dist文件的4/5内存** productionSourceMap: false, 跨域 devServer: { open: true, proxy: { "/api": { target: "http://

2021-06-07 18:58:08 210

原创 vue打包上线流程，nginx服务器配置（路由history模式白屏如何处理）

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，可能并不保

2021-06-07 11:43:30 417

原创 axios封装（axios拦截，api统一管理）

首先在 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

2021-06-06 20:40:22 381 2

原创项目开发流程（简述 +webpack打包）

项目开发流程（简述）确定项目技术栈 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可以下载多个文件）并且

2021-06-04 16:28:39 238

原创多环境变量配置

多环境变量配置首先我们需要在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

2021-06-02 14:57:57 151

原创 transition转场动画

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两个时间段，在这里可以对下半场过渡定义过渡时间、曲线等项目实战 <template> <div id="

2021-06-02 08:10:54 207

原创 keep-alive

keep-alive keep-alive 标签包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。当组件在内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 <keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view> </keep-alive> inc

2021-06-02 07:54:27 325

原创事件委托

事件委托就是把子元素的事件都绑定到父元素上 <ul class="max"> <li data-ind="1">11</li> <li data-ind="2">22</li> <li data-ind="3">3</li> <li data-ind="4">4</li> </ul> var max = document.querySelect

2021-05-30 22:02:13 127

原创 var let const 区别

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 ‘

2021-05-30 21:37:55 124

原创作用域、作用域链、自由变量、变量提升

作用域分为全局作用域、函数作用域、块级作用域作用域链自由变量向上级作用域一层一层的查找知道找到为止（最高找到全局作用域）就形成了作用域链自由变量一个变量在当前作用域被使用，但没被定义向上级一层一层找如果找到不到就报 xx is not defined 变量提升 var声明的变量和function函数都存在变量提升（let \const不存在变量提升） ...

2021-05-30 20:18:24 149

原创 call/apply/bind

首先call/apply/bind都可以强行改变this的指向 call和apply都是有两个参数第一个参数是运行函数的作用域第二个参数是数组也可以i是伪数组但是 call 不会把数组或伪数组展开而apply会 bind就更特殊了他需要执行也就是额外加一个() ...

2021-05-28 08:05:38 133

原创原型、原型链

__ proto __ 每一个实例都有__ proto __ 属性被称为隐式原型每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype prototype 每一个函数都有一个prototype属性，显示原型 constuctor 每一个prototype属性都有一个constructor属性，指向它关联的构造函数原型链获取对象属性时，如果对象本身没有这个属性那么就回去它的__proto__上去找，没有找到就去原型的原型prototype，在没找到就去construc

2021-05-27 08:17:23 188

原创 this指向问题、new的过程

在全局范围内this指向window 在构造函数中this指向new出来的新对象在函数中this指向调用者箭头函数中this始终指向它的父级，并且apply、call、bind不能改变箭头函数的this指向 apply、call、bind可以改以定向改变this的指向 ...

2021-05-27 07:57:33 146

原创数组常用方法（es4,es5,es6）

push() ：在数组尾部添加元素，可以添加多个元素，返回值是修改后数组的长度； let arr = [1,2,3,4] newarr=arr.push(9,'aa') console.log(arr); //[1,2,3,4,9,'aa'] console.log(newarr); // 6 pop() ：在数组末尾删除一个元素，一次加粗样式只能删除一个，返回值删除的元素； let arr = [1,2,3,4] newarr=arr.pop() .

2021-05-26 07:51:08 215

原创为数组arguments

伪数组有 arguments 、NodeList、 argument 不具有数组的方法但是有长度和下标那我们要使用它时可以把它转换成真数组在操作 1、最简单的转换方法…展开 newarr=[…arguments] 2、使用Array.from()方法 let arr = Array.from(arguments) 3、借用数组的方法 var arr1 = Array.prototype.slice.call(arguments); var arr2 = Array.prototype.push.cal

2021-05-25 20:38:11 133

原创数据类型判断

数据类型判断 typeof typeof 666 // Number typeof abc // String typeof { } // object typeof [ ] // object typeof true // Bolearn typeof null // object typeof null // object typeof /^[a-zA-Z]{5,20}$/ // object 基本数据类型中：null 。引用数据类型中的：Array，Object，Date

2021-05-25 08:16:06 104

原创 js数据类型

js数据类型分为基本数据类型和引用数据类型基本数据类型 Number、undefined、Bollean、String、Null、Symbol（es6新增独一无二的值）和 BigInt（es10新增）引用数据类型 Object（Array、Objecct、function、Date、RegExp） ...

2021-05-25 07:43:36 103

原创深拷贝

深拷贝（什么是深拷贝，为什么要进行深拷贝，如何进行深拷贝（至少写三种方法，手写深拷贝））所谓拷贝，就是赋值。把一个变量赋给另外一个变量，就是把变量的内容进行拷贝。把一个对象的值赋给另外一个对象，就是把一个对象拷贝一份。分为基本数据类型拷贝和引用数据类型拷贝基本数据类型： let a= 5 let b=a b=4 console.log(a) // 5 console.log(b) // 4 我们会发现a的值是5 b的值是4 也就是a没有随着b改变而改变引用数据类型（一般是数组，对象） var

2021-05-24 08:17:24 177

原创 vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)、）

vue-router （两种路由模式、编程式/组件式、如何传参(优缺点)、） vue-router 路由跳转分为两种模式 hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点： hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用， hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由

2021-05-23 20:36:28 640

L_squan的博客