- 博客(37)
- 收藏
- 关注
RSS订阅原创 npm发布自己的安装包流程，超级详细，傻瓜式教学
npm包发布流程简介1.创建项目2.完整目录结构src下的plugins文件夹作为我对外暴露的组件文件夹下面以mapcontainer组件为例，向大家展示全局暴露跟局部暴露1,mapcontainer文件夹下创建组件map-container.vue和用于单独暴露组件的index.ts2,map-container.vue组件中的name属性一定要填写，这个name就是我们对外暴露后，所使用的组件名index.ts文件内容：为组件提供 install 方法，供组件对外按需引入，将组件的n
2021-11-05 15:06:01
1278
1
原创 antd of Vue 从 1.x版本升级到2.x版本所产生的问题，长期更新。
1.Failed to resolve component: a-icon原因是antdvue2.0对图标进行升级，从而支持svg 图标文件，但这大大增加了打包产物的尺寸所以需要安装图标依赖ant-design-vue@1.2.0使用方法：旧版 Icon 使用方式将被废弃：<a-icon type="smile" /><a-button icon="smile" />2.0 中会采用按需引入的方式：<template> <smile-o
2021-09-16 11:29:05
2346
原创 回流重绘以及相关优化
回流和重绘在web日常开发中，接触的频率也算是比较高的，今天就写一篇博客记录一下自己的心得体会以及在网上查阅的资料。理解回流以及重绘之前我们要明白一个概念浏览器的渲染过程：如图所示，浏览器的渲染过程主要分为如下几个步骤：1.解析html，生成dom树；解析css，生成css树；2.css树以及dom树结合，生成渲染树**(Render Tree)**3.Layout(回流):根据生成的渲染树，进行回流，得到节点的基本信息（位置，大小）4.Painting(重绘):根据渲染树以及回流得到的几何
2020-12-08 10:58:25
144
原创 快速理解Http缓存
Http缓存分为两大类：Http缓存和浏览器缓存Http缓存两种模式：强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存。日常请求对话第一次请求浏览器：服务器服务器，我现在需要一个a.js文件，帮我找找，然后给我。服务器：次次找我要，烦不烦，文件给你可以，我们约定个时间(Expires)，时间没到别来烦我了，返回了a.js以及过期时间Expires。后续请求…浏览器会先对比当前时间是否已经大于Expires，也
2020-12-07 13:35:57
79
原创 js中继承的六种模式
<!-- 继承分为六种模式 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><bo
2020-12-01 16:07:50
67
原创 快速理解Javascript中的【防抖】，【截流】
<!-- 防抖，触发高频事件,n秒后只执行一次，如果n秒内高频事件再次被触发，则重新计算时间。 --><!-- 截流，高频触发事件，但是n秒内，只会执行一次，截留函数的目的就是稀释函数的执行频率 --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
2020-11-30 15:27:55
169
原创 node.js自动重启工具
第三方命名工具：nodemon解决频繁修改代码重启服务器问题。nodemon是一个基于node.js的第三方命令行工具，使用的时候需要独立安装。安装：npm install --global nodemon使用：将 node app.js替换为 nodemon app.js只要是通过nodemon app.js启动的服务，则它会监听文件变化，当文件发生变化时，自动重启服务器。...
2020-10-30 15:12:02
87
原创 axios的封装以及相关拦截方法
import axios from 'axios'import { get } from '../../utils/request'export default { methods: {// gethandel() {// axios.get('', {// params: {},// headers: {}// });// },// posthandel() {// //axios默认发送json格式的数据// //contten
2020-10-30 14:58:04
85
原创 node.js包说明文件
node_module 查找规则当通过npm下载依赖之后，require引入依赖程序首先会先找到当前文件所处目录中的node_module目录例：require('art-template')文件查找方式：node_module/art-templatenode_module/art-template/package.jsonnode_module/art-template/package.json中的main属性main属性记录了art-template的入口模块如果package.
2020-10-30 14:57:03
153
原创 animation与transition
先说说transitiontransition有四个基本概念，只要记牢这几个概念，以后碰到transition就不会犯晕了transition: [属性名] [持续时间] [速度曲线] [延迟时间];//高度属性的值改变时，延迟 0.5 秒后以 ease 曲线进行过渡，持续2秒：transition: height 2s ease .5s;//监听所有属性transition: all 2s ease .5s;transformtransform: [转换函数];transfor
2020-10-28 11:21:57
104
原创 异步编程Promise，PromiseAll
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。function sleep(ms) { return new Promise(function(resolve, reject) { setTimeout(resolve) })}sleep(500).then(() => console.log('finished'))...
2020-10-12 13:59:05
98
原创 快速理解原型链
话不多说，举个例子：var a = { x:10, calculate:function(z){ return this.x + this.y + z }}var b = { y:20, __proto__:a}var c = { y:30, __proto__:a}console.log(b.calculate(40))//70console.log(c.calculate(40))//80function Foo(y){ this.y = y}Foo.pr
2020-10-10 15:31:39
85
原创 双层for循环数组去重
首先定义一个数组let arr=[1,1,1,2,3,6,5,4,8,8,9]定义去重方法for(let i=0;i<arr.length;i++){ for(let j=i+1;j<arr.length;j++){ if(arr[i]==arr[j]){ arr.splice(j,1); j--;//当arr删除掉一位之后，j也要相应的后退一位，不然数组查重会漏掉一位 } }}console.log(arr)...
2020-10-10 09:53:13
1542
原创 array数组中私有方法
concat()用于连接两个或多个数组，该方法不会改变现有的数组，而是返回被连接数组的一个副本。join()把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。若省略了分隔符参数，则使用逗号作为分隔符。push()向数组的末尾添加一个或多个元素，并返回新的数组长度。pop()用于删除数组的最后一个元素，把数组长度减1，并返回被删除元素。如果数组已经为空，则 pop() 不改变数组，并返回 undefined。shift()用于把数组的第一个元素从其中删除，并返回被移除的
2020-10-10 09:52:46
135
1
原创 vuex几大属性以及不同的引入方法详解
首先通过vue3.0vue create 创建一个vue的项目引入路由cnpm install vue-router --save引入Vuexcnpm install vuex --save在main.js中声明import Vue from 'vue'import Vuex from 'vuex'import App from './App.vue'import Router from 'vue-router'import router from './router'Vue.
2020-10-10 09:48:43
186
原创 TypeScript 基础类型大全
1.任意类型 any 声明为 any 的变量可以赋予任意类型的值2.数字类型 number3.字符串类型 string 一个字符系列，使用单引号（’）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式4.布尔类型 boolean 表示逻辑值：true 和 false5.数组类型 声明变量为数组6.元组 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同let x: [string, number];x = ['Runoob', 1];
2020-09-17 09:58:32
299
原创 简单理解函数柯里化
柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。通俗的说，柯里化其实就是将一个多参的函数，转换为单参的函数// 非柯里化function add(x, y) { return x y; } add(1, 2) === 3; //柯里化function addX(y) { return function(x) { return x y; }} addX(2)(1) == 3;.
2020-07-20 09:15:13
193
原创 轻松理解js中this指向
this指向的两点概念1.this永远指向一个对象2.this的指向取决于函数调用的位置function fun(){ console.log(this.s);}var obj = { s:'1', f:fun}var s = '2';obj.f(); //1fun(); //2上述代码中，obj.f调用，因为函数的运行环境在obj对象内，所以this的指向是对象obj而在全局的作用域下调用fun()，函数中的 this 就会指向全局作用域对象wi
2020-07-13 15:36:36
115
原创 【js】Map以及Set，WeakSet 和 WeakMap，什么是弱引用，垃圾回收？
map的存储结构为键值对的格式，map方法具有极快的查收速度map：map的特性：由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：var m = new Map();m.set('Adam', 67);m.set('Adam', 88);m.get('Adam'); // 88map基本使用方法：var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);m.get(
2020-07-10 14:51:06
576
原创 【js】数据类型转换
在理解数据类型之前我们要清楚，堆和栈的区别javascript的内存分为堆和栈简单的数据类型存放在堆中，在堆中直接开辟一个空间，存放的是一个值简单数据类型：Number ， string ， Boolean， null， undefined复杂的数据类型：通过new关键字创建的对象，如object，array，date等复杂的数据类型存放在栈中，它在栈中存放的是一个十六进制的地址，这个地址指向的是堆中存放的数据...
2020-07-09 16:05:57
93
原创 BFC（Block Formatting Contexts）(块级格式化上下文)
了解BFC之前先了解一下普通流的概念元素按照在HTML中的位置至上而下的顺序进行布局，行内元素水平排列，直到行内被占满后换行，块级元素则会渲染成一个新行通俗来说可以把BFC理解成一个封闭的箱子，箱子内部的元素无论如何变化，都不会影响到箱子外部BFC的特性1.上下边距的堆叠举个栗子<head>div{ width: 100px; height: 100px; background: lightblue; margin: 100px;}</
2020-07-01 15:26:29
143
原创 AntDesignPro of Vue---权限管理详解
2020六月也是庆祝自己换了新公司，接触到了很多新的业务这个AntDesignPro of Vue着实让我大开眼界（原谅我没见过世面 ）开源的一个前端框架，写这篇博客也是为了吃透这个目前来说比较主流的框架，作为自己后期查阅的一个笔记吧1.路由pro 中的路由为了方便管理，使用了中心化的方式，在 router.config.js 统一配置和管理。2.菜单的生成通过路由中的meta属性生成的菜单，菜单与路由高度耦合hideChildrenInMenu,meta.title,meta.icon,me
2020-06-24 11:20:48
9339
4
原创 高德地图使用集合，长期更新
高德地图有基于js的相应官方api文档若想在vue上使用高德地图可以参考amap引入高德地图的三个要素1.js在index.html中引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script> 2.html<div id="container"></div>3.jsvar map = new AM
2020-06-13 09:43:45
384
原创 浏览器输入地址栏到渲染页面的整个过程发生了什么？以及https的原理？
1.网络通信 2.数据渲染首先互联网内各个网络设备之间通讯都遵循TCP/IP协议（网络通讯协议），进行通讯时分为主要分为以下几个层级，发送端从上往下，接收端从下往上应用层传输层网络层数据链路层当用户在url地址中输入了‘www.baidu.com’这个路径其中http我们称呼其为‘协议’www.baidu.com我们称呼其为‘网络地址’其中网络地址可以分为域名或者ip地址使用域名，是为了方便用户记忆，但其实对于浏览器来说，还是要把他解析为ip地址主要过程：1.输入url，浏览器根据域
2020-06-10 13:30:29
237
原创 关于sass的部分用法，快速上手
编译流程1.定义全局样式style.scss(注意是scss不是sass)2.将系统中需要处理的css样式通过@import引入到style.scss中3.每次运行前需要将style.scss编译成常规的css文件sass style.scss style.css4.也可以进行sass监听，每次运行时不用编译(需要等待几秒钟才会生效，也有可能是我电脑卡)sass --watch style.scss style.css父选择器的标识符&;一般情况下，sass在解开一个嵌套规则时就
2020-06-04 14:48:05
241
原创 flex布局，flexgrow，flexshrink
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}让第二个元素的宽度为其他元素的三倍：div:nth-of-type(1) {flex-grow: 1;}div:nth-of-type(2) {flex-grow: 3;}div:nth-of-type(3) {flex-grow: 1;}fle
2020-06-01 10:42:30
76
转载 vue-loader是什么
简单的说，他就是基于webpack的一个的loader，解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理，核心的作用，就是提取，划重点。至于什么是webpack的loader，其实就是用来打包、转译js或者css文件，简单的说就是把你写的代码转换成浏览器能识别的，还有一些打包、压缩的功能等。vue-loader 的作用（引用自官网）允许为 Vue 组件的每个部分使用其它的 webp
2020-05-28 11:08:00
886
原创 【VUE】自定义全局组件，局部组件
首先定义myBread.vue文件用来存放组件代码<template> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item> <el-breadcrumb-item> <a href="/">{{value1}}</a> </el-breadcrumb-item&g
2020-05-27 10:27:09
135
原创 【VUE】自定义全局指令，局部指令
vue项目中一般使用utils文件夹来存放全局的函数，指令首先在src目录下创建utils文件夹在文件夹内创建directives.js文件自定义指令“focus”使表单元素获取焦点export default(Vue) => { Vue.directive("focus", { inserted: function(el) { el.focus(); } })}在main.js中声明指令import directives from '@/utils/directiv
2020-05-27 09:54:17
299
原创 【VUE】静态目录assets和static的区别
相同点：assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片，字体图标，样式文件等都可以放在这两个文件下，这是相同点不相同点：assets中存放的静态资源文件在项目打包时，也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传，所谓打包简单点可以理解为压缩体积，代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器。static中放置的静态资源文件就不会要走打包压缩格式化等流程，而是直接进入打
2020-05-25 14:09:43
310
原创 【VUE】keep-alive以及生命周期
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。使用方法<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是
2020-05-25 10:16:34
5200
原创 【VUE】父子组件之间传值
子组件向父组件传值子组件：emitdata(){this.$emit('refreshList',this.cityValue,this.amount,this.requires);}父组件<searchChild @refreshList = 'getDate' ></searchChild>getDate(city,industry,Lstyle,amount,requires){ this.cityValue = city ...
2020-05-21 10:20:01
88
转载 【VUE】关于router-link以及router-view
页面上两个按钮，home以及about。两个按钮分别对应不用的页面。点击home跳转到home相对应的页面，点击about跳转到about相对应的页面。先了解一下路由的基本概念1， route，它是一条路由，由这个英文单词也可以看出来，它是单数，Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， {.
2020-05-19 09:47:16
2778
原创 【VUE】两个核心
数据驱动：保证数据和视图的一致性。组件系统：组件的核心选项1 模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。2 初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。3 接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。4 方法（methods）：对数据的改动操作一般都在组件的方法内进行。5 生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本
2020-05-14 16:34:29
392
原创 【VUE】关于Vue是一套渐进式框架的理解
在最初的前端开发中，我们一般都是使用Js来获取Dom节点，对节点的一些操作但碰到业务逻辑复杂的功能时，js中的代码量也相应增多，后期维护的成本也会大大提高vue系统初衷是把视图层，逻辑层，数据层分离，这也就是我们口中经常说的MVVM模式Vue核心库的功能，是一个视图模板引擎。他的定位并不是一个框架，设计上也没有完全的遵循MVVM的设计理念，Vue强调的仅仅是状态与视图的映射。vue目前已经拥有一套完整的生态系统，vuex，route，axios等等，你可以添加任何你想添加的第三方库，这些都是互相独
2020-05-14 16:27:35
1202
原创 微信小程序之全局变量
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数getApp可以获取全局的应用实例，如果需要全局的数据可以在App()中设置，如：// app.jsApp({ globalData: 1})// a.js// The localValue can only be used in...
2020-04-17 14:31:37
175
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人