- 博客(43)
- 收藏
- 关注
RSS订阅原创 电商后台管理项目的优化与上线
项目优化与上线项目优化策略实现步骤：1、生成打包报告，根据报告优化项目①手动生成（命令行加参数）②通过可视化的UI面板2、为开发模式与发布模式指定不同的打包入口3、通过 vue.config.js 修改 webpack 的默认配置4、第三方库启用CDN5、通过 CDN 优化 ElementUI 的打包6、路由懒加载7、首页内容定制项目上线1、通过node创建服务器2、开启GZIP压缩3、配置https服务4、使用pm2管理应用项目优化策略实现步骤：1、生成打包报告，根据报告优化项目①手动生成（命令行加
2021-06-23 12:00:04
352
1
原创 [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”
前两天在使用ECharts图表的时候遇到了以下报错：报错原因：echarts的引入方式错误正确的echarts引入方式：let echarts = require('echarts')这样问题就得以解决了。
2021-06-21 11:28:08
1029
原创 vue-双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observer的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每
2021-06-16 18:58:02
210
原创 ifram优缺点
HTML5不再支持使用frame，iframe只有src 属性一、使用iframe的优缺点优点:1、程序调入静态页面比较方便;2、页面和程序分离;缺点：1、iframe有不好之处：样式/脚本需要额外链入，会增加请求。另外用js防盗链只防得了小偷，防不了大盗。2、iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!如果是动态网页，用include还好点！但是必须要去除他的< html>&l.
2021-06-11 15:08:31
186
原创 js异步中的宏任务和微任务
宏任务包括：setTimeout setInterval Ajax DOM事件微任务：Promise async/await微任务比宏任务的执行时间要早异步和单线程异步和单线程是相辅相成的，js是一门单线程脚本语言，所以需要异步来辅助异步和同步的区别:异步不会阻塞程序的执行。同步会阻塞程序的执行。同步异步问题首先，你要知道javascript是单线程语言。js任务需要排队顺序执行，如果一个任务耗时过长，后边一个任务也的等着，但是，假如我们需要浏览新闻，但新闻包含的超清图片加载很慢，总不.
2021-06-10 21:20:47
174
1
原创 如何在项目中修改element-ui的默认样式
平时我们在项目中经常会用到element-ui里的组件比如导航栏，表格，按钮等，有时候会根据需要修改element-ui的默认样式。
2021-06-10 16:58:14
563
原创 使用elemeng-ui 中el-form 表单校验的三种方式
表单校验是注册环节中必不可少的操作，表单校验通过一定的规则来确保用户提交数据的有效性，能够防止用户因为操作有误、填写错误数据或者恶意提交数据而占用服务器资源。
2021-06-09 15:57:56
3506
3
原创 webpack打包优化
项目开始时webpack配置vue-cli3以后，需要自己在项目根路径下创建vue.config.js文件来修改webpack配置。一、 配置 proxy 跨域使用vue-cli开发项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy来解决跨域问题：module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060, // 端口号
2021-06-08 11:16:41
110
2
原创 使用gitee生成ssh key 时无法生成（精华版解决方法）
当我们需要操作git生成 ssh 密钥时，遇到一下问题：一、id_rsa.pub 这个文件打不开二、Generating public/private rsa key pair.Enter file in which to save the key (C:\Users\ASUS/.ssh/id_rsa):解决方法如下：接着在cmd里输入 type id_rsa.pub接着直接在cmd里面复制内容就可以去粘贴使用了...
2021-06-07 17:19:25
841
原创 关于vant--ui按需引入的详解
一、安装vant–uinpm install vant --save-dev //安装vantnpm install element-ui --save-dev //安装element-ui二、全局引入// 在src/main.js进行全局引入import Vant from 'vant'import 'vant/lib/vant-css/index.css'Vue.use(vant)三、按需引入import Button from 'vant/lib/button'import
2021-06-03 16:30:39
795
原创 vue-router的鉴权和守卫(精华版）
vue-router一、怎么理解vue-router二、实现鉴权的方式分两种：1、通过vue-router addRoutes 方法注入路由实现控制2、通过vue-router beforeEach 钩子限制路由跳转三、路由守卫第一种是全局的守卫 守卫所有的页面第二种是组件级守卫 守卫某一个页面1、路由进入之前2、路由更新之前3、路由离开之前第三种是单个路由独享的钩子函数一、怎么理解vue-router路由导航守卫又叫路由的钩子函数又叫路由的生命周期函数就是路由 从开始进入路径到跳转结束这个过程中
2021-06-02 16:05:03
552
1
原创 axios拦截和api统一管理
axios拦截器axios拦截分为请求拦截和相应拦截。首先要安装axios，一般我会在项目的src目录中，新建一个network文件夹,作为我们的网络请求模块，然后在里面新建一个http.js和一个api.js文件和一个reques.js。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口url。一、对axios进行基础配置import axios from 'axios'; // 该处引入axios模块// 构建axios实例const instance =
2021-06-02 11:53:53
179
1
原创 多环境变量配置详解
vuecli3.0搭建的vue项目。配置多个环境变量新建两个或多个文件，和package.json同级；例如：.env.dev，.env.prod通过 npm run serve 启动本地 , 执行 development通过 npm run stage 打包测试 , 执行 staging通过 npm run build 打包正式 , 执行 production "scripts": { "serve": "vue-cli-service serve --open", "stage":
2021-06-02 10:24:45
850
原创 去哪儿项目开发流程
一、准备项目所需技术栈vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack二、项目搭建> yarn，npm(cnpm) 包管理工具yarn add axios -Scnpm install axios -S-S: --save-dev 生产环境的依赖 （dependencies）-D: --dev 开发环境的依赖 （devDependencies）①从零开始搭建要执行的命令行vu
2021-06-02 10:12:16
512
2
原创 关于transition过渡的详解
一、transition的作用transition组件用于控制组件、元素的显示消失切换效果。二、定义过渡类名【初始状态】 v-enter【过渡状态】 v-enter-active【结束状态】 v-leave-to【过渡状态】 v-leave-active/*初始状态*/.animation-enter{ opacity:0; transtion:translateX(-400px) rotate(360deg); /* 初始状态： 透明度为0 div左
2021-06-01 21:14:51
7748
2
原创 关于Keep-alive的认识和具体用法
一、keep-alive是什么keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOMkeep-alive 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们keep-alive可以设置以下属性：include - 字符串或正则表达式。只有名称匹配的组件会被缓存exclude - 字符串或正则表达式。除了名称匹配的组件不会被缓存，其他组件都会被缓存max - 数字。最多可以缓存多少组件实例二、keep-alive使用场景当我们在切换路由需要保存失
2021-06-01 20:42:23
1280
原创 关于事件委托的理解
事件委托的理解：事件委托：（也叫事件代理）就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。JS里的事件委托：就是当事件触发时，把要做的事委托给父元素来处理。传统js下的事件委托//html中的代码<ul> <li class="item">item 1</li> <li class="item">item 2</li> <li class="item">item 3</li> <
2021-05-30 21:15:04
448
原创 关于闭包的理解
什么是闭包：闭包就是能够读取其他函数内部变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。闭包的应用场景：1、函数作为参数被传递时使用2、函数作为返回值被返回时使用3、实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改等操作，没法对data直接更改，达到所谓隐藏数据的效果；jquery就利用了这一特性，必须调用$.ajax()才能访问内部属性方法。4、功能封装时使用5、函数防抖、函数节流6、单例模式闭包的优点：1
2021-05-30 20:44:20
106
原创 var、let和const的区别
var、let和const的区别：1、var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。2、let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。3、const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。...
2021-05-30 20:25:05
115
原创 关于深拷贝的详细理解
一、什么是深拷贝深拷贝作用在引用类型上！例如：Object，Array深拷贝不会拷贝引用类型的引用，而是将引用类型的值全部拷贝一份，形成一个新的引用类型，这样就不会发生引用错乱的问题，使得我们可以多次使用同样的数据，而不用担心数据之间会起冲突。二、为什么要使用深拷贝我们希望在改变新的数组（对象）的时候，不改变原数组（对象）三、如何进行深拷贝1、for循环2、使用json.stringify和json.parse实现深拷贝JSON.stringify把对象转成字符串，再用JSON.parse
2021-05-23 21:48:23
1401
原创 关于Vue-router的基本见解
一、路由是什么路由就是用来解析URL实现不同页面之间的跳转二、两种路由模式hash模式：在浏览器中符号的“#”，以及#后面的字符称之为hash，用window.location.hash读取；特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。hi
2021-05-23 21:00:41
58
原创 针对Vuex的详细操作
1、什么是vuexvuex是一个专门为vue.js应用程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2、vuex由五部分组成state：数据mutations：只能通过它来改变数据actions：异步操作getters：类似于vue组件中的计算属性，对state数据进行计算（会被缓存）modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter3、如何使用
2021-05-23 20:04:32
80
原创 Vue生命周期函数详解
Vue生命周期函数详解1、什么是 vue 生命周期2、生命周期过程图3、一共分8个阶段4、另外3种周期函数5、created和mounted的区别6、Vue第一次页面加载会触发哪几个钩子函数？7、DOM 渲染在哪个周期中就已经完成？8、简述每个周期适合的场景1、什么是 vue 生命周期vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件的数据管理和DOM渲染两大重要功能。2、生命周期过程图3、一共分8
2021-05-21 00:52:20
226
1
原创 Vue组件通信的方式
Vue组件之间的通信一、父组件传到子组件二、子组件传到父组件三、兄弟组件之间的通信以下介绍三种比较常用的组件通信一、父组件传到子组件二、子组件传到父组件三、兄弟组件之间的通信...
2021-05-20 23:54:24
73
原创 黑马优购项目答辩
项目大致流程前言一、配路由二、封装wx.request三、封装使用次数多的组件四、首页五、搜索页面六、分类页面七、列表详情页八、商品详情页九、购物车页面十、我的页面十一、项目发布总结前言本人根据黑马优购项目进行总的概括，可能还不够全面，仅供参考一、配路由在位于根目录下的app.json里把页面路由配置好在tabbar里把底部tab切换配置好，实现页面切换二、封装wx.request三、封装使用次数多的组件四、首页五、搜索页面六、分类页面七、列表详情页八、商品详情页九、购物车页面
2021-05-20 23:02:53
667
原创 微信小程序报错Cannot read property ‘forceUpdate‘ of undefined
uni-app运行到小程序未配置APPID，系统提示APPID没有关联，导致强制更新错误。解决方法如下：粘贴完成后重新运行到小程序即可
2021-05-18 19:00:51
668
原创 HbuilderX运行到微信开发者工具时报错提示：fail to open IDE
出现如上图所示错误时，是因为微信小程序的APPID没有在HbuiderX里进行设置我们在HbuiderX里打开项目的manifest.json文件，点击微信小程序配置进行AppID设置提示：AppID在下面网址（小程序官网）的开发管理中的开发设置里找https://mp.weixin.qq.com设置好AppID后错误也就解决了！...
2021-05-17 20:12:58
4843
2
原创 微信小程序发布流程
发布流程大致分为三个步骤：1、上传代码2、提交审核3、发布版本注意：发布之前配置服务器域名白名单1、上传代码：点击上传按钮输入后点击上传上传成功图片接下来前往微信小程序平台2、提交审核进入微信小程序的官网:https://mp.weixin.qq.com点击版本管理——>开发管理——>提交审核首次提交审核会提示填写信息填写小程序基本信息1、点击填写/font>2、填写基本信息3、添加开发者点击编辑点击添加成员，填写信息4、添加体验
2021-05-17 11:33:55
364
原创 微信小程序支付流程
// pages/pay/index.jsPage({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({ paymoney:options.paymoney, body:options.body, }) }, pay: function (e) { //获取金额 //获取微信id var openid = wx.getStorageS
2021-05-16 21:56:57
129
2
原创 小程序授权登录流程
设置button用getUserInfo属性去触发wxml部分<button class="button" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>js部分 bindGetUserInfo(e) { if (e.detail.userInfo == undefined) { console.log("用户已取消授权"); } else
2021-05-16 21:46:11
109
原创 小程序获取收获地址流程
小程序使用API：wx.chooseAddress获取微信地址，显示用户编辑收货地址原生界面，并在编辑完成后返回用户选择的地址1、获取地址的权限为scope。只有用户确认允许授权才能获取微信地址wx.getSetting({ success:(result)=>{ console.log(result); //用户点击确定授权时：authSetting 的scope.address为 true； //用户点击取消时为false，且用户再次获取地址则无任何反应，无法再次获取地址，此时必
2021-05-16 21:36:30
135
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人