- 博客(42)
- 收藏
- 关注
RSS订阅原创 电商后台管理系统打包上线
实现1、项目优化、打包2、项目上线一、项目优化、打包1、打开vue控制台，项目在serve或build运行阶段会出现报错修改代码。根据ESLint的警告提示更改对应的代码在.prettierrc文件中更改设置"printWidth":200, 将每行代码的文字数量更改为200{ "semi":false, "singleQuote":true, "printWidth":200}2、执行build安装插件（babel-plugin-transf
2021-06-24 20:18:15
403
1
原创 vue中diff算法
Diff算法diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。
2021-06-20 21:12:41
170
原创 函数防抖和函数节流
使用节流防抖函数(性能优化)那么在 vue 中怎么使用呢：在公共方法中（如 untils.js 中），加入函数防抖和节流方法// 防抖export function _debounce(fn, delay) { var delay = delay || 200; var timer; return function () { var th = this; var args = arguments; if (timer)
2021-06-17 21:49:07
184
原创 Vue双向数据绑定
实现原理：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
2021-06-17 08:18:12
90
原创 ifram 优点、缺点
优点：1.iframe能够原封不动的把嵌入的网页展现出来。2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。缺点：1.会产生很多页面，不容易管理。2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上
2021-06-14 20:40:30
73
原创 项目中如何修改element-ui的默认样式 （去除scoped,样式穿透 ＞＞＞ , less/sass : /deep/）
当我们在vue中引入第三方组件库的时候，vue组件中样式的scoped就会成为我们修改样式的阻碍，有以下三种方法修改样式，并且不影响全局样式：1 在样式外新增一个样式不添加scoped<style> .my{ margin: 20px; } .my .el-input__inner{ border-radius: 15px;/* 这个样式起效果 */ }</style><style scoped> .my .el-input__inner{
2021-06-10 19:47:03
198
原创 elemeng-ui 中el-form 表单如何校验
elemeng-ui 中el-form 表单如何校验一、下载安装elementnpm i element-ui -S二、引入在main.js中完整引入element（亦可以使用其他引入方式）三、校验规则1、ElementUI校验规则ElementUI封装了组件el-form来收集、校验和提交数据，其中的rules属性就是用来做数据校验的。ElementUI提供了一些常用的表单验证规则，我们可以直接使用该规则来实现数据校验。rules根据rules给出的规则会对prop中的.
2021-06-08 21:47:17
254
原创 Windows下安装Nginx
了解：Nginx(engine x) 是一个高性能的HTTP和反向代理web服务器，同时也提供了IMAP/POP3/SMTP服务。Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强。安装步骤：下载nginx去官网上下载：http://nginx.org/en/download.html下载后解压，就可以看到以下目录（注：下载解压后，放置解压后的文件夹名字必须是英文不能是..
2021-06-07 11:12:22
290
原创 vue-router 鉴权 守卫
导航守卫使用在建在router实例的地方。全局：import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({ mode:'history', // 路由模式 hash history abstract routes:[ { path:'/index', name:...
2021-06-06 19:30:58
182
原创 vant-ui 按需引入
vant-ui按需引入是最推荐的一种引入方式，减少项目体积。首先安装vantnpm i vant -S（vue2.x的下载方式）npm i vant@next -S （vue3.x的下载方式)安装babel-plugin-import 插件npm i babel-plugin-import -D （babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式）在.babelrc 中添加配置...
2021-06-06 19:14:16
234
原创 axios拦截、api统一管理
简介axios专门用于我们去请求数据，它本身就支持链式的调用，但是我们写项目的时候，每个页面都会发送请求，如果平凡的调用axios会写很多重复的代码，所以我们统一封装一个方法，我们的域名一个项目一般是不会改变的，我们可以把那些不变的都封装在这个方法中。然后在另一个文件统一管理我们的请求接口。方便我们后期阅读和维护。...
2021-06-03 21:43:34
120
原创 多环境变量配置
Ⅰ、什么是多环境变量？我们在vue项目开发中，项目在运行时会根据启动的指令来运行不同的环境，在不同的环境中，我们配置对应所需的变量来满足我们的开发需求，称为多环境变量。环境一般分为开发环境，测试环境，生产环境Ⅱ、作用一个项目的完整流程，包含开发阶段、打包阶段、测试阶段，与之对应的则是不同的环境，因为每个环境的接口域名、webpack 配置都是不同的，所以在打包构建时，我们需要区分这些环境，这时就用到了环境变量。Ⅲ、在配置多环境变量前，需要了解的知识点.env文件是环境配置，会在项目运
2021-06-02 21:38:16
244
原创 webpack配置打包优化
首先先在根目录下配置 vue.config.js 文件1、新建vue.config.js,设置静态资源路径为’./’,否则打包后项目无法运行module.exports = { publicPath: "./"}2、关闭生产环境下的SourceMap映射文件,包的大小减少80%module.exports = { productionSourceMap: false,}3、跨域配置module.exports = { devServer: { open:.
2021-06-02 21:10:37
668
1
原创 去哪儿项目流程
1. 确定项目技术栈2. 搭建项目yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）1、从0搭建， ①.指令vue create projectname.....cd projectnameyarn installnpm run serve ②...
2021-06-02 21:00:18
139
2
原创 transition
CSS3transition属性定义和用法:transition 属性是一个简写属性，用于设置四个过渡属性：1、transition-property 规定应用过渡效果的 CSS 属性的名称。（当指定的 CSS 属性改变时，过渡效果将开始）提示：过渡效果通常在用户将鼠标指针浮动到元素上时发生。语法：transition-property: none|all|property;2、transition-duration规定完成过渡效果需要花费的时间（以秒或毫秒...
2021-06-01 21:07:31
468
原创 keep-alive
keep-alive概念：keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用：在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。对生命周期函数变化：被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用）与 deac.
2021-06-01 20:33:41
85
原创 事件委托（事件代理）
1.什么是事件委托呢？如果子元素身上绑定了大量相同的事件，我们尽量采用事件委托的方式，把所有子元素的自己的事件委托给父级2.事件委托的原理？事件冒泡3.为什么使用事件委托？传统的for循环绑定事件，会增加dom操作(事件)，影响页面性能，采用事件委托就是把所有的事件基于一个元素上4.事件委托和传统事件绑定的优势？传统的事件绑定对新增元素不起作用，而事件委托起作用；传统的时间绑定，有多少元素js就需要绑定多少事件，而事件委托只需要一个事件js中事件委托：<ul id
2021-05-30 20:32:15
119
原创 闭包
闭包1.什么是闭包？就是函数中套了一个函数，内层函数可以访问外层函数中的变量。vue中的data就是一种闭包的形式。闭包作为回调函数，可以实现函数的复用。2.优缺点：优点：1.长期驻留内存，可以缓存数据。 2.可以重复使用变量，不会造成变量污染。缺点：1.占内存。 2.对捕获的变量是引用，不是复制。 3.父函数每调用一次会产生不同的闭包。3.闭包的两种形式①.函数作为返回值如上图所示：匿名函数访...
2021-05-30 20:14:06
865
3
原创 var let const 区别
var let const 区别注：let和const是ES6提出的1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错(引用错误)。console.log(f) //undefinedvar f = 1 ;console.log(g) //ReferenceError: g is not
2021-05-30 19:45:14
54
原创 作用域、作用域链、自由变量、变量提升
作用域##作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域。全局作用域就是Js中最外层的作用域函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等)。...
2021-05-27 19:18:49
58
原创 new的过程
new的过程function Foo(name,age){ this.name=name; this.age=age;}Foo.prototype.fn=function(){ console.log(this.name)}let a=new Foo('张三',20);console.log(a); //Foo {name:'张三';age:20}//new Foo (){ //第一步：创建对象 var obj={}; //第二步：原型赋值 obj.__pro
2021-05-27 19:13:22
36
原创 call、apply和bind的区别以及this的指向
【在js中this不是固定不变的，它会随着执行环境的改变而改变。this取什么值，是在执行时确认的，定义时无法确认。】this的调用大概分为五种场景： 1.浏览器里，在全局范围内的this 指向window对象； 2.在函数中，this永远指向最后调用他的那个对象； 3.构造函数中，this指向new出来的那个新的对象； 4.Call、apply、bind中的this被强绑定在指定的那个对象上； 5.箭头函数中this比较特殊,箭头函数this为父作用域的this，不...
2021-05-27 07:46:49
129
原创 javaScript的原型与原型链
原型：1.prototype每一个函数都有一个prototype属性，称之为显示原型。2.__proto__每个实例对象都有一个__proto__，称为隐式原型。这个对象的__proto__指向构造函数的显示原型。//创建一个构造函数，表示一个类function Person(name,age){ this.name=name; this.age=age;}Person.prototype.color="yellow";//实例对象let one=n.
2021-05-26 19:15:23
93
1
转载 数组常用方法（es4、es5、es6）
数组方法：一、es4中1.sort()数组排序可以没有参数使用：将数组中所有的元素都看作字符型数据来进行排序var num=[10,5,4,0,29,91,52,73,1];console.log(num);num.sort(function(a,b){ return a-b; }) //将num数组的元素按照数值关系升序排列console.log(num); //[0,1,4,5,10,29,52,73,91];2.reverse()数组翻转 var x=[10...
2021-05-25 21:04:32
161
原创 arguments
arguments是一个伪（类）数组，指的是函数的参数集合，不能调用数组的方法。1.arguments的特点：①.只在函数中存在（箭头函数除外）。②.有长度length，可通过下标index访问。③.是一个集合，存储了我们传入的所有实参。2.arguments方法（转换成真的数组可以使用个数组的方法）：①.展开运算符：function fn (){let arr = [...arguments];// arr 就是一个数组}fn(1,2,3)②.call()
2021-05-25 20:07:04
54
原创 数据类型判断
数据类型判断四种方法typeof、instanceof、constructor、Object.prototype.toString.call()、jquery.type()一、typeoflet str = ""console.log(typeof str);判断一个变量是什么类型的。注意：尽量用来判断简单数据类型，除了null，null判断出来是object，判断object和array都会返回object。二、instanceofvar c= [1,2,3];cons
2021-05-24 21:26:09
113
原创 js数据类型
js数据类型基本数据类型（又称值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增独一无二的值）和BigInt（es10新增）；引用数据类型：Object（Object里包含Array、 function、Date、RegExp)。1、基本数据类型基本数据类型都存储在栈里，且基本数据类型都是深拷贝。2、引用数据类型。引用数据类型都存储在堆里，在栈中有一个id指向堆中的数据。当拷贝引用对象时，拷贝的只是栈中的id，并...
2021-05-24 21:20:20
32
原创 深拷贝
深拷贝一、什么是深拷贝？（先简单理解概念）深拷贝是指，拷贝对象的具体内容，深拷贝在计算机中开辟一块新的内存地址用于存放复制的对象。源数据改变不会影响复制的数据。二、为什么要使用深拷贝？我们希望在改变新的数组（对象）的时候，不改变原数组（对象）arr=[100,[{a:'hello'},{b:"world"}],{c:"123456789"}];//判断修改的是不是'object'或者null,如果不是object或者null那么直接返回f...
2021-05-23 20:38:24
5168
原创 vue-router
vue-router路由原理路由就是用来解析URL以及调用对应的控制器，并返回从视图对象中提取好的网页代码给web服务器,最终返回给客户端。Ⅰ、两种模式：hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅hash 符号之前的内容会被包含在请求中，如 http://ww..
2021-05-23 20:20:06
197
原创 vuex
vuex：大概分为：概念、几部分组成、map高级语法、数据持久化一、概念是一个专为vue.js开发的状态管理器，采用集中式存储的所有组件状态，通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护。二、组成state：存储状态（变量），例如你要存放的数据。 getters：类似于共享属性，可以通过this.$store.getters来获取存放在state里面的数据，可理解为state的计算属性。 mutations：修改状态，并且是同步的。唯一能改变st..
2021-05-21 21:07:40
50
原创 Vue生命周期
vue生命周期vue的生命周期分为8个阶段：实例创建前后、组件挂载前后、更新前后、销毁前后。实例创建前后：beforeCreated()——实例创建前。只有一些实例本身的事件和生命周期函数，vue实例的挂载元素DOM和数据对象 data 都为undefined，还未初始化。created()——实例创建后。是最早使用data和methods中数据的钩子函数；但vue实例的数据对象data有了，DOM元素还没有。组件挂载前后：beforeMount——组件挂载前。指令已经解析完毕，
2021-05-20 16:27:57
199
原创 vue组件通信
vue组件通信(常用父传子、子传父以及兄弟组件间的通信)一、父传子在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:["属性名"] props:{属性名:数据类型}。父组件中写并引入注册好的子组件名称：<template> <div class=""> <h1>parent页面</h1> <child .
2021-05-19 20:32:02
62
原创 黑马优购项目讲解
黑马优购项目讲解：准备项目前期准备工作，把项目划分为四个主体部分：首页、分类、购物车以及我的页面。1.准备工作：封装公共组件及request请求：1-1.公共组件的封装在根目录下创建components文件，放置封装好的公共组件1-2.接口api的请求和对使用promise对request的封装...
2021-05-18 09:41:47
749
1
原创 uni-app教程一（项目创建、tabbar配置、运行）
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app教程一目录：简介： 官网： 创建第一个 uni-app项目 项目目录 创建页面 导入静态资源包（图片） 页面tabbar配置 运行运行效果图官网：https://uniapp.dcloud.io/...
2021-05-17 21:18:08
170
原创 微信小程序上线发布流程
上线发布流程：上传代码 提交审核 发布版本发布前先配置服务器域名白名单1.在小程序右上角中上传代码输入版本号，项目备注,点击上传：传后提示，点击确定上到这里我们开发代码这块就完工了，剩下的就是去微信小程序平台进行发布了。2.进行提交审核进入小程序官网：https://mp.csdn.net/editor/html/1169174312-1.进入版本管理中找到开发版本，点击提交审核首次提交审核，会弹出如下提示，点击前往填写...
2021-05-17 10:33:07
2310
原创 小程序支付流程
小程序支付流程：想要获取授权呢，先写一个button按钮，这个按钮上个绑定一个属性,然后就是绑定一个事件，这个事件相当于我们的点击事件，这个事件中，有事件对象，这个事件对象中有我们需要的参数，然后我们使用小程序内封装好的方法wx.login()方法，这个方法会返回一个code，然后我们就可以拼装一个对象作为参数去请求登录接口了。这个登录接口登录成功呢会返回一个token。然后使用本地存储保存一下。在让用户返回到支付页面就可以了。 // 获取授权 hqsq(e) { console.l
2021-05-16 20:28:56
95
原创 小程序授权登陆流程
小程序授权登陆流程：1、当用户进入微信小程序时，首先我们先判断用户是否授权过此小程序wx.getSetting({//wx.getSetting方法获取用户的当前设置（查看是否授权） sucsess:res=>{//调用成功的回调函数 if (res.authSetting['scope.userInfo']) {//如果res.authSetting['scope.userInfo']有值时，代表已授权 .
2021-05-16 20:18:06
4325
原创 小程序如何写收藏、分享、客服功能
收藏：商品收藏1. 页面onShow的时候加载缓存中的商品收藏的数据2.判断当前商品是不是被收藏1.是改变页面的图标3点击商品收藏按钮1. 判断该商品是否存在于缓存数组中2. 已经存在把该商品删除3. 没有存在把商品添加到收藏数组中存入到缓存中即可Page({ data: { detSwiper: {}, // 商品是否被收藏 flag: false, },...
2021-05-16 19:56:39
143
原创 小程序下拉刷新，上拉加载更多
实现原理：1、下拉刷新：由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新。2、上拉加载更多（页面上拉触底事件）：新获取的数据追加到data{}内的原数据即可。由于小程序数据是实时渲染，小程序在保持原数据显示不变的基础上，自动追加渲染显示新数据。下拉刷新：首先在我们要使用下拉刷新页面的json配置中写入"enablePullDownRefresh":true, // 开启下拉刷新"backgroundTextStyle":"dark" // 改变刷新时
2021-05-16 19:41:34
342
原创 小程序如何获取收货地址的流程
小程序如何获取收货地址的流程：首先注册点击事件，用微信小程序自带的APIwx.chooseAddress( )获取用户收货地址。调起用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址，它会返回一个成功的回调函数wx.chooseAddress({ success (res) { console.log(res.userName) console.log(res.postalCode) console.log(res.provinceName) co.
2021-05-16 19:24:38
844
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人