-
实现传统模板渲染页面的静态资源版本自动管理
浏览器在加载网站静态资源是有缓存策略的,当我们修改样式或脚本后,引用的资源地址没有发生改变,那么浏览器使用的资源都是以前的缓存。
我在自己的博客系统上加上了一个生成模板主题目录的MD5文件,使用静态资源的时候加上这个MD5,当主题目录任意一个文件被修改、新增、或删减都会生成一个新的MD5,通知浏览器该使用新的文件了。
……
2022-03-15 23:22
php
thinkphp
php
-
传统模版页面中使用less的缓存问题
在前后端分离的开发模式中less是将样式编译成css随项目一起打包的,而传统模板页面引用的less是将样式编译后动态插入到head标签中,同时保存在localStorage中,如果引用的less是加上版本号的,比如这样:
<link rel="stylesheet/less" type="text/css" hr……
2022-03-14 15:27
less
localStorage
css
-
纯CSS实现“开花”效果的加载(loading)动画
.parent{
margin:0 auto;
position:relative;
width:100px;
height:100px;
left:0;
animation:parent 1s linear 0s infinite alternate;
}
.child{
position: abso……
2021-09-11 11:55
loading
css
-
一个纯CSS加载动画
@keyframes wiggle{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(.5)}100%{transform:rotate(360deg) scale(1)}}.loader{margin: 0 auto;display:……
2021-09-10 11:39
loading
css
-
视频(mp4)在谷歌浏览器中自动播放属性无效的问题
如下视频,在谷歌浏览器(chrome)中给video标签加上了autoplay属性,但是无法生效。
原因是谷歌浏览器在高版本中对于自动播放的视频有一个新的政策,默认不允许自动播放视频,哪怕是在Javascript中使用文档加载后播放也不行(window.onload = function(){ document.que……
2021-09-09 11:33
html
video
前端笔记
-
vue插件开发和组件的区别
vue插件和组件的区别
使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件。不同的是,一般组件我们是作为页面的某一块结构,按需引用,但是有些应用场景你可能会用到也可能用不到,总之就是你不知道什么时候会用到,总不能在每个页面都引用吧。再一个,控制组件需要传递props,也就是说每次引用都需要写方法才能达到……
2021-09-08 23:14
组件
插件
vue
-
VScode自动上传项目到FTP服务器
一、下载VScode插件:SFTP
二、配置插件 在VScode中ctrl+shift+p,输入SFTP:config,选中并回车,再选择一个项目回车。系统会自动在项目根目录创建.vscode/sftp.json默认的配置文件,修改为需要的配置即可:
{
"name": "My Server",//服务器名称,……
2021-09-08 23:10
vscode
ftp
开发工具
-
npm - 工具包管理器
使用cnpm并代替npm
npm install -g cnpm --registry=https://registry.npm.taobao.org 或指定npm包的下载地址来源为淘宝镜像: npm config set registry https://registry.npm.taobao.org
发布npm包
……
2021-09-07 20:59
npm
开发工具
-
nvm - node.js版本管理工具(windows平台)
官方网站:https://github.com/coreybutler/nvm-windows/releases 推荐使用免安装的版本,解压到某个磁盘。(这里以F盘为例)
设置用户环境变量
添加nvm路径变量:
NVM_HOME -> f:\nvm
添加node快捷方式路径变量(nvm是通过设置该快捷方式路径来决……
2021-09-07 20:55
nvm
开发工具
-
实现外网(互联网)访问内网(局域网)开发环境
需要node.js,官方网站:https://nodejs.org
使用到的npm包:http-server、ngrok
一、安装http-server并启动服务器
1、全局安装:cnpm install http-server -g 2、启动服务器:http-server 默认端口为8080。
二、安装ngrok、启……
2021-09-07 00:33
ngrok
内网穿透
开发工具