- 博客(24)
- 收藏
- 关注
RSS订阅原创 ElementUI tree组件鼠标移入移出节点，显示隐藏操作按钮（新增，删除等）
@mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" <i v-show="data.show" class="el-icon-circle-plus blue" @click="($event) => append($event,node,data)"></i>mouseenter(data){ this.$set(data, 'show', true) }, ..
2021-04-22 11:18:50
1234
原创 全面掌握Webpack4.0 (九)SourceMap 的配置 （持续更新…
前言：如果我们不对webpack做配置，那么一旦代码有报错，浏览器控制台提示的错误就会定位到webpack打包之后的js文件中，我们都知道打包后的js是经过压缩过的，我们从这个js文件中无法找到报错代码行的源文件，我们想知道的一定是报错的代码是哪一个源文件中的哪一行，sourceMap的作用简单说就是帮助我们在源文件和打包后的文件之间做一个映射，帮我们找到报错代码的源文件以及具体到源文件的哪一行代码，这样就帮助我们提高了调试效率。source-map广义上讲就是webpack对于代码调试的的所有配置的集合
2021-04-01 15:18:32
318
原创 全面掌握Webpack4.0 (八)Entry与Output的基础配置（持续更新…
本篇文章给大家介绍两个比较简单的webpack的配置项：entry和outputentry:入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。(webpack官网)如果没有配置output，那么默认的出口文件名就是main.jsoutput:指的是打包输出，output 属性告诉 webpack 在哪里输出它所创建的 bun
2021-03-31 11:27:15
216
原创 全面掌握Webpack4.0 (七)使用plugins让打包更便捷（持续更新…
前言：在之前的文章中，给大家讲了webpack中很重要的一大模块之loader的概念以及如何使用loader处理不同类型文件的打包，本篇文章给大家介绍一个与loader并驾齐驱的webpack中的另一大模块之plugins，通过plugins，我们不但可以提高打包效率，也可以优化性能。下面接正文：我们还是以之前的demo项目为例子，首先给大家讲一下plugins是用来干嘛的：上图所示是我们当前demo项目的项目结构，dist文件夹是打包后的输出文件夹，里面现在包括一个bundle.js（打包后输出的j
2021-03-31 10:27:27
195
原创 全面掌握Webpack4.0 (六)使用loader打包静态资源（样式篇-下）（持续更新…
本文将接着上篇文章给大家讲一下和样式有关的loader配置项。首先我们在src中新建一个wechat.scss,并在这个wechat.scss中随便写一些scss代码：接下来我们把wechat.scss导入到index.scss中:还记得上篇文章的结尾我有提到过一个很重要的知识点吗，就是loader的执行顺序是“从右到左，从下到上”的，对于我们的index.scss里面的scss代码来说，loader的执行过程应该是postcss-loader–>sass-loader–>css-loa
2020-12-08 17:27:49
171
2
原创 全面掌握Webpack4.0 (六)使用loader打包静态资源（样式篇-上）（持续更新…
通过前面文章的学习大家应该学会了如何打包图片文件，那么本篇文章给大家讲一下如何使用loader打包样式文件。我们接着使用之前的demo项目给大家举例，首先我们在src文件夹下新建一个css文件，取名就叫“wechat.css”(因为我们使用的示例图片是一个微信logo，所以暂时就取名叫wechat.css吧，当然了这不是重点)，然后我们在wechat.css中给定一个图片的样式如下图所示：然后我们在index.js文件中将这个样式引入进去，并把这个类添加到图片对象上：之前给大家说过，webpack
2020-12-08 14:21:30
203
原创 全面掌握Webpack4.0 (五)使用loader打包静态资源（图片篇）（持续更新…
上一篇文章带大家认识了webpack中很重要的loader成员，并且展示了用来处理图片类型的一个loader之file-loader，通过file-loader将demo.png打包进了dist文件夹中同时file-loader默认将文件名变更为了一个很长的字符串。上篇文章中我有提到这个很长的文件名是可以通过配置自定义的，那么下面我们就来讲一下如何配置打包后的文件名.如下图所示在use中新增一个和loader参数同级的options参数，我们需要配置的name参数就要写在options中：name
2020-12-04 16:55:15
329
原创 全面掌握Webpack4.0 (四)什么是loader（持续更新…
前言通过前几章的学习我想大家已经知道了webpack到底是用来做什么的，是的，webapck是一个静态资源的打包工具，我们在之前的demo中已经对js文件进行了打包并且成功的输出了内容，此时我想提一个新的需求，我想在页面中添加一张图片，那么webpack可以对图片文件进行正确的打包吗？如下图所示，我在src文件夹中添加了一张名为demo.png的图片：在index.js中导入这张图片并添加到页面中，新增代码如下图：在终端对项目进行打包，此时我们发现有报错：如上图所示，我们发现报了一个和图片相
2020-12-04 11:24:11
267
原创 全面掌握Webpack4.0 (三)Webpack的入门配置（持续更新…
前言之前的章节中带大家认识了webpack是什么以及如何安装webpack，不知道大家记不记得，在之前的章节中我通过npx webpack ./idnex.js这个命令对示例项目进行了打包，打包之后项目中多出了一个dist文件夹，dist文件夹中生成了一个main.js作为最后生成的打包后的js文件。那么问题来了，为什么运行npx webpack ./idnex.js这个命令会生成名叫‘dist’的文件夹而不是叫dist1、dist2、某某某呢？生成的文件为什么叫‘main.js’而不是main1.js、
2020-11-27 16:49:56
199
原创 全面掌握Webpack4.0 (二)Webpack的正确安装方式（持续更新…
本片文章给大家介绍一下如何正确的安装webpack一.安装Node.js环境并检查是否安装成功（推荐安装LTS版本，至于如何安装在此就不做说明了）二.新建一个文件夹，作为项目目录，自定义名就叫webpack-demo，并用编辑器打开，我这里使用的是VSCode目前该项目是一个空项目。三.在终端通过npm init命令对项目进行初始化（一路回车就可以），最后在项目目录中会出现一个package.json文件，这个文件描述和该项目相关的一些信息。四.全局安装webpack以及webpack-cli
2020-11-27 10:45:58
460
原创 全面掌握Webpack4.0 (一)Webpack究竟是什么（2） （持续更新...
上一篇文章我们在一个demo中见到了webpack的身影，如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”，但事实上webpack可不仅仅可以‘翻译’代码,事实上，webpack是一个‘打包’工具，‘打包‘才是webpack的核心任务。打开webpack的官网：webpack中文网官网首页即可看到“打包”这两个打字。点击‘中文文档‘，我们可以看到webpack官方给出的概念：可以看到webpack官方对于webpack概念的描述：“本质上，webpac
2020-11-26 14:23:29
135
2
原创 全面掌握Webpack4.0 (一)Webpack究竟是什么（1） （持续更新...
前言作为一名前端开发Engineer，对于webpack无非是有以下几种认知程度：从未接触过webpack，只是听身边的人谈到过webpack或是在浏览网站时见到过webpack这个字眼项目中使用了webpack，但都是脚手架（例如vue-cli）自动配置好的，并没有手动去配置过项目中使用了webpack并手动去配置过一些基础的配置项，但对于webpack并没有一个体系化的学习和掌握程度掌握了webpack的常用配置项并且可以手动查找webpack的官网API去独立解决项目中的非常规问题精通w
2020-11-26 09:09:29
151
1
原创 ES6易忽略知识点以及常用知识点整理（一）
一.关于const的注意事项：const简介：cosnt用来声明常量。一旦声明，其值就不能改变。同时，const声明的常量也不提升，和let一样存在暂时性死区，只能在声明后使用。重点来了： 对于复合类型的变量，变量名不指向数据，而是指向数据所在的地址。const命令只是保证变量名指向的地址不变，并不保证地址的数据不变，所以将一个对象声明为常量必须非常小心。举例：const foo = {}；foo.prop = 123;console.log(foo.prop) //123上面的代码中，常
2020-06-16 11:14:30
142
转载 JSONP到底是什么（这是我看过的讲的最有条理性且易懂的版本）
彻底弄懂jsonp原理及实现方法转载作者：快乐乔巴出处：http://www.cnblogs.com/chopper/
2020-06-11 18:54:51
106
原创 好好捋一捋ES5/ES6数组的那些必会方法（务必记牢）
我们在平时的工作中操作数组的目的只有一个，那就是一顿操作之后得到我们想要的新数组，然后该干啥干啥，但是有的时候一顿猛如虎的操作之后得到的并不是我们想要的新数组，根本原因就是出在在我们对于数组的相关方法的掌握并不是很牢固，尤其是要注意注意再注意，方法的返回值是什么，原数组会不会被改变，基础不牢固的同学这两点真的很容易被忽略，好了，废话不多说~1....
2020-04-29 19:07:23
160
原创 JavaScript闭包（纯文本总结版）
JavaScript闭包（纯文本总结版）闭包的本质就是能够读取其他函数内部变量的函数，通过闭包，可以将函数内部和函数外部连接起来。总结来说，闭包的作用可以总结为两点，第一点是在函数外部访问函数内部的变量，第二点是让变量始终保存在内存中。...
2020-03-31 16:01:50
75
原创 JavaScript原型和原型链（纯文本总结版）
JavaScript原型和原型链（纯文本总结版）js这门语言在ES6之前是不存在类的概念的，它不能像java那样通过类实现继承，但是可以通过原型实现继承。在js中万物皆对象，构造函数也是对象，每一个构造函数都有一个prototype属性，这个属性是一个指针，指向一个普通的对象，这个对象就是原型对象，原型对象里面的所有属性可以被指向它的构造函数所生成的实例所共享，这样就实现了继承。举个例子，比如说...
2020-03-28 12:54:37
109
原创 Vue-Router中hash模式和history模式的区别（纯文本总结版）
Vue-Router中hash模式和history模式的区别其实hash 模式和 history 模式都属于浏览器自身的特性，并不是vue-router独有的，vue-router只是通过调用浏览器提供的接口利用这两个特性来实现前端路由。前端路由的核心也就是单页面应用的核心就是在不向服务器发送请求的前提下改变视图。hash模式就是#模式，在URL 中#和#后面的字符拼接起来就是hash值，has...
2020-03-24 14:01:32
299
原创 Vue的模板编译过程（纯文本总结版）
Vue的模板编译过程（纯文本总结版）模板编译就是把模板转化成供Vue实例在挂载时可调用的render函数1.parser解析器将模板字符串解析成AST抽象语法树（一个js对象）2.optimizer优化器标记静态节点，diff的时候会跳过被标记的静态节点，减少了diff的比较过程，从而优化了 patch 的性能3.generate代码生成器将AST转换成渲染（render）函数，该函数用于...
2020-03-20 15:51:23
540
原创 Vue虚拟dom原理（纯文本总结版）
Vue虚拟dom原理（纯文本总结版）虚拟dom的是一个用来映射真实dom的js对象。我们使用jQuery或者是原生js进行编程的时候，要想修改某一个dom，我们是通过使用jQuery的$选择器或者是js的getElementBy…语法先选取这个dom，然后对这个dom进行修改，这种方式是直接作用在真实dom上的，每操作一次就会更新dom一次，dom的更新会导致浏览器的重绘或者重排，过于频繁的重绘...
2020-03-20 13:37:16
435
原创 Vue的生命周期（笔芯文章）
前言：你是不是已经读了很多篇关于Vue的生命周期的文章了，读完给你的感觉是不是似懂非懂？如果是的话，那么恭喜你，因为你是一个正常人。对于一个Vue小白或者前端小白来说，什么生命周期啊，钩子啊这些个概念是不可能看几篇文章就能彻底弄懂的，包括虚拟dom，双向绑定这些个Vue的核心原理也一样，需要建立在强大的JavaScript的底层基础和Vue项目的实战经验上才可以彻彻底底地搞清楚，理解透，因为只有...
2019-10-12 16:07:22
169
原创 微信小程序引入阿里巴巴iconfont字体图标的步骤（条理性强，易懂，细节）
开始1.进入iconfont官网，按提示选择登录方式登录，建议大家使用GitHub账号登录，没有GitHub账户的可以去GitHub官网进行注册。2.输入你想要的图标的中文描述，例如“播放”，点击下面的搜索按钮。3.选择一个你喜欢的图标，鼠标悬浮到该图标上，然后选择“购物车”图标，此时右上角的“购物车“图标会显示"1",说明图标添加成功。4.点击右上角的“购物车”图标，点击下图绿色方框里...
2019-09-30 10:22:15
250
原创 DIV水平垂直居中的终极解决方案（看这篇就够了）
DIV水平垂直居中的终极解决方案 网上关于div水平垂直居中的文章层出不穷，对于div水平垂直居中的方法最多可至七八种，经过笔者对于一些大厂的网站的源码进行查看和研究发现他们所用到的方法无外乎以下几种，所以小伙伴们在以后的实际开发的过程中或者面试的过程中再涉及到div水平垂直居中的问题时可以参考以下方法。代码示例：<div class="parent"> <div cl...
2019-09-29 18:09:48
399
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人