自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(106)
  • 资源 (8)
  • 收藏
  • 关注

原创 window平台编译draco库

文章目录window 平台编译 draco 库环境准备cmakeVisual Studio开始编译获取最新的代码CMake 使用友情链接:window 平台编译 draco 库前面一篇文章讲了一下 three.js 的使用 VR 效果 前端使用 three.js 加载 Obj(三维模型文件)也附上了 linux 编译 draco 的过程。也提供了 window 平台下的 .exe 文件不过最近遇到一个问题就是,编译后的代码是旧的,draco 也一直在更新迭代。所以今天就补上 window 平台编译

2021-04-13 14:21:09 9

原创 node爬虫puppeteer使用

node 爬虫 puppeteer 使用puppeteer 是一个基于 Chromium 的 node 爬虫框架。其厉害之处就是他具备浏览器的所有功能,并且通过 nodejs 就可以控制。完美实现我们要的爬虫效果 (后面附有完整代码~)安装 puppeteer 时还会同步下载 Chromium 。网络不好的直接用 cnpm 下载即可。当然官方也有一个另外的包,原话如下:Since version 1.7.0 we publish the puppeteer-core package, a versi

2021-04-11 19:44:41 30 1

原创 调试node程序工具对比

调试 node 程序本文或许有点长,因为调试 node 真是折磨了很久,最后的当然也是找到了称心如意的工具,看下图!!何为称心如意?热更新console 查看输出的对象(命令行看 js 输出的对象真是噩梦)方便调试,包括且不局限于:断点,运行单个文件,等…上面的图看起来像是 chrome 控制台,但绝对不仅仅只是 --inspect-brk 打开的那个感兴趣的可以看下下面一个个工具的对比,如果想直接达到上图的效果直接找到 ndb 的目录去把~热更新代表 nodemon::: tip

2021-03-28 21:53:36 20

原创 PicGo+Gitee搭建自己的图床

PicGo+Gitee 搭建自己的图床有写博客的人都知道有一个好的 免费 图床多么重要,很多都是说把图床搭到 github 上。可是那访问也太慢了,好在国内还有 码云PicGo这个工具无需多言,好用,支持多图床配置,也是今天的主角默认安装完是没有 Gitee 图床的,所以需要到插件市场找一个注意这里有 2 个很像很像的插件,不要装错了,另外一个配置在我印象中是比较复杂的,圈住的这个相对来说简单很多安装完成后就会多一个 Gitee图床 的配置了。新建图床仓库新建 git 仓库我就不多说了

2021-03-28 18:24:09 20

原创 gitbash设置别名

别名设置cd /etc/profile.dvim aliases.sh可以看到 ls 和 ll 是系统原先就配置好了。接下来根据原有的格式,添加自己想要的别名比如添加的 ns = npm run serve。以后启动项目,直接 ns 即可。如何新增点击 i 进入编辑模式。输入好内容后,按下 esc , 然后输入 :wq 即可保存退出保存后执行 source ./aliases.sh 重启终端就可以window Termial 不识别别名如果已经安装了 window Termial 并

2021-03-28 17:50:55 19

原创 Vue项目引入使用svg

Vue项目引入使用svg随着项目页面的增多,UI 库的 svg 图标渐渐不够用了。于是 UI 给了一大堆的 svg 新的图标,一个个引入显然不实际,于是把 svg 放到指定文件夹,然后批量引入,通过组件去使用这一堆 svg。项目结构|--build| `-- webpack.base.js`--src `-- assets `-- icons |-- index.js `-- svg `--

2021-03-28 17:36:53 12

原创 调试微信 PC 端的内置浏览器界面

调试 PC 端的内置浏览器界面很多网页都有用到微信授权,这意味着很多页面都必须在微信内置的浏览器才能打开。可是这时候想看下网页的代码,调试下,就没法子了。今天就来解决这个问题:因为微信用的也是 Chromium 内核,只是禁了右键和 F12。把控制台阉割了,我们要做的就是把控制台加回来!查看浏览器内核位置<html> <script type="text/javascript"> window.open('chrome://version') </scr

2021-03-13 18:09:43 282

原创 使用 webpack 搭建 vue 开发环境(四)

使用 webpack 搭建 vue 开发环境(四)对应分支 Jioho/webpack_config@v0.0.4公共模块一起打包在开始之前,直接运行一下打包,看下优化前的效果:可以看到打包了 3 个 html 页面,对应着 3 份 JS看下 dist 目录下的 JS 的内容(goods 模块和 user_setting 模块):代码看着是一样的,因为页面的 JS 都是一样的,差别不大,不过下面的 vue.js 又重复引入了一次,就是有多少个模块,vue 就得引入多少次像这种公共资源,其实可

2021-02-07 11:48:55 17

原创 chrome Performance 使用

chrome 大法好chrome Performance 应该都不陌生,但是不陌生代表会用~今天就来记录一下 chrome Performance 的冰山一角开始既然是性能调试,那就不要掺杂其他的因素影响。很多教程第一步就是打开隐身模式。但是插件咋办?我就是个十足的插件迷总不能都卸载了把,手动隐藏?那也太累了把,就没别的办法了吗?准备干净的 chrome找到 chrome 的快捷方式,90% 都是在这里了,C:\Program Files (x86)\Google\Chrome\Appli

2021-01-24 20:03:24 78

原创 没有webpack和脚手架的老项目用上React技术栈

不用 react 脚手架和 webpack,直接使用 react 写 demo老项目使用 react技术一直发展,可是总有项目来不及更新。当年 MVC 技术热度不减现在的 react 和 vue。几年过去了,前后端分离,各种前端框架的出现,使得部分老项目更加少人维护了,毕竟 MVC 项目的语法对前端实在是太不友好了然而最近有一个项目就是 java web 的项目,可是新的需求的 UI 库又是基于 teambition 的,借此机会也顺便学习下 react。react 可以像 vue 一样 “渐进式

2020-12-28 18:37:18 57

原创 chrome 报错 navigator.mediaDevices is undefined

what?chrome 会报错?你代码写错了把!chrome 报错 navigator.mediaDevices is undefined最近在开发一个摄像头项目(多人会议,需要摄像头~~)。然后同事的电脑调试好好的,到我这里就报错了,我的 chrome 版本一直都在最新的,为啥到我这反而还不兼容?原来是以后的内容会越来越严格chrome:想调用摄像头?可以啊,拿出你的https证书给我瞧瞧解决问题毕竟不可能到处都有 https 证书把,总得本地调试把,localhost 域名总会有吧。于是发

2020-10-28 21:55:58 461

原创 使用 edge 或 chrome 调试 安卓app/手机网页

edge 真香啊从路转粉到转正的 edge虽然目前主力浏览器还是 chrome。毕竟 edge 上插件还没那么多,很多从 chrome 同步过去的插件都是用不了/报错了。但是这并不影响 edge 的进步!尤其是国内的网络,edge 能满足大部分的需求。加上 edge 控制台的字体,配色,深得我心~。等 edge 插件市场成长起来后,一定把 edge 当主力!回到正题,调试 H5每次说到调试 H5,好像有很多工具,又好像很多都拿不出手。比如:fiddler 普通的抓包工具了spy-deb

2020-10-28 21:55:16 2744

原创 使用 webpack 搭建 vue 开发环境(三)

title: 使用 webpack 搭建 vue 开发环境(三)date: 2020-10-27sidebar: autocategories:前端tags:webpack刚好断更一个月~~。不过我还是回来了!老规矩,代码放在 码云@Jioho/webpack_config v0.0.3 分支,搞定后合并到 master根据上次留下的锅,看下这次需要解决什么问题当前项目的热更新是属于哪种热更新?实现一个简单的多入口本来还有 实现自动获取入口(重头戏)和 添加代码运行后的.

2020-10-27 18:00:06 77

原创 使用 webpack 搭建 vue 开发环境(二)

使用 webpack 搭建 vue 开发环境(二)接着上一回,第二篇文章开始更进一步的配置老规矩,基于 v0.0.1 的代码继续开发,这次配置结束后的代码将会划分为 v0.0.2使用 less 完善开发体验安装使用 css 预处理器-lessnpm install --save-dev less less-loader修改配置,因为 test 是可以接收正则表达式的,那么对于 css和less的匹配,我们可以这样写:test: /\.(less|css)$/,webpack.base.js

2020-09-27 13:58:16 59

原创 webpack/vue-cli 中的 publicPath / 和 ./ 的区别

webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子,我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是,你真的理解 webpack 里面的 publicPath 吗?准备环境nginx 模拟一个真实的 URL 和高仿真项目

2020-09-27 00:16:03 880

原创 使用 webpack 搭建 vue 开发环境(一)

只要一直在路上,一切都不算远使用 webpack 搭建 vue 开发环境(一)虽然 vue-cli 已经非常成熟,成熟到可能自己写的 webpack 性能上不一定比得上 vue-cli。当然只是性能上,在实用性,拓展性,学习性上,自己能写出符合自己工程项目的 webpack 配置才是最好的所有的代码都已经放在了 码云@Jioho/webpack_config毕竟 github 有点慢~这边的网络上不去master 分支的代码是每个版本迭代后最新的代码,所以第一篇文章的最终代码在 v0.0.1 分

2020-09-26 18:26:54 107 1

原创 -webkit-box-orient:vertical 失效

首发地址-webkit-box-orient:vertical 失效问题引出-webkit-box-orient:vertical 属性常用在多行文本溢出譬如这段超出 2 行文本溢出的代码,眼看好像没啥问题(火狐没这个属性,自然不支持).box { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

2020-08-30 22:08:40 119

原创 使用 label 标签 解决 IE10 以下 input 的 placeholder 不显示问题

IE 是前端一生的夙敌文章目录问题引出冷静分析撸码解决html 结构css 样式重头戏 JS完整的 demo总结问题引出没人不认识这个把:<input name="username" placeholder="请输入用户名" />就一个输入框,然后没输入值情况下显示 请输入用户名偏偏 IE10 以下就不认识 placeholder 兼容性我真是,惊呆了。。。冷静分析采用 <label></label> 标签为何?我们需要把文字,用定位的方式定在

2020-08-12 23:54:05 145

原创 js 动态插入css

1. 外部 css 文件已经存在1.1. 动态引入 css 文件在 head 标签内在创建一个 link 标签来引入 css。这个前提是外部的 css 已经存在function loadStyle(url) { var link = document.createElement('link') link.type = 'text/css' link.rel = 'stylesheet' link.href = url var head = document.getElementsB

2020-07-26 23:52:32 102

原创 手写 apply call bind 实现

apply call bind 相关对于 apply call bind 之前也有写过一篇很详细的入门级文章 apply , call, bind 用法和区别了解用法后,最好还是了解其实现原理,这样才能掌握透彻三者的区别call 和 apply 都是为了解决改变 this 的指向。作用都是相同的,只是传参的方式不同除了第一个参数外,call 可以接收一个参数列表,apply 只接受一个参数数组bind 和其他两个方法作用也是一致的,只是该方法会返回一个函数。并不会立刻执行手写 call

2020-06-29 00:49:05 223

原创 Vue.set的使用和原理(分析源码系列)

分析源码系列 - Vue.set / vm.$set 详解文章目录分析源码系列 - Vue.set / `vm.$set` 详解作用和概念描述小结为什么用过 set 添加的就是响应式属性开始看源码调试模式下,进入 set 方法添加监听 `defineReactive$$1` 方法dep 分析observe 分析总结作用和概念描述官方文档:Vue-set向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 prope

2020-06-28 18:54:33 638

原创 Vue 组件 data 为什么必须是函数(分析源码,找到答案)

Vue 组件 data 为什么必须是函数文章目录Vue 组件 data 为什么必须是函数要理解这个问题,得从原型说起3 个栗子 理解后在看源码使用 debugger,看下 new vue 发生了什么1. 走到了初始化 vue 的步骤2. 来到 init 方法内部3. 来到 initState 方法4. initData 方法小结new Vue 的源码简单的看下。那继续看今天主角 `components` 的实现1. 进入到了 initAssetRegisters 初始化登记注册(组件注册)2. exten

2020-06-23 23:58:28 1540

原创 前端错误日志监控-sentry 使用篇

前端错误日志监控-sentry 使用篇安装 sentry 的文章在这里:前端错误日志监控-sentry 安装接下来主要介绍 sentry 的日产使用,包括但不局限于:文章目录前端错误日志监控-sentry 使用篇基础的配置修改语言,修改时区设置 apikey创建一个项目管理接入 vue 项目上传 sourceMap 定位问题添加发布的版本号邮件提醒自定义错误消息基础的配置修改语言,修改时区平台默认是全英的,有时候靠翻译也比较麻烦,其实支持切换部分中文(毕竟还没完全翻译过来)时区就在语言下面的

2020-06-21 12:54:46 1086

原创 前端错误日志监控-sentry安装

前端错误日志监控-senrry 之 安装篇文章目录前端错误日志监控-senrry 之 安装篇题外话senrry 「哨兵」 优点正题:senrry 安装安装 docker下载安装脚本修改镜像创建初始帐号运行 sentry最后说一句题外话前端作为最接近用户的一端,有非常重要的责任。响应要快,操作要流畅等,然而 JS 的单线程设计,和 dom 不能同时渲染的设计,让你的 JS 报错分分钟就卡在那里动不了。简单来说:体验贼差有报错咋办?调试呗,可以看之前出的很多调试的文章:主推是 spy-debugg

2020-06-21 01:57:47 973 7

转载 通过 FFMPEG,为视频添加字幕

由于mp4容器,不像MKV等容器有自己的字幕流。像MKV这种容器的视频格式中,会带有一个字幕流,可以在播放中,控制字幕的显示与切换,也可以通过工具或命令,将字幕从视频中分离出来。而MP4格式的容器,是不带字幕流的。所以如果要将字幕集中进去,就需要将字幕文件烧进视频中去。烧进去的视频,不能再分离出来,也不能控制字幕的显示与否。命令如下:ffmpeg -y -i 6e28.flv -vf su...

2020-05-04 10:21:33 1213

原创 linux 安装 Jenkins 实现自动获取代码 打包前端代码

linux 安装 Jenkins 实现自动获取代码 打包前端代码JenkinsJenkins 并不是编程语言,只是一个工具,用 java 编写的一个工具,所以需要java环境他可以帮我们实现监听代码的更新,并且执行自动化流程(比如打包 vue 文件,打包 react 文件,或者后端的文件编译等等)以下的步骤均在centos 7环境下执行,所以有些包的安装使用的是 yum 源。如果用的是 u...

2020-04-28 18:34:25 293

原创 VR 效果 前端使用 three.js 加载 Obj,drc文件(三维模型文件)

VR 效果 前端使用 three.js 加载 Obj(三维模型文件)前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~。如果想深入学习,还需要多看看官方文档,这里只做个记录,学习难度:仅供入门学习下面的 demo 其实都是网上大神的代码,我只是收集,拼凑显示了出来 ~代码我已经全部放在码云了。想要源文件的可以到码云下载 ~ demoVR-three...

2020-04-25 23:00:35 1033

原创 手机调试 H5 vue-devtools weinre fiddler

手机调试 H5(vue 方向)代码 bug 多没关系,关键是可以及时定位到问题!小提示:不知道是不是 fiddler 的原因,不能在微信的网页注入 JS。所以以下调试均在手机浏览器中进行,当然如果可以自己在页面引入调试资源,那也是可以滴!手机使用 vue-devtools 调试开发 vue 应用的时候,chrome/firefox 有 vue-devtools 插件。那手机端呢?还有...

2020-04-14 10:39:19 401

原创 爬取小程序线上代码

爬取小程序线上代码因为某种原因,丢失了部分小程序代码,不过程序在线上是正常运行的,于是找到了一款工具,可以爬取线上的代码,在自己慢慢的反编译回来需要的工具夜神模拟器(因为有 root 权限,或者有已经 root 的手机亦可)一个伟大的开源库 https://github.com/xuedingmiaojun/wxappUnpacker 原作者已经不维护了,这是其他大神留下的库还有一...

2020-03-26 16:15:42 1622 1

原创 关于 redux-thunk 的作用,认识,理解

关于 redux-thunk 的作用,认识,理解看这篇文章之前,如果你已经看到一些 redux-thunk 的教程,是不是觉得一头雾水,redux-thunk 到底有什么作用,用在哪里,代码不仅没有简化,反而还增加?基于我初学的一些疑惑和后来疯狂的百度,总结了一下首先来一段代码示例如果我们有一个异步请求,获取数据展示在页面上。假设 redux 都是已经写好了。我们只模拟请求阶段//...

2020-03-15 19:45:03 884

原创 vue 项目进行直播视频 vue-video-player

vue 项目进行直播视频最近电商直播非常火,于是接到需求搞搞!看了很多相关的文章,没看出有啥不同,最后直接采用 vue-video-player 来开发。直播流返回的是m3u8格式的,flv格式的播放不了,可能是我配置问题。然后关于这个插件可以用 flash 。我也没去深究,毕竟谷歌都快放弃flash了。安装插件npm install vue-video-player videojs-...

2020-03-11 21:51:25 2147

原创 vscode对vue文件没有智能提示 node-sass无法安装

如题前几天在搭建新的项目的时候,脚手架升级到了 vue-cli4.x 的版本,然后像往常一样创建了新的项目。可是在安装依赖的过程中,node-sass 需要在 github 上下载一个依赖包。一直没安装成功,后来改用了 cnpm (淘宝的镜像)去安装全部依赖。依赖是装上了,可是引发了下面的很多问题vscode 对于 vue 文件无法进行智能提示没有智能提示那简直比白板面试还要难受,甚至乱...

2020-03-01 15:46:44 980

原创 git 使用 tree命令

前言很久之前看到这种树状结构,我一直以为是自己一点点敲出来的。后来在 linux 上才发现,这是一个 tree 的命令行工具生成的。今天发现原来 window 平台的 git 也可以安装 tree。记录一下过程和普及下 tree 命令├── README.md├── babel.config.js├── package.json├── public│ ├── favicon.ico...

2020-02-27 22:33:55 475

原创 在wsl中使用node和wsl与window环境冲突问题 使用 Ubuntu 系列(6️⃣)

window Terminal/wsl 真香自从换上了window Terminal。总算找到一些命令行的感觉。比如终于装上了 oh-my-zsh 。用上了 zsh 各种方便的插件。可是对于全局的环境来说 wsl 还是差了那么一点味道,node 之类的在 window 下安装了在 wsl 中不通用!今天我们来把 wsl 的 node 环境也装上没装之前查看 node 版本和 npm 版本...

2020-02-26 14:36:08 1262 3

原创 ffmpeg合并M3U8加密的视频 ts 合并为 mp4

文章引用于 ffmpeg 合并 m3u8 ts key 文件 解决 Invalid data found when 错误之前也写过一篇文章,使用ffmpeg下载 M3U8 资源的视频。今天接着来拓展一下这个下载视频寻找资源要想下载 M3U8 的资源,最起码得找到下载的链接,可能这个非常好找了,找到控制台的 NetWork 查看请求就行了。可是这有一点非常不好的就是,使用 ffmpe...

2020-02-23 22:28:22 8087

原创 Ubuntu 安装 thefuck

Ubuntu 安装 thefuckthefuck 是一个命令行插件,用于敲错命令了,输入一个 fuck 即可获得提示thefuck github 地址根据 github 的介绍,thefuck 依赖与 python3,python3-dev ,pip3,还有 python3-setuptoolsubuntu 踩坑之旅在桌面版中,内置了 python2 和 python3。可是默认是...

2020-01-17 09:47:56 400

原创 wsl 子系统(window 上的 linux 系统)迁移到非 C 盘的位置 使用 Ubuntu 系列(5️⃣)

wsl 子系统(window 上的 linux 系统)迁移到非 C 盘的位置 使用 Ubuntu 系列(5️⃣)在 Windows Terminal 使用 gitbash美化 Windows Terminal(iTerm2-Color-Schemes)win10 安装 Ubuntu 和 Windows Terminal添加 window terminal 到右键菜单...

2020-01-15 14:19:30 4456

原创 手机/微信/浏览器的字体设置太大,rem 计算不准确

手机/微信/浏览器的字体设置太大,rem 计算不准确的问题鉴于用微信的人特别的多,而且微信出了特别贴心的功能就是调整界面字体大小。可是这一调 H5 就出问题咯。。。页面变得特别大,记录一下这个爬坑过程(H5 用的是 REM 单位)单刀直入,直接贴出正常的font-size的值。我这边正常应该是 46.9在微信上把字体调大后。通过 spy-debugger 来进行调试。发现如果微信的字...

2020-01-14 22:40:25 1567

原创 使用 weinre/spy-debugger 调试手机页面

使用 weinre 调试手机页面很久之前折腾过 chrome 的调试工具,感兴趣可以看下这个: chrome 调试手机网页可是局限性太大了:需要是 Android+chrome需要运行在 Android 的 chrome 上才可以,如果进行微信/其他平台的 H5 开发并不能很好的调试有墙!实力劝退使用 weinre 就不存在那么多限制了,下面的操作是在 window+Andoid ...

2019-12-25 12:00:01 353

原创 vue中使用腾讯地图选择地址(二)

腾讯地图选择地址进阶版(二)使用腾讯地图的地图组件,获取用户经纬度和当前地址之前也写过一篇 vue中使用腾讯地图选择地址不过不太完善。因为毕竟要跳转新的页面选择在回调回来,最近也发现了一些新的坑!今天来填坑了腾讯地图相关文档地图选点组件申请腾讯地图的我就不多叙述,跟着提示申请即可效果图:写成组件之前采用的是第二种方式,直接跳转新页面,后来还是问题很多,所以我改成了用 if...

2019-12-14 16:52:20 1648 2

输入框回车生成标签的demo

在输入框输入字符后回车生成对应的标签,可以删除和无限添加,并且增加了很多的事件监听。如回车前监听,回车后,删除标签,重新渲染数据,清空数据等。

2018-12-08

【window环境】已经编译的 draco-1.4.1.zip 对应最新版本 1.4.1

谷歌开源 draco window环境下已经编译好了,可以直接使用,如果想学linux编译,可以看我的csdn文章

2020-04-25

H5拆红包效果H5拆红包效果

H5拆红包效果,按钮一直变动大小,点击后翻转,然后弹出红包内容

2018-10-06

iTerm2-Color-Schemes for window Termial.zip

在 window Termial 平台下使用 iTerm2-Color-Schemes的200多套样式。里面都是JSON配置文件,如有不懂可以联系我,测试可用,具体可以看文章:https://blog.csdn.net/Jioho_chen/article/details/100624029

2019-09-08

反编译小程序-无夜神模拟器.zip

反编译小程序所需的安装包。使用方法可以看我的博文 https://blog.csdn.net/Jioho_chen/article/details/105121377

2020-03-26

VR-three-demo.zip

three的2个小示例文件,具体用法可以到我的csdn找找~里面包含可运行的html,js代码,还有几个现成的3d建模文件

2020-04-25

php发送邮箱库

使用该phpmailer库,结合着我的博客中的PHP使用phpmailer发送邮件和详细配置即可使用

2018-07-13

chrome扩展 postman

chrome下的postman扩展,解压后打开chrome,使用新增扩展,使用开发者模式,加载已下载的压缩包即可以使用

2018-09-23

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除