Category Archives: Frontend
谁会拒绝一款开源的 3D 博客呢？
说到博客大家一定都不陌生，不管你是深耕职场多年的老鸟，还是在学校努力的小鸟，应该都有过一段 “装扮” 博客的经历，比如：放上喜欢的图片、添加炫酷的交互、换上 DIY 的博客主题等等。但不管再怎么 “打扮”，也跳脱不出平面的 “凡胎”。
今天 HelloGitHub 给大家带来的是一款开源的 3D 博客项目，实话说我第一次访问这个博客的时候都惊呆了，颠覆了博客的认知。进去后需要通过操控一辆 3D 的小汽车，自己 “找到” 文章才可以阅读，特别有意思！
View DetailsVUE项目build报错的解决办法（ERROR in static/js/vendor.xxxxx.js from UglifyJs）
一直运行很好的项目突然build报错了，错误信息如下：
|
1 2 3 |
ERROR in static/js/vendor.f1c68aa2d5e85847d30e.js from UglifyJs Unexpected token name «i», expected punc «;» [./node_modules/element-ui/src/utils/merge.js:2,0][static/js/vendor.f1c68aa2d5e85847d30e.js:17064,11] Build failed with errors. |
在 UglifyJs 的 github issues #78 找到了这样一个解决方案：由于 UglifyJs 只支持 ES5 而 element-ui 可能引入了一部分 ES6 的写法，所以导致 webpack 打包失败。issue 里最后给出的解决方案是用 beta 版本的Uglify-es 来代替 UglifyJs（Beta 版本引入了对 ES2015+）的支持。需要在前端工作目录下用执行命令 npm i -D uglifyjs-webpack-plugin@beta。 不过在尝试过后，发现 build error 的问题依然没有解决，在深入查找问题所在后，决定用 bable 来解析 element-ui， 要完成此操作只需要修改前端文件夹下的build/webpack.base.conf.js 文件即可，修改如下： 修改前
|
1 2 3 4 5 6 7 8 |
module: { rules: [ ... { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, |
修改后
|
1 2 3 4 5 6 7 8 9 |
module: { rules: [ ... { test: /\.js$/, loader: 'babel-loader',//注意elementUI的源码使用ES6需要解析 include: [resolve('src'), resolve('test'),resolve('/node_modules/element-ui/src'),resolve('/node_modules/element-ui/packages')] }, ... |
相当于将 element-ui 加入需要 babel 解析的包中。 之后再次执行 npm run build， build 成功。 转载自以下文章： 原文地址 from:https://blog.csdn.net/sing_sing/article/details/79146265
View Detailshtml颜色代码暗黑模式,Html页面支持暗黑模式如何实现 Html页面支持暗黑模式实现代码…
本篇文章小编给大家分享一下Html页面支持暗黑模式实现代码，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。 准备 其实，我们只是需要使用到css中的prefers-color-scheme 媒体查询。 no-preference 表示用户未制定操作系统主题。作为布尔值时，为false 输出。 light 表示用户的操作系统是浅色主题。 dark 表示用户的操作系统是深色主题。 说明 此方法只是一个简单demo，可以使用该方法拓展出其他实现方式。 prefers-color-scheme说明 DEMO地址 HTML 页面适应黑暗模式 测试文字 CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.back {background: white; color: #555;text-align: center} @media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00} } @media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4} } |
from:https://blog.csdn.net/weixin_39610678/article/details/117835878
View DetailsCSS滤镜调节图片或地图颜色
原始图片 滤镜调节后效果： 代码中替换图片即可：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <img src="./tianditu.jpg" id="tiimg" style="width: 50%;"/> <br> <span>高斯模糊：blur(<span id="showblur"></span>px)</span><input id="gaosi" type="range" value="0" onchange="document.getElementById('showblur').innerHTML=value" /> <br> <span>黑白效果：grayscale(<span id="showgrayscale"></span>%)</span><input id="heiba" type="range" value="0" onchange="document.getElementById('showgrayscale').innerHTML=value" /> <br> <span>怀旧效果：sepia(<span id="showsepia"></span>%)</span><input id="huaij" type="range" value="0" onchange="document.getElementById('showsepia').innerHTML=value"/> <br> <span>反色效果：invert(<span id="showinvert"></span>%)</span><input id="fansx" type="range" value="0" onchange="document.getElementById('showinvert').innerHTML=value"/> <br> <span>透明效果：opacity(<span id="showopacity"></span>%)</span><input id="toum" type="range" value="0" onchange="document.getElementById('showopacity').innerHTML=value"/> <br> <span>图饱和度：saturate(<span id="showsaturate"></span>%)</span><input id="baof" type="range" value="0" onchange="document.getElementById('showsaturate').innerHTML=value"/> <br> <span>色相：hue-rotate(<span id="showhuerotate"></span>deg)</span><input id="sex" type="range" value="0" onchange="document.getElementById('showhuerotate').innerHTML=value" max="360"/> <script> var tup = document.getElementById("tiimg"); var blur=0;var hbxg=0;var hjxg=0;var fans=0;var tmxg=0;var baohd=0;var sex=0; // 高斯模糊 document.getElementById("gaosi").addEventListener("input",function() { blur=this.value; flisd(); }); //黑白效果 document.getElementById("heiba").addEventListener("input",function() { hbxg=this.value; flisd(); }); //怀旧效果 document.getElementById("huaij").addEventListener("input",function() { hjxg=this.value; flisd(); }); //反色效果 document.getElementById("fansx").addEventListener("input",function() { fans=this.value; flisd(); }); //透明效果 document.getElementById("toum").addEventListener("input",function() { tmxg=this.value; flisd(); }); //饱和效果 document.getElementById("baof").addEventListener("input",function() { baohd=this.value; flisd(); }); //色相 document.getElementById("sex").addEventListener("input",function() { sex=this.value; flisd(); }); function flisd(){ if(baohd==0){baohd=2;} tup.style.filter="blur("+blur+"px) grayscale("+hbxg+"%) sepia("+hjxg+"%) invert("+fans+"%) opacity("+(100-tmxg)+"%) saturate("+baohd*50+"%) hue-rotate("+sex+"deg)"; } </script> </body> </html> |
更多属性请查看官方文档尝试： from:https://blog.csdn.net/josiecici/article/details/127629212
View DetailsVS Code 格式化后 自动让函数名后有空格
嗨，大家好！今天给大家分享一下，怎么在vscode中给函数名后边加空格，让函数名和（）之间有空格，这里大家要注意的是：Prettier – Code formatter并不能实现这个功能，我们需要借助Vetur来实现，以前小编一直很迷，为什么配置都配置了。我们还是没有效果，其实是用错插件了，我们应该用Vetur.
View Detailsless、scss/sass的区别
sass/scss或是less，都可以看作为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松，在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss，因为更加强大，更好用。
View Details