自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

tangyuhui

前端技术经验分享

  • 博客(93)
  • 收藏
  • 关注

原创 nginx反向代理支持网址自动添加斜线

nginx反向代理自动添加斜线问题

2022-06-16 16:06:38 2960 1

原创 对比文件,生成类似github diff对比报告

对比文件,生成github diff报告

2022-05-18 20:25:22 851

原创 第三方包补丁方案(优雅修改node_modules)

一、背景我们在平时开发过程中可能会遇到以下问题● 开源npm包不能满足我们实际预期,需要个性化支持● 开源的npm包存在一些小小的bug,需要修复而我们只需要对源码进行小小的改动就能满足我们的需求,这个时候我们该怎么办?二、以往方案分析方案一:在项目的node_modules下找到插件的源码直接修改优点:简单直接、快速见效缺点:不能持久化,一旦重新安装就失效方案二:去github上fork第三方包代码进行修改,将修改过后的代码发布到公司私服npm上使用优点:可持久化,项目成员都可以使用

2022-05-09 11:11:17 1234

原创 vue入门秘籍

学习目标会搭建前端开发环境会创建Vue实例,知道Vue的常见属性会使用Vue的生命周期的钩子函数会使用vue常见指令会使用vue计算属性和watch监控了解vue-cli使用会编写vue组件掌握组件间通信了解vue-router使用了解vuex使用实战1.认识VueVue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整

2021-04-18 21:10:25 261

原创 typescript教程

搭建环境全局安装tsnpm install -g typescript初始化项目tsc -inittsconfig.json常用配置{ "compilerOptions": { "allowUnreachableCode": true, // 不报告执行不到的代码错误。 "allowUnusedLabels": false, // 不报告未使用的标签错误 "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use str

2021-03-10 21:46:47 311

原创 RN端ios全面屏刘海适配

项目中引入以下组件SafeAreaViewPlus.js 。可以自定义顶部和底部颜色。注意: 如果有用到 native-base 提供的headerTitle组件,下面文件中topArea的样式需改为height: 24, 如果没有用到,height:44/*** iPhone适配全面屏(iPhoneX)*/import React, {Component,} from 'react';import {DeviceInfo, SafeAreaView, StyleSheet, View, .

2021-01-20 10:07:25 1354 2

原创 git相关命令及规范

git分支命名• master:主分支,负责记录上线版本的迭代,该分支代码与线上代码是完全一致的。• develop:开发分支,该分支记录相对稳定的版本,所有的feature分支和bugfix分支都从该分支创建。其它分支为短期分支,其完成功能开发之后需要删除• feature/:特性(功能)分支,用于开发新的功能,不同的功能创建不同的功能分支,功能分支开发完成并自测通过之后,需要合并到 develop 分支,之后删除该分支。• release/:发布分支,用于代码上线准备,该分支从develop分支

2021-01-19 09:38:08 105

原创 android 7.0 https抓包方案

1、下载安装逍遥模拟器2、模拟器允许root3、安装charles,下载证书4、使用openssl的x509指令进行cer证书转pem证书 和 用md5方式显示pem证书的hash值证书转换,如果已经是pem格式就不再进行这一步openssl x509 -inform DER -in xxx.cer -out charles.pem进行MD5的hash显示查看openssl版本openssl versionopenssl版本在1.0以上的版本的执行这一句openssl x5

2021-01-11 09:33:06 1084

原创 eslint vscode保存时自动格式化失效解决方法

打开vscode的设置。setting.json文件,加入以下配置 "editor.formatOnSave": false, // 自动修复 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, }, // 配置 ESLint 检查的文件类型 "eslint.validate": ["javascript","vue","html"],...

2020-06-30 14:01:33 9232 2

原创 react-native开发必备技巧

搭建环境下载android studio https://developer.android.google.cn/studio/index.htmlVSCode 搭建 React Native 环境https://www.cnblogs.com/hl1223/p/11049968.htmlhttps://blog.csdn.net/young_emily/article/details/790057283、连接夜神adb connect 127.0.0.1:620014、查看a

2020-05-14 09:32:02 322

原创 Git Commitizen 提交规范化、提交信息验证、自动生成changelog

规范提交信息1、全局安装Commitizen npm install -g commitizen2、在项目根目录下运行下面命令,使其支持angular的 Commit message 格式commitizen init cz-conventional-changelog --save --save-exact注意,–save-exact 相当于锁定版本号此时,package.jso...

2020-04-02 10:15:11 755

原创 js金融业务开发小技巧

第一种方法// 输入小数点后两位金额const inputMoney = (value) => { value = value || '' return value.replace(/[^\d.]/g, '') .replace(/^\./g, '') .replace(/\.{2,}/g, '.') .replace('.', '$#$') .r...

2020-03-18 21:26:34 298 1

原创 node-sass下载太慢解决方法

在项目根目录建立 .npmrc文件sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

2020-03-11 17:18:33 1869

原创 vue-cli3 全局引入scss公共变量

css: { loaderOptions: { // 设置 scss 公用变量文件 sass: { data: `@import '~@/assets/style/public.scss';` } } },

2020-03-10 11:08:54 1592

原创 怎么样使父元素的overflow:hidden不影响到子级absolute绝对定位元素

在项目中使用了popover组件,由于父级设置了overflow:hidden,当子级长度超出时,即使子元素是绝对定位元素也受到了影响。查了很多资料,发现只要父级元素不设置position:relative和position:absolute样式,就不会隐藏绝对定位的子元素。...

2020-02-14 19:37:03 7870 1

原创 常见屏幕分辨率

@media (min-width: 320px)@media (min-width: 360px)@media (min-width: 375px)@media (min-width: 386px)@media (min-width: 393px)@media (min-width: 401px)@media (min-width: 750px)@media (min-width:...

2020-01-11 23:20:23 218

原创 vue之provide/inject

经测试发现,当provide提供为对象或者是某个方法时,子对象取值才会是响应式的。父组件代码 parent.vue<template> <div> <Child /> <button class="btn" @click="clickTest" > 点击我 </but...

2019-12-13 15:13:37 320

原创 eslint推荐配置

// https://eslint.org/docs/user-guide/configuringmodule.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // htt...

2019-12-05 18:02:57 687

原创 vue仿dva自动处理请求loading状态

1、相关插件准备vue、vue-wait、axios2、在main.js引入vue-wait引入步骤如下,具体vue-wait文档请查看 https://github.com/f/vue-wait/tree/masterimport VueWait from 'vue-wait'//Loading集中管理控件Vue.use(VueWait) // add VueWait as Vue ...

2019-11-20 16:49:00 1070

原创 indexedDb

参考教程:https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1

2019-10-11 14:01:20 6703

原创 使用switchHost管理host

1、清除缓存,使配置生效ipconfig/flushdns

2019-10-09 15:26:03 327

原创 css文本两端对齐

<template> <div class="bg-fff p-10"> <p class="order-msg"> <span>订单号</span>:No1234567</p> <p class="order-msg"> <span>创建时间</span&gt...

2019-09-23 17:19:52 135

原创 commander使用技巧

在文章开头,我们先假定这个命令行工具叫做 tangTool。使用技巧1、我们希望用户在输入 tangTool 时,自动输出帮助信息。而用户输入 tangTool view 时(带子命令), 就才执行命令。技巧来了,只需要我们再定义command的时候,传入它第二个参数。就能达到这个效果了。...

2019-09-17 16:18:33 2868 1

原创 开发npm插件步骤

准备工作1、在项目根目录下建立.npmignore2、修改package.json,可参考github上别的项目发布1、切换镜像到npm(如果不切换登录的就是淘宝的cnpm):npm config set registry http://registry.npmjs.org/2、登录: npm login3、推送 npm publish --access=public...

2019-09-17 15:39:43 583

原创 npm-run-all 启动静态服务器并自动打开浏览器

package.json 文件此处参考swagger-ui项目 "scripts": { "open-static": "node -e 'require(\"open\")(\"http://localhost:3002\")'", "serve-static": "http-server dist/ -i -a 0.0.0.0 -p 3002", "start": ...

2019-09-12 10:43:07 2378

原创 vscode配置注释片段

第一步,文件-首选项-用户代码片段第二步,配置用户代码片段 configure user snippets第三步,建立新的全局代码片段{ // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // descrip...

2019-09-08 22:32:53 2702

原创 vscode tabnine 影响 emmet快捷键

前言tabnine的tab键与emmet冲突,导致emmet的补全标签功能出现问题解决方法打开文件->首选项->键盘快捷方式。在搜索栏输入tab搜索,找到键绑定值为Tab的,点击鼠标右键,选择显示相同的按键绑定。删除acceptSelectedSuggestion命令的键绑定...

2019-08-16 10:10:21 2057

原创 了解dom-diff算法

虚拟DOM1、新建react项目//全局安装脚手架工具$ npm install create-react-app -g//创建项目$ create-react-app dom-diff// 进入项目目录$ cd dom-diff// 编译$ npm run start2、定义虚拟DOM类什么是虚拟DOM? 虚拟DOM就是使用javascript对象来表示真实DOM,是一个...

2019-08-13 10:49:49 193

原创 正则基础

特殊字符零宽断言正先行断言负先行断言正后发断言负后发断言贪婪匹配与惰性匹配正则表达式默认采用贪婪匹配模式,在该模式下意味着会匹配尽可能长的子串。我们可以使用 ? 将贪婪匹配模式转化为惰性匹配模式。...

2019-08-13 10:47:39 81

原创 mac vscode code-runner无效

1、进入 ~/.vscode/extensions 目录中open ~/.vscode/extensions2、打开目录中 formulahendry.code-runner-0.9.10/out/src/codeManager.js 文件3、注释下面代码line 12://const micromatch = require("micromatch");line:225-236...

2019-07-30 22:20:09 1796

原创 npm命令

查看本地安装包信息npm ls element-ui

2019-07-25 16:18:08 96

原创 fiddler断点修改响应内容

单断点调试bpu url如: bpu http://www.baidu.com进入断点后会显示红色背景的T,同时右侧会出现调试按钮,此时可以点击break on response。再切换到raw,就可以修改响应,修改完成之后,点Run to Completion.取消断点取消断点,在命令行输入: bpu 回车就可以了...

2019-07-23 13:41:23 940

原创 vue指令:限制输入数字,可配置最大值最小值及小数点位数

directives: { // 保留2位小数点指令 不四舍五入 fixNumber: { update: function (el, { value, modifiers }, vnode) { try { let input = el.children[0] if (!inpu...

2019-07-18 14:22:22 9028 2

原创 钉钉PC端开发者版本下载及调试技巧

前言自从钉钉开发者网站更新后,翻遍整个网站都找不到钉钉的rc版本(开发者版本)下载地址,通过一些别的方式,终于搜索到这个开发者调试神器。地址请访问:https://files.alicdn.com/tpsservice/3dc67737f241f1326392d5da79897fa8.pdf?spm=a311a.9588098.0.0&file=3dc67737f241f13263...

2019-07-13 22:53:32 23349 4

原创 父元素有最大高度max-height限制,子元素的最大高度不超过父元素

有这样一个需求,将图片包裹在自适应的容器中,但这个自适应容器的高度不能超过屏幕高度的60%,而这张图片能够自动进行缩放,最大高度不能超过这个父容器。css代码如下:实现思路:在图片外再加一层div,将原有的容器设置为flex布局,而图片外新加的这层div设置flex:1,图片再设置max-height,就能完美完成这个需求了。<!DOCTYPE html><html ...

2019-07-11 22:46:07 6025

原创 flutter环境搭建教程

mac 环境获取 flutter sdk官网地址:https://flutter.io/sdk-archive/#macos下载后用 unzip 解压

2019-06-30 13:06:00 810

原创 CSS基础样式库

推荐的base.css/*css reset*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{ border-collapse:collapse;border-spacing:0;}field...

2019-06-19 10:55:46 5200

原创 vue表单输入组件之v-model

v-model的实质为语法糖,相当于v-bind:value和 v-on:input的结合。如果需要定义表单输入组件,需要在值变更的时候,在组件中触发input方法。

2019-06-19 09:25:03 220

原创 Chrome DevTools 开启性能监控

打开 URL:“chrome://flags/#enable-devtools-experiments”将 “Developer Tools experiments” 选项设置为“Enabled”,如下图重启chrome开启性能监控

2019-06-04 14:27:41 888

原创 eslint 学习

配置规则0 和 “off” 代表关闭规则1 和 “warn” 代表警告,不会阻止代码运行2 和 “error” 代表错误

2019-04-30 13:54:25 121

空空如也

空空如也

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

TA关注的人

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