- 博客(78)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 vite打包vue3项目，可以用file://协议访问（可以在android、electron中直接访问）
vue3作为国内主流开发框架，而vite又是vue团队推荐打包工具，在大多数的项目中都是部署在服务器上，通过http://协议访问ip、域名，但是在一些混合式开发如android或者electron中需要提供的html页面，然后使用file://协议访问。在这样的背景下就需要我们使用vite打包vue3项目支持file://协议访问。通过查找相关资料实现逻辑主要是打包后要支持非esmodule的...
2023-09-15 12:05:00
1262
2
原创 SVG动画入门及使用，参考文章
1.SVG <Animation> 动画元素 - 菜鸟教程 (cainiaojc.com)2.SVG动画从入门到实战，提升你的网站表现力 - 掘金 (juejin.cn)3.十分钟教你用svg做出精美的动画！ - 知乎 (zhihu.com)...
2023-05-22 14:12:00
145
原创 关于VSCode不错的插件
1.CSScomb自动分块排序CSS样式 ，使用方法：Ctrl+Shift+p ,输入CSScomb进行处理格式化前格式化后2.Prettier - Code formatter格式化代码，很好很好用的插件，支持前端三大件3.Polacode-2022代码截图软件使用方法：Ctrl+Shift+p ,输入Polacode进行处理4.indent-rainbow代码标签闭合区间同色，安装完后既可以...
2023-05-17 10:56:00
138
原创 前端开发图标实现变色原理
以前做一张很小且不影响整体风格的图标还要设计人员切成图片，然后使用css背景或者img资源引用，解决体积加载问题使用雪碧图方式。随着前端的技术的飞速发展，各大厂商都推出很多各式各样的组件库，如：tddesign、antdesign、materialdesign.....他们都包含了图标组件。图标组件大致分为两大类：1：通过字体实现：如bootstrap,iconfont等；2：通过包装svg显示...
2023-02-08 09:05:00
121
原创 Cesium系列实现电光弧圈
var shader = `uniform vec4 color;uniform float speed;#define pi 3.1415926535#define PI2RAD 0.01745329252#define TWO_PI (2. * PI)float rands(float p){ return fract(sin(p) * 10000.0);}float ...
2022-09-21 13:25:30
325
1
原创 怎样基于VitePress（Vite官网主题）写自己文档
最近又要写技术文档了，查看了一下市面上的一些文档生成器，如docsifyhttp://vuepress.com/、Vite & Vue Powered Static Site Generator综合比较还是比较倾向vitepress，vuepress之前用过界面不是很直接，docsify界面布局也不是很理想。vitepress不叫好看的主题就是vite的官网了。是不是简洁，还带着一些小清新...
2022-09-02 17:17:27
2402
1
原创 vite2.*+vue3.*中使用iconify（上万+）图标库
Iconify支持100多个图标集，上万种图标可随意使用，Iconify是SVG图标，不是字体图标，所以你也可以结合elementui-plus、ant-design等ui库使用，最后感谢antfu大佬提供的vite插件，也感谢众多设计人员设计的图标。1，安装插件和图标库// vite-plugin-icons已经过时，请安装unplugin-iconspnpm add -D unplugin-...
2022-05-20 15:51:12
2053
原创 VScode 报Delete `␍`eslint(prettier/prettier) 警告，咋办？
今天在使用vscode时候遇到一个小问题，就是编辑器每行多了一些波浪线？如图：查一下相关文档，是在格式验证时候行尾符出现了问题，在编辑器里面我们可以看到行尾符的一些选项，如图："\n"对应的是LF"\r\n"对应的是CRLFvscode prettier eslint检验LF通过，CRLF会警告。解决方案1：点击右下角切换LF（治标不治本，只对当前页面组件有效）解决方案2：配置.prettierr...
2022-03-22 23:22:01
13082
原创 electron-builder打包过程中报错——网络下载篇（转）
在electron使用electron-builder打包过程中需要用到几个github上的包，但是由于网络原因（会科学上网的同学基本不用看了），下载不下来，导致出错；一、electron-v8.2.0-win32-x64.zip如下图：导致的原因：An existing connection was forcibly closed by the remote host.远程主机强制关闭了现有的连...
2022-03-20 00:58:54
1999
原创 Vite2+Vue3系列项目，nginx部署常见404，500等问题
随着vue3成为默认版本，国内的开发者接触vite越来越多，其中原因其实就一个字：快。详细请看为什么选 Vite | Vite 官方中文文档在这种组合项目在部署时候经常会遇到这样或那样的问题，接下对于部署的时候遇到的一些问题罗列以及一些解决方案：nginx部署如图：nginx配置1.部署后资源文件访问不对访问资源js路径404解决方案：在vite.config.production.ts(生产环境...
2022-03-11 23:56:15
5452
3
原创 前端一些好学好用的代码规范-Git提交规范（1）
除了 代码格式规范 之外，还有另外一个很重要的规范就是 git 提交规范！在现在的项目开发中，通常情况下，我们都会通过 git 来管理项目。只要通过 git 来管理项目，那么就必然会遇到使用 git 提交代码的场景当我们执行 git commit -m "描述信息" 的时候，我们知道此时必须添加一个描述信息。但是中华文化博大精深，不同的人去填写描述信息的时候，都会根据自己的理解来进行描述。而很多人...
2022-02-14 17:07:12
439
原创 前端一些好学好用的代码规范-git hook+husky + commitlint
之前我们使用了 git cz 来代替了 git commit 实现了规范化的提交诉求，但是依然存在着有人会忘记使用的问题。那么这一小节我们就来看一下这样的问题，我们应该如何去进行解决。先来明确一下我们最终要实现的效果： 我们希望： 当《提交描述信息》不符合 约定式提交规范 的时候，阻止当前的提交，并抛出对应的错误提示 而要实现这个目的，我们就需要先来了解一个概念，叫做 Git hooks（git ...
2022-02-14 17:06:42
1479
原创 前端一些好学好用的代码规范-ESLint
不以规矩，不成方圆对于于一些大型的企业级项目而言，通常情况下我们都是需要一个团队来进行开发的。而又因为团队人员对技术理解上的参差不齐，所以就会导致出现一种情况，那就是“一个项目无法具备统一的编程规范，导致项目的代码像多个不同材质的补丁拼接起来一样”。于是乎就有很多团队就会制定很多代码规范，但是在执行层面有的时候还是比较困难。这个时候就会想有没有自动检测代码的规范化的工具？接下来简单介绍工作学习中接...
2022-02-14 15:25:05
821
原创 前端一些好学好用的代码规范-Prettier工具
我们知道了 ESLint 可以让我们的代码格式变得更加规范，但是同样的它也会带来开发时编码复杂度上升的问题。那么有没有办法既可以保证 ESLint 规则校验，又可以让开发者无需关注格式问题来进行顺畅的开发呢？答案是：有的！而解决这个问题的关键就是 prettier！（点击 Prettier 中文网 · Prettier 是一个“有态度”的代码格式化工具 进入 prettier 中文官网！）pret...
2022-02-14 15:23:56
674
原创 国产iconfont，如何应用在web端、android、ios、小程序端（2）
上篇文章已经介绍怎样添加字体到自己的项目中Forever Sun：国产iconfont，如何应用在web端、android、ios、小程序端（1）接着我们介绍怎样使用在线字体1.Web 端使用用户在 http://iconfont.cn 可以下载，多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。1.1icon 单个使用单个图标用户可以自行选择下载不同的格式使用，包括 ...
2021-07-13 16:12:21
245
原创 国产iconfont，如何应用在web端、android、ios、小程序端（1）
1.首先注册iconfont账号；2.创建项目；3.添加图标到购物车；4.从购物车添加到项目；5.生成字体；6.引用；下篇文章主要介绍怎样使用！Forever Sun：国产iconfont，如何应用在web端、android、ios、小程序端（2）...
2021-07-13 15:40:14
124
原创 最新Taro UI组件SwipeAction引用无效，解决办法
最近在做一个小程序时候，遇到一个问题在使用SwipeAction时候，总是不显示而且宽度始终是0；本来计划用这个组件写一下业务功能结果在这卡壳了。而且taro ui的文档说明仔细看了几遍愣是没找出用法有什么问题，心想taro ui大公司的东西不应该出现这问题，肯定是自己用的有问题。taro文档：我用的版本：在官方放出的微信群申请进入无响应，bbs一看，有很多问题都没有回复，心想着继续这样这个框架也...
2021-06-18 10:50:53
923
原创 Cesium系列产品，实现gif 布告板（billboard）
实现思路以及原理：1.billboard支持图片格式可以是图片地址也可以是base64图片内容；2.获取gif图片的帧值更新对应image；3.Cesium.CallbackProperty;根据上面思路，我们可以找有没有现成获取gif帧换面的工具：buzzfeed/libgif-js有了上面的工具就已经成功一半了；libgif插件需要一个dom对象，所以我们在页面里面增加一个标签：<scr...
2021-06-13 15:14:55
748
1
原创 Chrome浏览器出现ERR UNSAFE PORT 无法访问此网站
最近在升级Chrome91版本时候，突然出现有些端口访问不了查了一下资料，发现浏览器有一些安全端口是限制访问的，这样可以有效的保护我们的计算机，同时也带来了一些问题，有些服务部署的端口恰巧就是其中安全限制端口，这样就会产生访问不了的问题。FireFox 火狐浏览器 非 80 端口Chrome 谷歌浏览器 6000、6665-6669 等1, // tcpmux 7, ...
2021-05-27 10:45:45
715
原创 前端做大屏显示，缩放比，分辨率怎样适配？
我们在做大屏的时候经常在开发环境开发的时候显示很完美，但是到了客户电脑就花样百出，出去浏览器对CSS3和js语言新特性的兼容问题，其实大多是因为网页的缩放比，或者用户的高分屏的一些设置问题，如图通常这样设置没有问题，但是有些笔记本高分屏，默认缩放比就是125%.这样可能原来1920的大屏显示在1536宽度的屏幕上肯定会出现问题。首先我们我们可以通过js获取当前的显示器的尺寸width、height...
2021-05-19 09:49:55
7287
原创 前端（js）获取文件的头信息的16进制编码
正常我们做一些文件类型的判断辨别，低级别的鉴别就是根据文件扩展名判断。殊不知有些文件，有好事者喜欢直接修改扩展名，然后巧妙绕过扩展名过滤，轻则显示不正常，重则造成系统崩溃。接下我们了解一下根据文件的头信息的16进制编码进行判断文件类型，即使好事者修改扩展名依然可以判断原本类型。（文件头信息对照表）上代码：1.html<input type="file" name="excel" id="ex...
2021-04-19 16:51:22
2347
原创 笔记本计算机切换显卡后还是很卡？可能是...
最近遇到一个问题，用公司的带有独立显卡的笔记本google浏览器查看一些三维模型很卡，一开始怀疑是不是独立显卡没有切换成功，于是重新设置了一下，如下图：1.右击右击2.设置应用3.然后点击应用结果还是很卡！！！于是打开浏览器的开发者工具，在控制台输入var _canvas = viewer.canvas; let gl = _canvas.getContext('experimental-...
2021-03-29 15:57:00
1611
原创 Electron应用实现自动更新
1.自行创建Electron项目2.安装electron-builder 打包工具yarn add electron-builder或者npm install electron-builder -D并配置package.json{ "name": "demo", "version": "1.1.1", "description": "A minimal Electron applica...
2021-02-05 17:30:35
7345
5
原创 Nginx本地局域网用上https和http2.0传输协议
一、安装Nginxnginx: download（安装Nginx直接解压便可以用）二、安装Openssl并生成证书文件1、下载地址http://slproweb.com/products/Win32OpenSSL.html；2、一直点下一步直接安装到C盘即可。命令提示行如果有以上提示，改环境变量或者到安装目录下执行，本人用安装目下执行3.生成证书1）执行以下语句，创建服务器私钥key文件genrs...
2020-12-23 22:00:14
1317
原创 Chrome 85+ Referer 丢失部分参数
Chrome85 的 referer 策略修改原本默认的 referer 策略（policy）是no-referrer-when-downgrade，即允许referer带上来源页面地址上的请求参数，Chrome85+将策略修改为strict-origin-when-cross-origin，即如果请求地址与请求页面非同源，将只携带请求的域名，不会再带上来源页面地址的请求参数。那如何解决呢，可以在...
2020-10-22 17:32:43
1375
原创 javascript UTF-8的编码与解码
JavaScript本身可通过charCodeAt方法得到一个字符的Unicode编码，并通过fromCharCode方法将Unicode编码转换成对应字符。但charCodeAt方法得到的应该是一个16位的整数，每个字符占用两字节。在网络上传输一般采用UTF-8编码，JavaScript本身没有提供此类方法。不过有一个简便的办法来实现UTF-8的编码与解码。Web要求URL的查询字符串采用UTF...
2020-09-09 16:03:04
3502
原创 常见文件文件头
在日常生活中我们接触到很多软件，如QQ和微信等，这些软件都会对一些文件加密如图片加密成dat文件，这其中多数是利用文件的16进制编码进行异或运算进行加密。此处我们具体介绍一些常见的文件未进行加密前的文件头进行列举：[ {"扩展名":123,"文件头标识（HEX）":"00001A00051004","文件描述":"Lotus1-2-3spreadsheet(v9)file"}, {...
2020-07-31 14:31:18
3598
原创 iframe 引用的页面怎样全屏？
前段时间在公司的项目里面嵌入了720云的全景页面，引入后浏览都正常，但是有用户反应网页中的全屏点击无效，经过测试后确实无效 经过查询资料，和引入优酷、腾讯视频的情况下，有了解决方案其实很简单只要在iframe属性中增加属性allowfullscreen即可 <if...
2020-07-02 06:14:37
2596
原创 在GitHub上fork了别人的项目，然后呢？
GitHub是全球用户量第一的同性交流平台，上面包含了很多有趣，有用的资源，有的时候觉得对自己有用的就随手fork一下。但是后续别人的项目升级了我们怎么办？怎样同步更新呢？ 第一步：登录你的hub找到要同步更新的项目。 第二步：点击“new pull reques...
2020-03-24 13:10:02
1150
原创 前端的全屏与退出全屏
前端实现全屏，主要分两种通过b站功能说明： 1.是指定dom元素和当前浏览器窗口大小一致（网页全屏），如 原理主要是通过设置dom容器的大小实现，此处不做过多阐述。 2.是指定dom元素和当前显示器窗口大小一致（屏幕全屏） ...
2020-02-28 07:19:48
2459
原创 单点登录（sso）的简单实现
单点登录（Single Sign On）：简称为 SSO，是比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。 下面我们实现一个简单的Demo： 预备安...
2020-02-12 09:06:30
498
原创 LSV&&Global Mapper应用----地形裁剪
上节主要讲影像裁剪，本节主要讲地形（高程）的裁剪 请自行百度下载安装Global Mapper 1.打开前面下载下来的地形文件夹，如图 2.拖拽“Export15-29-01.tif”到Global Ma...
2020-01-17 08:12:15
1020
原创 LSV&&Global Mapper应用----影像裁剪
上两节主要讲影像和地形的下载，本节主要讲影像的裁剪 请自行百度下载安装Global Mapper 1.打开前面下载下来的影像文件夹，如图 我们使用19级影像来裁剪，因此打开文件夹“...
2020-01-17 07:55:19
2282
原创 LSV&&Global Mapper应用----地形下载
上一节已经介绍了影像下载，本文主要讲LSV地形下载 首先要到locaspace viewer官网下载LSV安装程序自行安装。 一、地形下载 1.切换下载 2.点击谷歌地形...
2020-01-17 07:30:09
1046
原创 LSV&&Global Mapper应用----影像下载
本文主要讲LSV影像下载 首先要到locaspace viewer官网下载LSV安装程序自行安装。 一、影像下载 1.切换下载 2.点击影像 ...
2020-01-17 06:21:56
2087
2
原创 五大主流浏览器及四大内核
只是用户看到仅仅只是浏览器本身，却很少能看到浏览器最核心的部分—浏览器内核。从第一款libwww（Library WorldWideWeb）浏览器发展至今已经经历了无数竞争与淘汰了。现在国内常见的浏览器有：IE、Firefox、QQ浏览器、Safari、Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、遨游浏览器、世界之窗浏览器等...
2020-01-15 09:01:06
603
原创 Google V8 即将更新8.0版本
8.0版本主要区别之前版本的是内存性能的提升 怎样查看您浏览器的引擎版本呢？ chrome : //version 比如我现在用的版本是： ...
2020-01-13 05:57:36
264
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人