经验总结
happy任
一只野生web开发者。
展开
-
Vue3.2+Vite+ts+element-plus+pinia搭建完美前端工程化项目
Vue3.2+Vite+ts+element-puls+pinia搭建前端项目原创 2022-04-13 09:45:08 · 1821 阅读 · 0 评论 -
超实用的前端强缓存与协商缓存
超实用的前端强缓存与协商缓存一、区别强缓存:缓存后完全不向服务器发起任何请求,只在缓存时间过期后才对服务器发起请求,响应码为 200 (from memory cache),即从内存中进行加载资源,请求时间为0ms以下协商缓存:请求时服务器根据请求头If-None-Match和If-Modified-Since来判断请求的资源有没有被修改过(1)如果文件被修改过,则重新请求该文件,响应码为200,该文件从服务器重新下载进行加载,影响加载速度(2)如果文件没有被修改过,则不下载该文件,响应码为原创 2022-02-17 15:30:07 · 1570 阅读 · 0 评论 -
升级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 阅读 · 0 评论 -
H5页面性能优化
sidebarDepth: 2collapsable: trueh5页面性能优化该部分内容主要整理了h5性能优化方案及常用工具的使用优化方案1、资源加载1. 首屏加载 即在可见的屏幕范围内,内容展现完全,loading进度条消失2. 按需加载首先要明确,按需加载虽然能提升首屏加载的速度,但是可能带来更多的界面重绘,影响渲染性能,因此要评估具体的业务场景再做...原创 2020-04-13 08:44:58 · 3649 阅读 · 0 评论 -
移动端自适应布局
一、前言 一般在做移动端过程中,常用的有rem布局、px转rem工具的使用,本文将针对vue项目介绍一种px转vw布局的实现方案。 本文所用脚手架为Vue-cli搭建的,如何搭建请看作者的另一篇文章:Vue-cli3搭建Vue项目二、正文 要想实现px转vw的自动转化,需要在项目中自少引入如下4个依赖 1、使用npm安装如下依赖npm inst...原创 2020-03-17 14:17:54 · 627 阅读 · 0 评论 -
Vue项目兼容IE的placeholder
一、前言 最近在做项目中的兼容性处理,由于项目是SPA项目,所以对于网上给出的第三方插件解决方案不能满足项目需求。 实现思路:通过vue自定义指令的形式实现IE9及以下的placeholder兼容。二、正文 由于项目中使用到了elementui 对于elementui组件也做了单独处理,代码如下:var supportIE = { install:fun...原创 2019-12-05 13:58:00 · 1583 阅读 · 6 评论 -
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 · 7044 阅读 · 5 评论 -
provide与inject实用技巧
一、前言 1、简介:provide与inject是Vue组件开发当中较为实用的功能。 2、用途:主要用于vue高阶组件的开发,本文将介绍一些provide与inject的一些实用技巧。 3、原理: provide用于向子组件(或子组件中的子组件,无限嵌套)提供自身的一些数据,或者将自身所有属性全部提供,但是提供的数据均为非响应式数据。 ...原创 2019-03-18 15:19:27 · 2897 阅读 · 0 评论 -
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 评论 -
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 阅读 · 0 评论 -
记一次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 · 678 阅读 · 0 评论 -
if中的真值判断
一、前言: 在日常写代码过程中,我们总会遇到各种if条件的判断,为了提高我们的判断准确度,故对javascript的if中的真值进行总结:二、正文 1、下列值在if或者3元运算符的?所代表的真值:null //falseundefined //false"" //falseNaN //false0 //false{} //true[] //...原创 2018-11-20 15:28:54 · 2500 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
H5-PostMessage跨域传参
一、前言 postMessage是H5的跨域传参方式,坑比较多,以下为自己亲测可指定ip地址的传参!二、正文1、参数发送方//例如点击1个按钮,打开新的页面document.getElementById("btn").onclick = function () { //打开子页面,指定传参ip地址 var newWindow = windo...原创 2018-09-10 15:00:05 · 847 阅读 · 0 评论 -
Vue-cli3使用manifest设置页签logo
一、前言 Vue-cli3中使用manifest进行部分页面功能的管理。最近在项目中需要修改网页的logo,按照常规方式改了半天,发现没有生效,经过踩坑以及网上各路大神的帮助,成功修改了页签logo。二、正文1、manifest简单示例{ "name": "web", "short_name": "web", "icons": [ { "sr...原创 2019-04-28 16:36:29 · 3918 阅读 · 2 评论