L_squan-CSDN博客

原创 webpack打包优化进阶版

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

2021-07-01 16:49:12 480

原创函数防抖和函数节流

是函数防抖就是：在事件被触发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 234

原创 vue双向数据绑定原理

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

2021-06-17 10:32:47 134

原创宏任务微任务

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

2021-06-11 11:57:34 103

原创项目中如何修改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 179 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 310 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 187 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 142

原创 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 312

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

首先在 src下新建文件夹如 http 里面有request.js 用来封装api.js 用来放置我们的接口请求然后就可以开始操作了现在request.js里操作先安装axios npm i axios --save import axios from "axios" // 引入axiosimport store from "@/store/index" //引入vueximport { Toast } from "vant" // 引入vant创建axios实例 con

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

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

项目开发流程（简述）确定项目技术栈vue vue.js 2.0vue-cli vue脚手架 3/4vue-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 176

原创多环境变量配置

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

原创 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 141

原创 keep-alive

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

2021-06-02 07:54:27 258

原创事件委托

事件委托就是把子元素的事件都绑定到父元素上 <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 84

原创 var let const 区别

var let const 区别var声明的变量属于函数作用域而let、const声明的变量属于块级作用域var存在变量提升而let conts没有var变量可以重复声明而在同一个块级作用域 let变量不能重新声明 const不能修改并且let存暂时性死区 console.log(a) var a=10 //后台打印 undefinedconsole.log(a)let a=10// 报错 ‘Uncaught ReferenceError: Cannot access ‘

2021-05-30 21:37:55 79

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

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

2021-05-30 20:18:24 102

原创 call/apply/bind

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

2021-05-28 08:05:38 97

原创原型、原型链

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

2021-05-27 08:17:23 102

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

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

2021-05-27 07:57:33 112

原创数组常用方法（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); // 6pop() ：在数组末尾删除一个元素，一次加粗样式只能删除一个，返回值删除的元素； let arr = [1,2,3,4] newarr=arr.pop() .

2021-05-26 07:51:08 156

原创为数组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 68

原创数据类型判断

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

2021-05-25 08:16:06 71

原创 js数据类型

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

2021-05-25 07:43:36 57

原创深拷贝

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

2021-05-24 08:17:24 129

原创 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 492

原创 vuex (概念、几部分组成、map高级语法、数据持久化)

vuex (概念、几部分组成、map高级语法、数据持久化)vue是一个专门为vue.js应用程序开发的状态管理模式，可以分为这5大部分state：数据存放mutations：唯一可操作 state 里的数据地方actions：异步操作stategetters：计算属性（可缓存）modules：模块化开发，每个模块拥有自己的 state、mutation、action、getter创建：首先在根目录下创建一个文件夹 store里面创建index.jsimport Vue from

2021-05-23 19:24:17 152

原创 vue生命周期函数

vue生命周期函数分为8个阶段beforeCreate阶段数据和元素都为undefindcreated vue的实例对象数据有了但是还没有元素brforeMount vue的数据和元素都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换mounted vue实例挂载完成，data.message成功渲染beforeUpdate、updated 数据更新时会触发beforeDestory对data的改变不会再触发周期函数此时vue实例已经解除了事件监听以及和d

2021-05-21 09:22:19 126

原创 vue的组件通信

vue的组件通信（分为三种：父传子、子传父、兄弟组件通信）父传子：//在父页面<template> <div class=""> <child1 :sendData="brand" ></child1> </div></template><script>import child1 from '../components/sona'export default { data() {

2021-05-20 08:12:12 96

原创 ## 黑马优购商城

黑马优购商城首页主要就是轮播组件和搜索组件剩下的就是布局轮播我们可以用微信小程序的官方文档里swiper布局重要的一点就是楼梯布局：先渲染外层在在里面渲染向对应的children数据还有就是跳转：wx.navigateTo （有返回键，不可以跳转到tabBar页面）switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）列表页首先分为左右两部分渲染最重要的是左右两部分都是有滚动轴的各不影响滚动轴两个关键点给父级1、 overflo

2021-05-18 10:23:35 967

原创小程序发布流程

小程序发布流程点击上传按着它给的提示完成上传点击提交审核前往填写填写基本信息还可以添加开发者然后前往发布输入小程序审核信息点击提交发布 1-7天审核期弹出二维码，手机扫描，点击发布官网最终状态微信，打开小程序，搜索 2002画板。就可以使用了 ...

2021-05-17 11:17:33 67

原创小程序支付流程

小程序支付流程点击结算 payall(){ //点击结算事件 if(this.data.totalnum==0){ // 如果没有商品 return wx.showToast({ icon:'none', title: '你还没有添加物品', }) return } if(!this.data.address.userName){ // 如果没有收货人...

2021-05-17 08:28:10 106

原创小程序授权登陆流程

小程序授权登陆流程点击登录跳转登录页面在该html里 <button type="primary" open-type="getUserInfo" bindgetuserinfo="getUserMes">登录</button> getUserMes(e){ let userMesg=e.detail // e.detail 里有我们要的用户详细数据 wx.setStorageSync('userMes'...

2021-05-16 20:58:34 86

原创 promise封装wx.request()

promise封装wx.request() 在根目录下新建一个文件夹，里面放一个api.js http.js request.js request.js api.js 这里面就是你存放各种接口 http.js阿尔法

2021-05-16 19:32:49 54

原创微信小程序———收藏

微信小程序———收藏当我们到详情页面时首先从本地那到数据看收藏的数据里面是否有本条数据有的话就需要把收藏图标点亮 css里写一个类名然后就是神奇的操作了 data:{ pric: '', collect: false,}onLoad: function (options) { // 生命周期函数--监听页面加载wx.request({ url: url, ...

2021-05-14 21:17:39 655

原创微信小程序获取用户收货地址

微信小程序获取用户收货地址当你点击获取收货地址的时候然后就是秀表演的时候了（许多方法都封装了） asyncWx里的封装 export const getSetting=()=>{ //获取权限 return new Promise((resolve,reject)=>{ wx.getSetting({ success(res){ resolve(res) },fail(res){ ...

2021-05-13 22:02:41 488

原创微信小程序原生上拉加载，下拉刷新

微信小程序原生上拉加载，下拉刷新 data里所需的数据在onPeachBottom里操作 (上拉加载)onReachBottom: function(){this.totalpage=Math.ceil(this.totalnum/this.data.supbdo.pagesize) //总页数=取整（总条数/每页条数）if(this.totalpage==this.data.supbdo.pagenum){ wx.showToast({ ...

2021-05-11 14:40:01 285

L_squan的博客