![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
黑面狐 sa~
今年只变强,不变秃!
展开
-
html-webpack-plugin因node版本报错问题
const path = require("path")const miniCssEx = require("mini-css-extract-plugin")const htmlWebpackPlugin = require("html-webpack-plugin")const {CleanWebpackPlugin} = require("clean-webpack-plugin")module.exports = { entry: "./src/index.js", out原创 2021-04-27 17:59:18 · 564 阅读 · 0 评论 -
HtmlWebpackPlugin打包报错:TypeError: Cannot read property ‘tap‘ of undefined at HtmlWebpackPlugin.apply
我使用的webpack版本是4 "html-webpack-plugin": "^5.3.1", //替换为 "html-webpack-plugin": "^4.4.1",解决原创 2021-04-26 15:01:50 · 3553 阅读 · 1 评论 -
HTTP头中的Content-Type: text/event-stream;是什么鬼?
1、最近在研究nuxt.js。网上找了个vue的项目,改造为nuxt.js架构的SSR程序在首页直出的时候,发现一个/webpack_hmr/client请求。如图:webpack热更新需要向浏览器推送信息,一般都会想到websocket,但是还有一种方式,叫做Server-Sent Events(简称SSE)。SSE是websocket的一种轻型替代方案。和websocket有以下几点不同:SSE是使用http协议,而websocket是一种单独的协议SSE是单向传输,只能服务端向客户端推原创 2020-12-22 18:27:11 · 10438 阅读 · 2 评论 -
nuxt动态路由配置
1、pages文件结构2、nuxt-link使用<nuxt-link v-for="(val,index) in listCon" :to="{ name:'newsDetail-id', params: { id:val.tag_id, title:val.title, media_info:val.media_info, media_name:val.media_name, datetime:val.datetime,原创 2020-12-21 18:07:11 · 541 阅读 · 0 评论 -
如何在Nuxt.js中使用axios
1、nuxt的脚手架create-nuxt-app已经默认安装axios"dependencies": { "@nuxtjs/axios": "^5.12.4" },2、nuxt.config.js里面配置 modules: [ '@nuxtjs/axios', ], axios: { proxy: true }, proxy: { "/api": "http://localhost:8080"原创 2020-12-21 18:00:24 · 3285 阅读 · 0 评论 -
Nuxt实现SSR
.Nuxt实现SSR1.SSR简介1.1 传统web开发 传统web开发,网页内容在服务端渲染完成,一次性传输到浏览器。![在这里插入图片描述](https://img-blog.csdnimg.cn/20201214094358175.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODU5MTE5,size_16,color_原创 2020-12-14 09:45:58 · 2842 阅读 · 0 评论 -
谈谈对MVC、MVP和MVVM的理解?
Web1.0时代在web1.0时代,并没有前端的概念。开发一个web应用多数采用ASP.NET/JAVA/PHP编写,项目通常由多个aspx/jsp/php文件构成,每个文件中同事包含了HTML、CSS、JavaScript、C#/JAVA/PHP代码,系统整体架构可能是这样:这种架构的好处是简单快捷,但是,缺点也很明显:JSP代码难以维护为了让开发更加便捷,代码更易维护,前后端职责更清晰。便衍生出MVC开发模式和框架,前端展示以模板的形式出现。典型的框架就是Springt、Structs、Hibe原创 2020-10-03 15:27:19 · 1555 阅读 · 4 评论 -
解决ElementUI框架的el-select嵌套el-tree导致下拉框定位不准
问题: el-select 内嵌 el-tree, 在下拉框往上的情况下,折叠el-tree导致定位不会自动适应分析:el-select的下拉框有个 x-placement=“top-start” 属性,指示下拉框是往上展示,还是往下展示,并且定位方式是absolute,用top定位,现在懂了为啥折叠tree之后位置没变了吧?解决:在el-tree折叠node-collapse事件的时候,重新计算下拉框的top位置;兼容下拉框朝下: 判断 x-placement 属性,做对应计算下拉框to原创 2020-08-06 17:59:01 · 4119 阅读 · 0 评论 -
jquery-animateNumber数字动画插件
jquery-animateNumber数字动画插件实例一、基础动画//html代码,下面例子相同。<p>This plugin only <span id="lines">0</span> lines of code.</p>//JS 代码,请把代码放入script标签内,下面例子相同$('#lines').animateNumber({...转载 2018-12-11 14:51:05 · 1413 阅读 · 0 评论 -
移动端横向水平可滑动的nav导航条
<style> .mydeal-nav-brand::-webkit-scrollbar { display: none; } .mydeal-nav-brand { overflow-x: scroll; overflow-y: hidden; white-space: nowrap;}</style><nav clas...原创 2018-12-21 15:24:13 · 4084 阅读 · 0 评论 -
css 实现div内显示两行或三行,超出部分用省略号显示
一、div内显示一行,超出部分用省略号显示white-space: nowrap;overflow: hidden;text-overflow: ellipsis;二、div内显示两行或三行,超出部分用省略号显示overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;(...转载 2018-11-23 10:27:48 · 5179 阅读 · 0 评论 -
web app变革之rem
rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。rem是什么?rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font s...转载 2018-11-14 18:43:11 · 251 阅读 · 0 评论 -
jquery插件scrollfix,目标元素有padding,scroll的时候宽度变窄的问题
jquery插件scrollfix:滑动到某个位置浮动起来该jQuery插件主要解决滚动过程中固定某个元素,并支持到达某个位置后停止在那里随页面向上滚动,当滚回来时,重新固定起来。兼容IE6。我使用的是:$('#v3-banner-right').scrollFix({ distanceTop: $("#header").outerHeight() -200, ...原创 2018-11-14 18:05:50 · 378 阅读 · 0 评论 -
去除chrome自带的input的黄色底色
chrome在填入的时候是白底,但选取记录之后就变成了黄底。以下方法能去除黄底:方法:input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {box-shadow:0 0 0 60px #ffffff inset; //设置底色-webkit-text-fill-color: ...原创 2018-11-13 10:39:34 · 1037 阅读 · 0 评论 -
解决Mac OSX下的chrome的option元素的padding、background-color不起用问题
&lt;select&gt; &lt;option&gt;Sushi&lt;/option&gt; &lt;option&gt;Blue cheese with crackers&lt;/option&gt; &lt;option&gt;Steak&lt;/option&a原创 2018-11-07 11:15:45 · 1011 阅读 · 0 评论 -
input type = file上传图片限制大小、类型判断、像素判断
在项目中经常用到input标签来上传文件,而这些文件通常是图片文件。图片有很多格式我们只需要其中的几种,就需要对用户上传的文件进行验证,在HTML5中有一个新的属性:accept文件类型限制。但是通常我们会用javascript或jQuery编写方法进行验证图片的大小限制、类型判断、像素判断。&lt;input type="file" name="files" id="file" o原创 2018-11-09 12:21:09 · 13324 阅读 · 0 评论 -
input搜索框获取焦点时,placeholder消失
/* 点击搜索框获取焦点 placeholder消失-开始 *//* WebKit browsers */input:focus::-webkit-input-placeholder {color: transparent;/* transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值 */}/* Mozilla Firefox 4 ...转载 2018-11-09 12:19:09 · 3933 阅读 · 0 评论 -
jquery中使用 delegate 代理 hover 失效
如下:$('.js-left-nav').delegate('li.menu-list', 'hover', function(){ console.log('s');});当我鼠标滑过元素的时候,触发不了回调函数。我将 hover 改为 click ,然后点击,可以触发回调函数。原来:因为 hover 不是标准的事件,因此无法直接使用 live 和 delegate 进行处理。...转载 2018-11-09 12:18:17 · 482 阅读 · 0 评论 -
fastclick 解决移动端click事件300ms延迟
移动端click 事件延迟300ms一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期,用户对300ms的延迟感觉不明显。但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受。那么,...转载 2019-01-18 12:09:41 · 682 阅读 · 0 评论 -
前端人员必看周刊和公众号
前端技术每天都在发生翻天覆地变化,而且各种开源社区都会出现新的技术,而作为前端人员就需要不断的充实自己,这样才能避免在新潮流下落后,而本文将向大家介绍本人每周必看的一些周刊和公众号。周刊CSS Weekly专门讲解css相关知识,推送时间为周三,语言为英文。订购地址JSK Weekly这是一个专门讲解JavaScript技术的周刊,一般为周四凌晨推送,其主要语言为英文。一般分为Java...翻译 2019-01-18 14:23:26 · 1049 阅读 · 0 评论 -
关于z-index的总结
z-index的作用 很多时候需要把一个元素覆盖到另一个元素之上,比如登入弹出框等,这个时候就需要z-index属性出场了。所以呢,z-index就是调节层的显示优先级,决定哪个显示在最上方。作用范围就是Positioned element,比如绝对定位,相对定位,固定定位。 层叠上下文(The stacking context)中的z-index 先看下面的关系图:这是效果:我们会转载 2018-01-16 10:28:39 · 448 阅读 · 0 评论 -
vscode常用快捷键
https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdfctrl+k ctrl+s 打开快捷键设置ctrl+0 定位当前文件在目录树中的位置ctrl+1 定位到第一个编辑器组,2\3\4… 类似ctrl+\ 分离编辑器ctrl+shift+p 打开命令输入板ctrl+p 快速搜索文件ctrl+g 转到某一...转载 2019-09-02 16:08:49 · 337 阅读 · 0 评论 -
利用GitLab的Webhooks功能,实现网站代码自动更新部署
根据业务需求,已部署GitLab-CE,网站代码上线流程如下图:开发者 push 推送代码之后,网站代码仍没更新,还需要操作多一步:登录前端web服务器,手动git pull 拉取更新的代码。这一步是运维的工作,很无趣又烦琐。幸亏,GitLab提供了Webhooks功能,可以轻松实现网站代码自动更新部署。一、webhooks原理Webhooks的原理Project webhooks ...转载 2019-05-17 17:01:03 · 1822 阅读 · 0 评论 -
Unexpected token: name (Dom7) [./node_modules/dom7/dist/dom7.modular.js:16,0][static/js/2.262bbb49a2
vue打包时报错报错解决是引入swiper4的原因,解决方式一:降低swiper的版本,可以用3.4.2但是swiper和swiper4之间的区别挺大,这样子改又要去看swiper3的api,重新调整代码,诸多不便。解决方式二:在webpack.base.conf.js中,resolve: {extensions: [’.js’, ‘.vue’, ‘.json’],alias: {...转载 2019-03-19 01:25:00 · 1337 阅读 · 0 评论 -
一道被前端忽略的基础题,不信看你会几题
早上上班前,一如既往的翻看一下前端公众号,看下各位大佬的文章。翻 了十来分钟,咦,,一个题目还是比较经典的,为啥之前没见过。一看是2016年的文章,那是我还没入门呢…认真看了起来,,嗯嗯,,,这题目可以,比较考察综合能力,记录一下。原文链接http://www.cnblogs.com/xxcanghai/p/5189353.html复制代码function Foo () { getNa...转载 2019-02-20 16:56:30 · 285 阅读 · 0 评论 -
es6 javascript对象方法Object.assign()
1 基本用法Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。var target = { a: 1 };var source1 = { b: 2 };var source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1,...转载 2019-02-27 14:37:05 · 167 阅读 · 0 评论 -
前端性能优化之HTTP缓存策略
背景很多时候,当打开浏览器的开发者工具,查看网络请求,对于资源大小(Size)选项,除了有具体的数字大小,还有from memory cache、from disk cache字段之类出现。这里就有很多疑问,这些字段代表着什么意思?这些字段又是谁来决定的?缓存位置从字面意思理解,大概也能猜到,这些字段代表着缓存位置。 按优先级,Size选项字段可分为:from Service Work...转载 2019-02-15 10:20:35 · 720 阅读 · 0 评论 -
移动端滑动到页面80%的时候显示一个弹框
$(window).scroll(function(){ var _wrapperHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; var _contentHei...原创 2019-01-14 18:53:58 · 315 阅读 · 0 评论 -
JavaScript new Date()在Safari上的坑
问题描述我们经常用yyyy-MM-dd HH:mm:ss格式表示日期,如2018-11-11 00:00:00,在js开发中也经常会把此格式字符串格式化为javascript Date类型,如new Date(‘2018-11-11 00:00:00’),不幸的是此操作在Safari浏览器(不论是Mac还是iPhone)上会报错,返回Invalid Date。如下图所示解决问题所以在new...转载 2019-01-08 15:37:20 · 1055 阅读 · 0 评论 -
为 Laravel Mix 编译的 JavaScript 和 CSS 文件加版本号
加版本号,什么意思?我们来看 Github 网页源码中是怎样引入 JavaScript 和 CSS 文件的。<link crossorigin="anonymous" href="https://assets-cdn.github.com/assets/frameworks-e04a23d39bf81b7db3c635177756ef51bc171feb440be9e174933c6eb5...转载 2018-10-24 18:52:17 · 1208 阅读 · 0 评论 -
jquery-validate.js验证selcet、checkbox、radio
<form class="public-profile" action="/account/profile" method="post" id='public-profile-form'> <select name="like_product" class="form-control"> <option value=&q原创 2018-10-15 18:33:09 · 2195 阅读 · 0 评论 -
Vue2.0子父组件通信
https://www.jianshu.com/p/2670ca096cf8转载 2018-04-16 12:33:14 · 280 阅读 · 0 评论 -
这15种CSS居中的方式,你都用过哪几种?
原文出处:http://igeekbar.com/igeekbar/post/1068.htm CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。css居中1水平居中 1.1 内联元素水平居中 利用 text-align: ce...转载 2018-04-02 17:41:36 · 182 阅读 · 0 评论 -
wordpress XAMPP建立局域网(替换localhost为本地IP)
最近做wordpress项目,需要给团队在局域网看效果。 本地用的是XAMPP搭建的服务器; 需要替换localhost为本地IP; 打开phpmyadmin,修改wp-options,修改siteurl和home两个字段的localhost为本机IP...原创 2018-03-12 18:37:05 · 2461 阅读 · 0 评论 -
网络现状:性能提升指南
转自: https://mp.weixin.qq.com/s/dQaEHCcwUvLuvWHcQicYxA互联网正在爆发式地增长,我们创建的 Web 平台也是如此。我们通常都没有考虑到用户网络的连通性和使用情景。即使是万维网现状的一瞥,也可以看出我们还没有建立起同理心和对形势变化的认知,更不用说对性能的考虑了。那么,现今的网络状况是怎样的呢?地球上 74 亿人口中,只有 46% 的人能...转载 2018-03-09 11:40:47 · 366 阅读 · 0 评论 -
浏览器工作原理详解
原文:http://blog.csdn.net/dangnian/article/details/50876241这篇文章是以色列开发人员塔利·加希尔的研究成果。她在查阅了所有公开发布的关于浏览器内部机制的数据,并花了很多时间来研读网络浏览器的源代码。她写道:在 IE 占据 90%市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在,开放源代码的浏览器拥有了过半的市场份转载 2018-01-19 10:28:10 · 221 阅读 · 0 评论 -
wordpress源码解析-目录结构-文件调用关系(转)
Wordpress是一个单入口的文件,所有的前端处理都必须经过index.php,这是通过修改web服务器的rewrite规则来实现的。这种做法的好处是显而易见的,这样URL更好看,不必为每一个url新建一个文件。我们看看wp大致的文件调用是什么样子的。 wordpress可以分为3个阶段,一是初始化阶段,即初始化常量、环境、加载核心文件等等;二是内容处理阶段,即根据用户的请求调用相关函转载 2018-01-26 11:37:13 · 2106 阅读 · 0 评论 -
雅虎网站页面性能优化的34条黄金守则
转自:http://www.cnblogs.com/li0803/archive/2009/09/20/1570581.html雅虎团队经验:网站页面性能优化的34条黄金守则1、尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容。这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数。这是提高网页速度的关键步骤。转载 2018-01-18 14:26:39 · 301 阅读 · 0 评论 -
Wordpress安装教程:使用XAMPP本地安装Wordpress博客
Wordpress安装教程:相信大家对于WordPress博客不会太陌生,但是你知道怎么让Wordpress博客本地安装吗?下面绿茶小编教大家使用XAMPP搭建Wordpress博客,有兴趣的朋友可以参考下哦!Wordpress博客本地安装教程: 1、首先你需要下载并安装XAMPP,在安装的时候不需要注意太多的东西,唯一需要稍微留意一下的是XAMPP的安装路径,请更改为你熟悉的路径,否则转载 2018-01-23 20:11:55 · 947 阅读 · 1 评论 -
360*640是什么设备的分辨率?
作者:孙明然 链接:https://www.zhihu.com/question/48243257/answer/196101102 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。这个问题比较复杂,我们先解释320*480,320*568,375*667,414*736这几个分辨率。解释前,引入个概念:设备像素比 devicePixelRatio,window原创 2017-12-07 17:13:41 · 13601 阅读 · 0 评论