webpack 如何编译css、less文件

webpack 如何编译.css、.less、.sass**loader的编译顺序是从右往左,从上往下。**使用样式的话,css-loader和style-loader是必须的依赖包。css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能;style-loader将所有的计算后的样式加入页面中;二者组合可以把样式表嵌入webpack打包后的JS文件中。1.编译.css文件需要安装 style-loader、css-loader。 {
分类: 其他 发布时间: 02-01 17:55 阅读次数: 0

let、var和const的比较以及块级作用域,顶层对象

let、var和const的比较,以及块级作用域let和const是es6新增的用于声明变量的命令。let和const所声明的变量(常量)只在其所在的作用域内有效。let和const 不存在变量提升。变量必须在声明之后才能使用,否则报错。即存在暂时性死区。暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。在同一个作用域内,let和const不允许重复声明。const主要是用来声明常量,本质是声明变量所指
分类: 其他 发布时间: 02-01 17:55 阅读次数: 0

入门前端的学习路线

入门前端的学习路线工欲善其事,必先利其器。前端学习必不可少敲代码,所以编译环境和工具必不可少。我这里推荐自己比较喜欢的sublime和vscode(visual studio code)。具体安装过程很简单,可以参考vscode安装使用教程老生常谈的三件套必备:html+css+jshtml和css推荐:文档的话推荐菜鸟教程和MDN视频的话推荐:黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩b站上有很多的视频,感
分类: 其他 发布时间: 02-01 17:54 阅读次数: 0

css关于垂直居中的几种常见方法

css关于垂直居中的几种方法不知道子元素的宽度和高度的情况下,1.可以通过“子绝父相”的规则 .parent { background-color: red; width: 300px; height: 500px; position: relative; } .son { background-color: pink;
分类: 其他 发布时间: 02-01 17:54 阅读次数: 0

三栏布局(高度已知,中间自适应)

三栏自适应布局使用float属性 .left{ float: left; width: 200px; height: 200px; background-color: pink; } .center{ margin-left: 200px; height:200px; background
分类: 其他 发布时间: 02-01 17:53 阅读次数: 0

高度塌陷解决方法和BFC

高度塌陷的原因及解决方法父元素没有设置高度(自适应子元素的高度),当子元素脱离文档流的时候(设置float属性或者设置positon为absolute或fixed时),就会造成父元素的高度塌陷问题。解决方案:给父元素添加高度,违背初衷,不推荐。触发BFCBFC(block formatting context):块级格式化上下文。BFC有一个特性,计算其高度时,浮动元素也参与计算。BFC元素是一个独立的容器,容器里面的子元素不会影响到外面的元素。具体内容请参考这篇博客 触发BFC的五种方法:
分类: 其他 发布时间: 02-01 17:53 阅读次数: 0

合并两个有序整数数组

合并两个有序整数数组为一个数组。用js实现。已知有序数组A和B,返回合并后的有序数组res。主要思想是 先比较A和B的最后一个元素,将较大的元素放入res的最后一位,同时将该元素所在的数组长度减一。一直循环,直到某个数组长度为零为止。 此时,还需要判断另外一个数组是否长度为零,若不为零,则也将其全部放入res中。 // 合并两个有序数组 function merge(A, B) { let m = A.length, n = B.length;
分类: 其他 发布时间: 02-01 17:53 阅读次数: 0

js之function与object的原型链关系

js之function与object的原型链关系自己第一次用xmind画的图,比较丑。看红宝书的时候看到创建对象的几种方式时,突然想到这个,顺手划一波。 //构造函数模式 function Person(name,age){ this.name=name; this.age=age; this.getName=function(){ return this.name } } let p1=ne
分类: 其他 发布时间: 02-01 17:53 阅读次数: 0

js实现二叉树的先序,中序,后序遍历,采用递归和非递归两种方法。

js实现二叉树的先序、中序、后序遍历,采用递归和非递归方法递归方法实现:function TreeNode(x){ this.val=val; this.left=null; this.right=null;}// 递归方法function threeOrders(root){ let preArray=[],middleArray=[],lastArray=[]; //先序遍历:根、左、右 function preOrder(root){
分类: 其他 发布时间: 02-01 17:52 阅读次数: 0

js之EventBus

EventBus许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用,但也涉及到组件之间的数据通讯。对于vue来说,存在着父子组件、兄弟组件、跨级组件之间的通信问题。在Vue中组件之间的通讯有一定的原则。父子组件通信原则:为了提高组件的独立性与重用性,父组件会通过props向下传数据给子组件,当子组件有事情要告诉父组件时会通过$emit事件告诉父组件。如此确保每个组件都是独立在
分类: 其他 发布时间: 02-01 17:52 阅读次数: 0

动态组件和 keep-alive

动态组件和 keep-alive//组件一<template> <div> 组件一 <input type="text" /> <input type="text" /> </div></template><script>export default { name: "cona", data() { return {}; },};</script>
分类: 其他 发布时间: 02-01 17:52 阅读次数: 0

Vue.use和mixin

Vue.use解析//main.js import myPlugin from './components/myPlugin/index' //引入插件Vue.use(myPlugin) //默认调用myPlugin里面的install方法,如果没有则直接执行install函数//index.js//1. 插件是一个对象,有install方法export default { install(_){ // console.log(_); //就是Vue类
分类: 其他 发布时间: 02-01 17:51 阅读次数: 0

background-image和img的区别

background-image 和 <img/>的区别1. 是否占位background-image是背景图片,是css的一个样式,不占位;<img />是一个块状元素,它是一个图片,是html的一个标签,占位;2. 是否可操作(1)background-image是只能看的,只能设置如下属性:background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义的位置图层;background-attac
分类: 其他 发布时间: 02-01 17:51 阅读次数: 0

es6之map和set

es6之map和setes6新提供了两种数据结构map和set,都可以用来保存键值对。Map:map 的key不仅可以是字符串,也可以是其他类型的值,包括对象。由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:map的方法 map.size 属性 map.keys()//返回所有key map.values();//返回所有value map.set(key,value)//添加 map.has(key) //返回boo
分类: 其他 发布时间: 02-01 17:50 阅读次数: 0

打开http的大门

get和post的区别Http请求:
分类: 其他 发布时间: 02-01 17:50 阅读次数: 0

超详细的EventLoop过程讲解

超详细的EventLoop过程讲解EventLoop的主要过程:首先我们需要知道js是单线程的,是基于事件循环。1. 在主线程执行同步任务的时候,会形成一个执行栈; 2. 当主线程执行完执行栈中的同步任务,会先去执行微任务队列,执行过程中遇到微任务,直接放在队列的最后,直到执行完当前的微任务; 3. 然后主线程去执行宏任务队列中的一个事件(如果最先来的事件还没返回结果,那就去看第二先来的事件是否准备就绪,如果准备就绪就先执行它,否则继续向下找);在处理宏任务的过程中遇到微任务,会放入微任务队列中, 4
分类: 其他 发布时间: 02-01 17:49 阅读次数: 0

Vue异步更新和nextTick的源码分析

Vue异步更新和nextTickVue是异步更新的。如果Vue中对一个Dom同时进行添加和删除的操作,这个时候到底该渲染哪一个呢?如果对于一个属性短时间内修改很多次,但我们只需要最后修改的结果。如果是同步更新,那每修改一次,就会重新渲染一次,这样就会渲染很多次(浪费性能),所以为了上面的各种问题以及性能方面,Vue是异步更新的。Vue的异步更新可以通过Vue.nextTick(vm.$nextTick)实现。Vue.nextTick和vm.$nextTick的唯一区别是回调函数中的this会自动绑
分类: 其他 发布时间: 02-01 17:49 阅读次数: 0

利用腾讯云轻量服务器快速搭建网站CDN

腾讯云的轻量最近在主机和站长中间可谓是占尽来风头,优秀的线路,低廉的价格使得越来越多的人开始使用腾讯云的轻量级服务器来部署应用。由于腾讯云轻量服务器的海外服务器电信走的是CN2GIA线路带宽30m挺适合做CDN的,我就记录一下如何利用腾讯云香港的轻量服务器搭建一个CDN。购买服务器首先选购服务器,最近腾讯云在做活动,力度很大国内备案用户可以选用国内的服务器最低128元/年,未备案的可以选用香港或者新加坡的服务器。购买链接服务器系统选Debian、Ubuntu、centos都可以一键脚
分类: 其他 发布时间: 02-01 17:49 阅读次数: 0

利用腾讯云轻量服务器+宝塔快速搭建均衡负载网站,让你的网站速度更快,同时在线人数更多

利用腾讯云轻量服务器+宝塔快速搭建负载均衡网站,让你的网站速度更快,同时在线人数更多为什么网站需要负载均衡网站作为一个开放性的事物,在流量大了之后,单一一台服务器往往无法承受住海量的用户,从而导致站点卡顿,或者服务掉线等情况。而负载均衡能够有效的解决这一问题。通过一台主服务器和N个副服务器可以将网站的流量合理的分配至各个副服务器,如果副服务器仍旧处理不了则可以通过添加更多的副服务器来进一步扩容。等待流量高峰期结束再删除掉副服务器节省成本开支。利用腾讯云轻量服务器部署一个高可用服务器选购服务器腾讯云
分类: 其他 发布时间: 02-01 17:49 阅读次数: 0

WordPress在NGINX和Litespeed下的性能对比测试

都说Wordpress 在litespeed下的表现要好于NGINX,但是很少看到有人做测试,于是我来做一个对比测试测试平台主机:腾讯云轻量HK1C2G版WordPress版本:5.3压力测试平台:https://loader.io/默认主题,文章为纯文字,txt文档下为34K腾讯云最近做活动每天上午10点-10点半之间都有199-100劵放出,有需要的可以领一下购买腾讯云学生活动也很不错,25岁以下1核2G5M的轻量VPS只要9块/月25岁以下自动获得学生资格,25岁以上可以进行学生认证
分类: 其他 发布时间: 02-01 17:48 阅读次数: 0