- 博客(36)
- 收藏
- 关注
RSS订阅原创 Vue3.2+Vite+ts+element-plus+pinia搭建完美前端工程化项目
Vue3.2+Vite+ts+element-puls+pinia搭建前端项目
2022-04-13 09:45:08
1818
原创 超实用的前端强缓存与协商缓存
超实用的前端强缓存与协商缓存一、区别强缓存：缓存后完全不向服务器发起任何请求，只在缓存时间过期后才对服务器发起请求，响应码为 200 (from memory cache)，即从内存中进行加载资源，请求时间为0ms以下协商缓存：请求时服务器根据请求头If-None-Match和If-Modified-Since来判断请求的资源有没有被修改过(1)如果文件被修改过，则重新请求该文件，响应码为200，该文件从服务器重新下载进行加载，影响加载速度(2)如果文件没有被修改过，则不下载该文件，响应码为
2022-02-17 15:30:07
1567
原创 微前端落地实践
Vue微前端架构落地方案前言微前端架构是方便企业级后端管理系统的更加灵活、解耦性高的新型前端架构，至于具体落地配置如下一、初始化主应用这是一个典型的vue-cli创建的项目，需要安装 qiankun这个微前端包{ "name": "qiankun-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli
2021-02-01 13:51:51
397
原创 使用requestAnimationFrame实现节流
使用requestAnimationFrame实现节流requestAnimationFrame方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。这个函数就是修改DOM样式以及反映下一次重绘有什么变化的地方。标记位 每50ms触发一次let enabled = truefunction expensionFunction() { console.log('exec!')}window.addEventListener('scroll', () => { if (en
2020-12-29 13:58:33
724
1
原创 升级https中的http请求为https
https协议中自动升级http协议 -> https一、前言最近在项目中发现在https中调用http接口会失败，原因是https的限制解决办法如下根据web服务器的协议自动升级http请求// https协议自动升级http请求到httpsif (window.location.protocol === 'https:') { const httpsMeta = document.createElement("meta") httpsMeta.setAttribute("h
2020-09-10 10:48:07
579
原创 TypeScript进阶实战
typescript泛型typescript泛型是较难理解的点，此文为记录泛型的各种应用场景1、联合类型 & 类型保护// 联合类型 & 类型保护interface Bird { fly:boolean; sing: () => {}}interface Dog { fly: boolean; bark: () => {}}// 联合类型只会提示相同属性function trainAnimal (animal: Bird | Dog)
2020-05-12 16:53:07
464
原创 Vue3.0+vue-router-next+vuex4.0+typescript项目搭建
Vue3.0Vue3.0是2020年4月刚刚发布了beta版本的全新Vue版本项目地址:https://github.com/kaiqiangren/vue-next-ts-preview一、Vue3.0与Vue2.0的对比:优点：将Vue内部的绝大部分api对外暴露，使Vue具备开发大型项目的能力，例如compile编译api等webpack的treeshaking支持度友好...
2020-04-29 15:54:28
11074
8
原创 H5页面性能优化
sidebarDepth: 2collapsable: trueh5页面性能优化该部分内容主要整理了h5性能优化方案及常用工具的使用优化方案1、资源加载1. 首屏加载 即在可见的屏幕范围内，内容展现完全，loading进度条消失2. 按需加载首先要明确，按需加载虽然能提升首屏加载的速度，但是可能带来更多的界面重绘，影响渲染性能，因此要评估具体的业务场景再做...
2020-04-13 08:44:58
3647
原创 H5移动端常见问题
h5 常见问题1. H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面一、HTML 页面结构// width 设置 viewport 宽度，为一个正整数，或字符串 'device-width'// height 设置 viewport 高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale 默认缩放比例，为一个数字，可以带小数// mi...
2020-04-13 08:43:19
2173
原创 移动端自适应布局
一、前言 一般在做移动端过程中，常用的有rem布局、px转rem工具的使用，本文将针对vue项目介绍一种px转vw布局的实现方案。 本文所用脚手架为Vue-cli搭建的，如何搭建请看作者的另一篇文章：Vue-cli3搭建Vue项目二、正文 要想实现px转vw的自动转化，需要在项目中自少引入如下4个依赖 1、使用npm安装如下依赖npm inst...
2020-03-17 14:17:54
626
原创 Vue项目兼容IE的placeholder
一、前言 最近在做项目中的兼容性处理，由于项目是SPA项目，所以对于网上给出的第三方插件解决方案不能满足项目需求。 实现思路：通过vue自定义指令的形式实现IE9及以下的placeholder兼容。二、正文 由于项目中使用到了elementui 对于elementui组件也做了单独处理，代码如下：var supportIE = { install:fun...
2019-12-05 13:58:00
1583
6
转载 前端性能监控利器-performance
一、前言 最近在阅读Vue源码时，发现了Vue当中使用到了performance的mark&measure方法，针对此api特此深入研究了一下performance的使用方法以及其作用。二、performmance介绍Performance对象里出现了4个属性：1、timing对象提供了各种与浏览器处理相关的时间数据。具体如下表名称 作用（这里所有时间戳...
2019-10-04 12:20:59
1499
原创 Webpack4打包vue项目
一、前言 本项目为个人对webpack4的不断探索，项目地址https://github.com/kaiqiangren/vueWebpack/tree/master 请下载项目至你们的本地。二、正文该项目提功2个常用功能，供想要探索webpack4的同学们进行webpack4的学习。 1、npm install2、npm run dev "scr...
2019-05-14 16:31:34
1139
原创 Vue-cli3使用manifest设置页签logo
一、前言 Vue-cli3中使用manifest进行部分页面功能的管理。最近在项目中需要修改网页的logo，按照常规方式改了半天，发现没有生效，经过踩坑以及网上各路大神的帮助，成功修改了页签logo。二、正文1、manifest简单示例{ "name": "web", "short_name": "web", "icons": [ { "sr...
2019-04-28 16:36:29
3917
2
原创 抽离ElementUI源码的clickoutside全局指令
一、前言 ElementUI是一款基于Vue的前端优秀开源组件，其框架内部的许多工具都是非常优秀，而且好用的，本文将从中抽离出该框架中的1个非常实用的全局指令。二、正文1、clickoutside.js //点击被插入该指令的元素外的任意空白处，触发指令所绑定的方法。import Vue from 'vue';import { on } from 'element-ui...
2019-03-20 16:32:44
2737
原创 Cookie与VueRouter的history模式结合
一、前言 cookie主要用于存储用户的身份信息等，但是在vue路由中使用history模式，如果不指定path，那么在不同path下是无法共享cookie的。较为实用的办法是在设置cookie时，指定path为根目录，即path=/; 本文主要提供一些cookie的常用方法。二、正文 1、设置cookiefunction setCookie(key,val...
2019-03-20 16:17:16
395
5
原创 provide与inject实用技巧
一、前言 1、简介：provide与inject是Vue组件开发当中较为实用的功能。 2、用途：主要用于vue高阶组件的开发，本文将介绍一些provide与inject的一些实用技巧。 3、原理： provide用于向子组件(或子组件中的子组件，无限嵌套)提供自身的一些数据，或者将自身所有属性全部提供，但是提供的数据均为非响应式数据。 ...
2019-03-18 15:19:27
2895
原创 JavaScript事件使用方法大全（2019）
一、前言 基于事件的异步回调机制是JS这门语言的一大特色，只有打牢基础，我们才能写出优秀的框架，一下为自己整理的较为详细的事件说明，此文会不定期更新。目前还差媒体相关的事件未做总结，后续验证事件的使用方式后，再更新！二、正文鼠标事件 事件 描述 oncontextmenu 点击鼠标右键触发 ...
2019-02-12 15:26:14
592
2
原创 Vue-cli3搭建项目热重载失效-最新解决办法
废话不多说，直接上图：具体问题请看： https://github.com/vuejs/vue-cli/issues/3173#issuecomment-449573901
2018-12-24 15:39:36
6642
原创 记一次IOS与H5-SPA页面的交互经验
一、简介：这是一个 Android&IOS 使用webview嵌套H5页面的项目。二、过程：用户需要在原生界面进行登陆操作，之后将登陆token传递到H5页面的过程，之后H5页面又进行跨域跳转。三、问题：主要集中在与IOS设备的交互，在进入页面1后，再跳转到页面2，导致最后的页面2无法调用IOS的方法。由于生产环境页面1与页面2的域名完全不同，所以由页面1设置的cookie在页面2...
2018-12-21 10:06:44
677
原创 js设计模式-观察者模式
一、前言 发布-订阅模式，即观察者模式。在JavaScript中，使用自定义事件及回调函数的方式来实现这种模式。二、正文 下面代码为1个简单的观察者模式的事件发布-订阅机制 class Event{ constructor(){ //初始化事件缓存 this.cache...
2018-11-30 10:45:51
445
翻译 js运行环境判断
一、前言 在阅读vue2.5+源码时，看到了vue的环境判断的代码，整理总结一下，方便大家在运行环境判断时进行使用。二、正文1、判断浏览器运行环境const inBrowser = typeof window !== 'undefined'2、IE环境const UA = inBrowser && window.navigator.userAgen...
2018-11-27 10:37:38
3019
原创 实用的js深拷贝与浅拷贝
一、前言 1、深拷贝：对象所有属性以及子属性的完全clone，clone后，改变源对象属性，不会影响clone后对象的属性。 2、浅拷贝：对象最外层属性的clone，如果最外层属性值是object类型，则获得源对象属性的引用地址；clone后，如果改变源对象中最外层的属性值，不会对clone对象的属性造成影响，但是如果改变源对象引用地址的属性后，会对clone对象引用的属性值造...
2018-11-21 15:56:00
139
原创 if中的真值判断
一、前言： 在日常写代码过程中，我们总会遇到各种if条件的判断，为了提高我们的判断准确度，故对javascript的if中的真值进行总结：二、正文 1、下列值在if或者3元运算符的？所代表的真值：null //falseundefined //false"" //falseNaN //false0 //false{} //true[] //...
2018-11-20 15:28:54
2500
原创 js高阶函数-节流&防抖函数
一、前言 防抖函数主要用于输入框调用频繁接口等业务场景。 节流函数主要用于需要限流接口调用的业务场景。 二、正文 节流函数//函数节流function throttle(fn, delay = 300) { let timer; //定时器 let firstTime = true;//是否第一次调用...
2018-10-26 15:08:56
632
原创 Vue总线Bus兄弟组件传参
一、前言 使用场景：在vue项目较小的情况，使用bus总线思路来完成vuex的传值功能。二、内容 //bus.jsimport Vue from "vue";const Bus = new Vue();export default Bus;//组件A、组件B中分别引入Busimport Bus from "bus.js的路径";//组件A中绑定事件，来...
2018-10-15 15:13:24
3737
原创 Vue-cli3搭建Vue项目
前言： 前端技术发展迅速，我们只能不断学习！手动滑稽~ nodejs版本建议至少为8.9.0+正文 1、安装 npm install -g @vue/cli 请记住 @vue/cli这个的称呼！ 2、创建 vue create <project name> *选择第一项为默认，下图为自定义配置信息，点击...
2018-09-10 15:48:29
2407
原创 H5-PostMessage跨域传参
一、前言 postMessage是H5的跨域传参方式，坑比较多，以下为自己亲测可指定ip地址的传参！二、正文1、参数发送方//例如点击1个按钮，打开新的页面document.getElementById("btn").onclick = function () { //打开子页面，指定传参ip地址 var newWindow = windo...
2018-09-10 15:00:05
847
转载 PM2进程守护-负载均衡
pm2常用的命令用法介绍原文：https://blog.csdn.net/sunscheung/article/details/79171608pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的,下面我们来看pm2常用的命令用法介绍吧。PM2 （github上的源码）是开源的基...
2018-08-23 10:12:49
4822
原创 npm源地址切换
前言 仅以此进行备忘！正文淘宝镜像地址 npm config set registry https://registry.npm.taobao.orgnpm官网地址 npm config set registry https://registry.npmjs.org...
2018-08-13 13:41:15
10206
原创 完美的响应式布局vw+vh+rem屏幕适配方案！
一、前言根据前面写的 你不知道的CSS单位，进行了一种响应式布局的思考。 视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以完美解决各种屏幕适配问题！单位可参考 ： 你不知道的CSS单位该布局兼容性如下：IE Firefox Chrome Safari Opera iOS Safari Android Browse...
2018-08-07 13:26:26
34597
10
原创 Git与Github
Git与Github前言Git工作流适应现代化开发流程，不会的小伙伴一起学习学习吧。Git常用命令，请参考 ：https://blog.csdn.net/bao19901210/article/details/54630689#t3一、打开Git Bash输入 ssh-keygen -t rsa -C "一般是邮箱地址",密钥类型可以用 -t 选项指定。如果没有指定则默认生...
2018-08-01 15:37:06
167
原创 你不知道的CSS（单位篇）
单位篇兼容性支持:IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome 9.0+ 2.0+ 4.0+ 3.1+ 3.5+ 3.2+ 2.1+ 18.0 一、长度rem:相对长度单位。相对于根元素(即ht...
2018-07-25 14:05:19
1131
原创 Express+Vue+mysql实践
个人尝试的1个小的增删改查功能，请大家多多支持！具体项目请参考 https://github.com/kaiqiangren/VueExpress注:mysql版本为5.7一、前言Express是nodejs环境下的web后端框架，其优点如下:1、非侵入式设计：不会对原生nodejs的模块进行破坏，原生nodejs能用的都可以在express中使用。2、灵活、小巧3、基...
2018-07-25 11:29:29
5359
11
原创 vue2+nodejs+express+mysql+pm2搭建全栈项目
前言： 本项目github地址:https://github.com/kaiqiangren/VueExpress 由于是自己尝试搭建的一个简单的nodejs+vue全栈项目，适用于初探nodejs后端领域的前端er。 本文的mysql部分需要参考另一篇文章： Express+Vue+mysql实践 进程守护及负载均衡相关可查看：https://blog....
2018-07-12 16:00:10
7043
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人