自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

huangpb的博客

好好学习,天天向上!

  • 博客(249)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 Element UI 组件库分析和二次开发(二)

一、 Makefile 文件Make是最常用的构建工具,它的规则配置一般写在 Makefile 文件里。make 的使用有点像 package.json 里的 scripts,把一段长命令用一段短命令来执行。Makefile文件由一系列规则(rules)构成。每条规则的形式如下。<target> : <prerequisites> [tab] <commands>上面第一行冒号前面的部分,叫做"目标"(target),冒号后面的部分叫做"前置条件

2021-11-21 23:09:24 226

原创 Make 命令教程

Make 命令教程补充:1. make 命令时报错:Makefile:5: *** missing separator. Stop.原因:Makefile 文件命令前没有 tab,或者 tab 的格式不对。我用的是 VSCode 编辑的 Makefile 文件,可能是编辑器的 tab 跟 make 解析Makefile 时的 tab 不一致。用 vim 编辑Makefile 文件就好了。...

2021-11-21 11:08:24 231

原创 node安装依赖包时 node-pre-gyp 报错解决办法

报错信息:gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2gyp ERR! stack at ChildProcess.onExit (/Users/node_modules/node-gyp/lib/build.js:194:23)gyp ERR! stack at ChildProcess.emit (events.js:315:20)gyp ERR! stack .

2021-11-13 17:57:30 34

原创 Element UI 组件库分析和二次开发(一)

一、Element UI 组件库二次开发的大致流程1. 从 Element 官方 clone 一份dev 源码到本地2.安装依赖:npm i3.修改组件源码组件内容在 “packages/组件目录” 里修改。组件样式在 “packages/theme-chalk/src/组件名.scss” 里修改。查看效果可以在 “examples/docs/zh-CN/组件名.md” 里增加自己需要调试的代码,就可以在页面的相应的组件的例子中看到自己修改后的效果。4.如果要上传到 n...

2021-11-08 09:41:53 636

原创 vue-create-api

一、介绍​​​​​​​vue-create-api是一个能够让 Vue 组件通过 API 方式调用的插件。经常在弹出框上使用。组件必须定义 name 属性,例如,this.$createHello 里的 hello 就是组件名 调用 $create 方法时,组件会被添加到 body 调用 $create 方法返回值是Vue组件实例,可以用返回值的 remove() 方法去销毁组件和删除添加到 body 下DOM元素二、安装npm i -S vue-create-api三、使用..

2021-10-15 00:04:21 38 1

原创 vuedraggable — vue拖拽插件

Vue.Draggable是一款基于Sortable.js实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖jQuery为基础、vue 2过渡动画兼容、支持撤销操作。一、安装npm i -S vuedraggable...

2021-09-29 23:24:46 60

原创 sortablejs — 强大的拖拽库

Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库,如Bootstrap、Element UI。你可以用来拖拽div、table等元素。一、sortablejs 最基本的示例<div id="itxst"> <div data-id="a">item 1</div> <

2021-09-29 00:10:34 47

原创 yarn - 包管理工具

一、简介Yarn 是一款快速、可靠、安全的包管理器,跟 npm 功能类似,但是是为了弥补 npm 的一些缺陷而出现的。yarn 也是从 npm 安装软件包并保持相同的包管理流程。1、yarn 对比npm 的优势1. 缓存下载过的包Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。npm同一个包每次安装都要重新下载。2. 并行下载yarn 同时利用并行下载以最大化资源利用率,因此安装速度更快。npm 是按照队列执行每个 package,也就是说必须要等到当前 package.

2021-09-25 15:28:04 23

原创 Vue常用插件

1、vue-create-api一个能够让 Vue 组件通过 API 方式调用的插件。经常在弹出框上使用。组件必须定义 name 属性,例如,this.$createHello 里的 hello 就是组件名 调用 $create 方法时,组件会被添加到 body 调用 $create 方法返回值是组件实例,可以用返回值的 remove() 方法去销毁组件和 body 下添加的组件内容...

2021-09-18 00:07:42 26

原创 nvm ~ node版本管理工具

一、安装 nvm1. 卸载之前安装的 node安装 nvm 前,要把之前安装的 node 卸载干净,详细卸载步骤,请移步这里。2. 安装 nvm这里要注意,官方明确说明用 homebrew 安装是不支持的,那我们就不用 brew 安装,就安装官方介绍的安装。1. 检查主目录下有没有 .bash_profile或 .zshrc 文件bash 终端开发者检查有没有 ~/.bash_profile 文件,zsh 终端开发者检查有没有 ~/.zshrc 文件。cd ~/ls...

2021-09-12 21:39:50 51

原创 Mac彻底卸载node

一、卸载从node官网下载pkg安装的nodesudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}二、卸载用 homebrew 安装的nodebrew uninstall node三、如果你感觉删的不够干净,可以再细分删除1. 删除 npm 相关内容sudo npm uninstall npm -gsudo rm -rf ~/.npm2. 删除/u.

2021-09-12 11:18:16 41

转载 Vue.js CLI4 Vue.config.js标准配置 (最全注释)

前言:Vue.js CLI工具 不知不觉发展到了4.0时代,CLI给人最直白的感受是没有了build文件夹跟config文件夹,所有的配置都在Vue.config.js完成。那么该文件的配置至关重要。现在我们来看一下最新配置是怎么配置的。有三种方式,推荐第二种标准版(无需安装依赖,直接复制即可配置)。1、依赖库npm install vue-cli-configjs2、标准版// vue.config.jsconst path = require('path');const

2021-09-11 15:43:34 128

原创 Vue 面试题

1、怎样理解 Vue 的单向数据流?所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收到后,由

2021-08-29 10:33:14 60

原创 Vue中的输入框使用场景总结

1. 自动聚焦第1种方法:使用 $nextTick<input ref="myInput" v-model="text"/>mounted() { this.$nextTick(function () { this.$refs.myInput.focus(); });},第2种方法:自定义 v-focus 指令Vue.directive('focus', { inserted(el) { el.focus(); },});如果你有

2021-08-14 20:27:13 115

原创 spa项目路由通用配置

1. 定义路由import Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);const routes = [ { path: "/", component: () => import(/* webpackChunkName: "layout" */ "./layouts/BasicLayout"), beforeEnter: (to, from, next) =&gt.

2021-08-08 11:06:22 31

原创 Git 实战总结

1. 多人开发的时候,遇到合错分支时的处理commitA commitB commitMergeTest commitC,比如最近有4个提交,commitMergeTest 这次提交有人合错分支了(本来打算合master,却合了test分支),想要把这次提交的代码踢除。解决办法:从 commitC 切一个新分支出来,然后用 cherry-pick 合并commitBcommitA(当然,这种方法只适合处理要添加的提交少的情况,如果要添加的提交很多,要 cherry-pick 很多次,会很麻烦...

2021-08-07 17:14:05 35

原创 Vue实战经验总结(持续更新)

我本地的开发环境:Vue CLI 版本为:4.5.111. 本地开发环境请求服务器接口跨域的问题用 Vue CLI 创建的项目可以在 vue.config.js 添加以下代码:module.exports = { devServer: { proxy: { // 以"/api"开头的请求都会代理到目标服务器 '/api': { target: 'http://jsonplaceholder.typicode.com', // 接口域名

2021-07-25 23:08:56 195 5

原创 Vue 实现高度过渡

方法一:自己封装一个高度过渡组件Vue的 <transition> 组件是实现不了元素高度过渡的,所以我们可以自己封装一个高度过渡组件。组件的原理是:使用原生的 CSS3 transition 属性,在改变元素的高度的同时会有过渡效果。这里有个注意点,显示的时候为什么元素的高度要赋值为offsetHeight 的高度,而不能设置成 auto?原因是CSS3 transition 属性不支持 height 为 auto 的过渡。以下是组件的封装代码:<...

2021-07-18 10:54:31 268

原创 Vue + Animate.css 实现过渡效果

1. 首先安装Animate.cssnpm install animate.css --save2. 在 main.js 引入import 'animate.css';3. 更改 <transition> 组件的class我使用的是 Animate 4.x 版本,跟 3.x 语法有区别。<transition enter-active-class="animate__animated animate__bounceInLeft" leav.

2021-07-15 23:26:08 35 2

原创 解决GitHub访问慢的问题

最近经常遇到 github 网页打不开,即使打开了感觉也很卡,而且图片经常显示不出。以下是一个简单的通过绑定host就能提高访问速度的方法。GitHub里面图片都在githubusercontent.com域名下,我们只需要在hosts里绑定域名和对应的IP。1. hosts内容# 最近更新时间:2021-07-10 10:21:59# GitHub Host Start185.199.108.154 github.githubassets.com140.82.

2021-07-10 11:28:15 93

原创 git commit 表情之 gitmoji

一、全局安装npm i -g gitmoji-cli二、在commit message 里使用git commit -m ':art: 表情'在终端查看 log 显示的还是文案代号,在GitHub或GitLab的提交记录里看到的是表情。三、Gitmoji表情速查表Gitmoji 代码 说明???? (调色板) :art: 改进代码结构/代码格式⚡️ (闪电) :zap: 提升性能???? (火焰) :fire: 移除代码或文件???? (bu...

2021-07-10 10:31:29 56

转载 ES6 中的 super 关键字

​super 关键字指向当前对象的原型对象。1.super的简单应用const person = {name:'jack'}const man = {sayName(){return super.name;}}Object.setPrototypeOf( man, person );let n = man.sayName(); //jack注意,super 关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。目前...

2021-07-01 23:48:48 54

原创 引入echars5.0报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

问题引入 echars 5.0 遇到报错 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’解决引入方式改为:import * as echarts from 'echarts';// 或const echarts = require('echarts');

2021-06-27 22:33:29 97 2

原创 nprogress - 页面顶部细长的进度条插件

这是一个类似youtube、Medium等网站上的小进度条插件。页面切换的时候顶部会出现一个细长的表示页面加载进度的进度条。一、安装npm install --save nprogress二、使用比如用在 SPA Vue 项目页面切换的时候:import NProgress from 'nprogress';import 'nprogress/nprogress.css';import router from './router';// 路由前置守卫:页面跳转前执行rout

2021-06-20 22:14:24 28 1

原创 Vue Cli 创建的项目使用 jest 进行单元测试

用 vue create 创建项目的时候选手动配置,然后选择 jest,生成的项目中就会有一个 jest 的配置文件jest.config.js 和一个对 HelloWorld.vue 组件的单测示例tests/unit/example.spec.js。用 Cli 创建的项目的时候,单元测试的准备工作脚手架已经帮你做好了,你直接运行 npm run test:unit 就能把单测示例跑起来。jest.config.js首先,我们来看一下 jest 配置文件,默认生成的配置文件只有pres...

2021-05-31 22:36:05 298 2

转载 造轮子 -- 根据 Vue Router 原理动手实现一个数据驱动的 router

我们来手把手撸一个下面这样的数据驱动的router:new Router({ id: 'router-view', // 容器视图 mode: 'hash', // 模式 routes: [ { path: '/', name: 'home', component: '<div>Home</div>', beforeEnter: (next) => { console.log('befo.

2021-05-30 15:47:59 59

转载 【源码拾遗】从vue-router看前端路由的两种实现

随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。“更新视图但不重新请求页面”是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式: 利用URL中的hash(“#”) 利用History interface在 HTML5中新增的方法 vue-router是Vue.js框架的路由插件,下面我们从它的源码入手

2021-05-29 22:21:07 47

转载 VueRouter 源码深度解析

路由原理在解析源码前,先来了解下前端路由的实现原理。 前端路由实现起来其实很简单,本质就是监听 URL 的变化,然后匹配路由规则,显示相应的页面,并且无须刷新。目前单页面使用的路由就只有两种实现方式hash 模式 history 模式www.test.com/#/ 就是 Hash URL,当 # 后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange 事件来监听到 URL 的变化,从而进行跳转页面。History 模式是 HTML5 新推出的功能,比之 Hash U

2021-05-29 10:23:29 36

原创 vue-devtools 安装教程

这里介绍两种安装vue-devtools 的方式。方式一:通过谷歌应用商店安装vue-devtools 扩展程序方式二:把本地已有的扩展程序文件添加到谷歌浏览器的扩展程序里这种方式适用于无法打开谷歌应用商店的同学。1. 先在收藏猫插件点击“下载插件手动安装”下载 vue-devtools 扩展插件。下载下来的文件是以 .crx 为扩展名的,Chrome的“扩展程序”都是以 .crx 为扩展名。2. 进入谷歌浏览器的扩展程序页,直接把刚才下载的扩展程序文件拖进去即可。...

2021-04-05 00:13:14 254

原创 Easy New File 安装教程

Easy New File是一款 Mac 右键增强工具,同时这也是一款Finder扩展应用工具,主要可以帮你增强右键的功能,比如在右键菜单中增加新建文件、拷贝路径、打开终端等,非常的便捷实用。下载安装完成后有一个地方要设置一下,不然没有效果。点一下“打开系统设置”,然后把下面这个勾上就好了...

2021-04-04 23:08:32 89

转载 jQuery源码解析:attr,prop,attrHooks,propHooks详解

我们先来看一下jQuery中有多少个方法是用来操作元素属性的。首先,看一下实例方法:jQuery.fn.extend({ attr, removeAttr, prop, removeProp, addClass, removeClass, toggleClass, hasClass, val});然后,看下静态方法(工具方法):jQuery.extend({ valHooks, attr, removeAttr, at

2020-12-26 10:10:43 59

原创 js常用字符串API汇总

js的字符串是不可变的:String 类的所有方法都不允许改变某个字符串的内容。那些像 String.toUpperCase() 之类的方法返回一个全新的字符串,而没有修改原始字符串。在 ES5 以及之前,字符串的行为类似于每个元素为单个字符的只读数组。一、字符串 API1. str.slice(start [,end]) 和str.substring(start [,end])截取。slice() 和 substring() 用法类似,只是slice支持负数,而substring的负.

2020-11-21 23:17:13 565

原创 浏览器Cookie详解

一、了解 CookieCookie最开始被设计出来是为了弥补HTTP在状态管理上的不足。HTTP协议是一个无状态协议,客户端向服务器发请求,服务器返回响应,故事就这样结束了,但是下次发请求如何让服务端知道客户端是谁呢?这种背景下,就产生了Cookie。 cookie 存储在客户端: cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。因此,服务端脚本就可以读、写存储在客户端的cookie的值。 cookie 是不可跨域...

2020-10-15 23:26:22 1701 1

转载 Serverless

一、介绍是指依赖于第三方应用程序或服务来管理服务器端逻辑的应用程序。 此类应用程序是基于云的数据库(如腾讯云,Google Firebase)或身份验证服务。无服务器也意味着开发为事件触发的代码,并且在无状态计算容器中执行。 这种架构通常称为功能即服务(FaaS)。FaaS(Function as a service 函数作为一种服务) 本质上是一个小程序或函数,它执行由事件触发的小任务,而不像单个应用程序那样做很多事情。因此,在FaaS架构中,我们将应用程序分解为小型,自包含的程序或功能,而不

2020-09-29 22:19:36 97

原创 通信API MessageChannel

一、简介MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个MessagePort 属性发送数据。简单来说,MessageChannel创建了一个通信的管道,这个管道有两个口子,每个口子都可以通过postMessage发送数据,而一个口子只要绑定了onmessage回调方法,就可以接收从另一个口子传过来的数据。MessageChannel的使用场景:2个Web Worker间通信二、2个简单的使用例子例子1: var ch = new Messa..

2020-07-05 17:47:36 396

原创 css in js开发利器 - styled-components(样式组件)

styled-components是一个常见的 css in js 类库,和所有同类型的类库一样,通过 js 赋能解决了原生 css 所不具备的能力,比如变量、循环、函数等。注意:有时候 React 版本和 styled-components 版本不匹配时使用 styled-components 会有 hook 报错,要升级一下 React 版本。一、安装npm install --save styled-components二、使用文档1. 基本使用import styled.

2020-06-27 23:46:45 544

原创 Homebrew - Mac包管理工具

Homebrew 又叫 brew,是Mac OSX上的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能。简单的一条指令,就可以实现包管理,而不用你关心各种依赖和文件路径的情况,十分方便快捷。一、安装按照Homebrew官网提供的地址安装,很简单,就一条命令。二、Homebrew基本使用1. 安装软件比如安装node:brew install node2...

2020-04-19 09:35:22 197

原创 前端上传

上传前用户要选择本地要上传的文件,用户可以通过以下三种方式操作触发:通过input type="file" 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴一、三种选择文件的不同操作1. 通过input type="file" 选择本地文件通过这种方式选择文件的话,前端可以有2种上传方式:Ajax请求 和 Form表单。Ajax请求:就是平时用的 post...

2020-04-11 11:45:57 160

转载 Node debugger之 谷歌Inspect扩展程序

一、安装Node.js V8 InspectorNode.js V8 Inspector 是Chrome的一个调试node的扩展程序,可以去谷歌商品下载。二、示例程序为了方便讲解,下面是一个示例脚本。首先,新建一个工作目录,并进入该目录。$ mkdir debug-demo$ cd debug-demo然后,生成package.json文件,并安装Koa框架和 koa...

2020-03-23 23:45:41 246

原创 GitBook 本地安装和使用

GitBook 是一个基于 Node.js 的现代化文档平台,可使用 Github/Git 和 Markdown 来制作精美的电子书。一、GitBook 本地安装和使用教程1. 全局安装 gitbook 脚手架$ npm install gitbook-cli -g2. 检查是否安装成功$ gitbook -VCLI version: 2.3.2GitBook vers...

2020-03-08 16:43:29 1412

Command_Line_Tools_macOS_10.14_for_Xcode_10.2.dmg

安装 HomeBrew 是会提示叫你下载的命令行工具。

2019-08-24

huangpb0624的留言板

发表于 2020-01-02 最后回复 2020-01-02

空空如也

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

TA关注的人 TA的粉丝

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