自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

大脸猫~

来自一个强迫症的笔记,笔记都是自己码字,记载自己的成长,如有错误,欢迎指出。辛苦码字,转载需注明出处!...

原创 development 和 production 模式的区别

webpack中两种开发模式development 和 production 的区分打包 当我们在开发一个项目的时候,一般用development这个环境进行项目的开发,在这个打包环境下,webpack我们使用了devserve,可以帮我们起一个服务器,这个服务器里面还集成了一些HTML这样的特性...

2020-05-07 14:29:41 162 0

原创 Webpack_(高级概念4.1)_Tree Shaking 概念详解

Tree Shaking 概念详解 Tree Shaking指的是什么? 打开项目进入index.js文件中,清空代码,然后打包项目,不会报错,但是实际上会报一个警告 在这个webpack版本下,如果在webpack.config.js配置了babel-loader的内容(我们已经将配置单独放在...

2020-04-27 10:56:26 53 0

原创 关于数组、对象的深浅拷贝

浅拷贝 数组和对象作为JS的引用类型,直接使用赋值“=”的话,会把源数组、对象的地址赋值给新的数组、对象,并没有实现数组的数据拷贝,这种方式实现的就是浅拷贝。赋值给另一个变量时,实际上是把另一个变量指向了与之相同的地址,当我们改变其中一个时,实际上改变了堆内存中的存储内容,相应的所有指向该地址的数...

2020-01-14 17:59:02 67 0

原创 vue实战_使用echarts

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。 你可以使用如下命令通过 npm 安装 ECharts npm install echa...

2019-12-21 14:00:53 41 0

原创 Webpack_(第三章)_实现对React框架代码的打包

配置React代码的打包 react代码是一套非常先进的前端框架代码,我们如果想写react的代码,如何进行react代码的打包呢? 在babel 的官网上的preset配置项,执行npm install --sava--dev @babel/preset-react 如果想对react代码打包的...

2019-12-21 14:00:11 346 0

原创 Webpack_(第三章)_使用Babel处理ES6语法

sd

2019-12-21 13:59:58 318 0

原创 Webpack_(第三章)_使用WebpackDevServer提升开发效率

使用WebpackDevServer提升开发效率 我们修改代码,如果想在浏览器上正确运行,都需要手动打包npm run bundle,这样的话我们的开发效率是非常低下的,我们希望,如果改了src下面的原代码,那么dist目录就会自动打包,那么就简单多了,不用每次都运行npm run bundle了...

2019-12-21 13:59:43 214 0

原创 Webpack_(第三章)_SourceMap的配置

SourceMap的配置 什么是SourceMap? 在webpack.config.js,在开发者模式mode: "development"下,默认SourceMap已经配置好,所以我们先关闭SourceMap mode: "development",...

2019-12-21 13:59:34 29 0

原创 Web核心概念_(第三章)_Entry与Output的基础配置

Entry与Output的基础配置 entry打包的入口文件,entry可以配置为字符串,也可以配置为对象,默认生成的名字是main.js,当然也可以在output中指定生成文字的名字。 如果想要 ...

2019-12-21 13:59:21 103 0

原创 webpack核心概念_(第三章)_使用plugins让打包更便捷

在webpack中使用不同的loader可以完成不同文件类型的打包,这一篇写如何使用webpack中的plugins,让打包更便捷。 在打包完成的dist文件下有个index.html文件,这个是我们手动拷贝到dist文件夹下,目的是可以方便访问打包生成之后的js文件。但是每次打包都要拷贝该ind...

2019-12-21 13:59:01 162 0

原创 webpack核心概念_(第三章)_使用loader打包静态资源(样式篇-下)

补充样式打包: 1.css-loader常用的配置 如果要配置css-loader,那么就不能写字符串了,而要写一个对象 { test: /\.scss$/, use: [ 'style-loader', ...

2019-12-21 13:58:44 20 0

原创 webpack核心概念_(第三章)_使用Loader打包静态资源(样式篇-上)

Loader打包样式 当我们在src下写一个样式文件,并在index.js中引入使用该文件的样式,运行发现出错 import './index.css' ...... img.classList.add('image') 这是因为webpack只能识别j...

2019-12-21 13:58:29 217 0

原创 webpack核心概念_(第三章)_使用loader打包静态资源(图片篇)

使用loader打包静态资源(图片篇) 上一节我们看到webpack 把图片名字被打包成了一个比较长的字符串。 如果我们想不变动图片的名字,怎么办? 这样的话我们需要对loader做一些额外的配置了。 在使用loader的时候,可以配置一些参数,放在一个options的配置项 比如说希望打包生成...

2019-12-21 13:58:07 185 0

原创 webpack_(第三章)_核心概念_loader

Loader是什么? webpack是一个模块打包工具,模块不仅仅是js文件,还可以是图片或者是css等等其他的任何内容。 那图片和css是怎么打包的呢? 如果我们按照打包js的方式打包图片,发现会报错,这是为什么呢? eg:const image = require('./image....

2019-12-21 13:57:27 188 0

原创 webpack_(第二章)_浅析webpack打包输出的内容

浅谈webpack打包知识点 在上次完成webpack基本配置之后 运行npm run bundle 打包 可以看到在我们打包的时候,输出了非常多的提示命令,那输出的这些信息是什么意思呢? Hash: 对应的是本次打包唯一的Hash值 Version: 使用的是Webpack的版本 Time:当...

2019-12-21 13:57:08 18 0

原创 webpack_(第二章)_使用webpack的配置文件

webpack的配置文件 webpack是一个模块打包工具,帮助我们把模块都打包到一起,当引入图片模块和JS模块,引入的流程和打包的方式肯定是不同的。加入引用的是JS文件,那么直接拿过JS文件来执行就可以了,假如引入的是图片文件,实际上只需要拿到图片的地址就可以了,并不需要把整个图片文件打包到js...

2019-12-21 13:56:32 19 0

原创 webpack_(第一章)_的正确安装方式

搭建Webpack环境 webpack是基于node开发的模块打包工具,本质上是由node实现的,首先要安装node环境。 新版本的nodejs会很大程度的提高webpack的打包速度。 提高webpack打包速度:一是保持nodejs的版本尽量的新,另一个是保持webpack的版本尽量的新。高版...

2019-12-21 13:56:06 25 0

原创 前端实现打印功能

前端实现打印功能的方法有很多 方法一:window.print() window.print()默认打印的body的内容 如果想实现局部打印,就要重新给body的内容赋值,后续执行完了打印再将内容还原回去。 //根据div标签ID拿到div中的局部内容 bdhtml=window....

2019-08-23 11:09:06 3045 0

原创 将URL图片链接转换成base64

在使用html2canvas截图的时候,canvas重新渲染的时候 ,如果资源是URL图片的时候,在请求有个延时可能还没渲染完就完成绘制了,造成图片截图不出来。 这时将URL图片转换成base64后,用base64渲染img图片,这样就可以完美解决问题 如何将“跨域图片”转换成base64呢?原理...

2019-08-23 09:07:37 1918 3

原创 Webpack核心概念_Hot Module Replacement 热模块更新

Hot Module Replacement 热模块更新 什么是HMR? 我们写一个例子: 在webpack.config.js配置一下css文件的解析 { test: /\.css/, use: [ 'style-loader', ...

2019-07-11 18:52:42 346 0

原创 webpack模块打包工具

webpack模块打包工具 从上文看webpack很像是JS的翻译器,其实这个定义是不准确的,webpack只认识import这样的语法,很多高级的JS代码并不认识。 webpack实际上是一个模块打包工具,如下图的Header、Sidebar、Content是一个个的模块,webpack是将这些...

2019-06-20 10:40:29 185 0

原创 webpack概念

随着前端工程越来越复杂,单独建几个文件写业务代码已经无法保证项目的可维护性,所以就把不同的业务逻辑拆成模块,然后去分开引入这些模块,每个模块做自己的事情,这样就能保证项目的可维护性和可扩展性。但是假如有几千个模块,在页面能引入几千个JS文件么,所以当项目达到这种程度,我们就需要借助工具来管理我们的...

2019-06-19 18:02:18 40 0

原创 element Checkbox多选框全选踩空

element checkbox 有个indeterminate 属性,用以表示 checkbox 的不确定状态,一般用于实现全选的效果 eg: <el-checkbox :indeterminate="isIndeterminated" v-model=&qu...

2019-03-12 10:07:07 1331 0

原创 前端经验_form中button会自动提交的问题

<form> ...... <button class='btn' @click='handleClick'>选择</button> ...... &...

2019-03-12 09:23:25 328 0

原创 css 垂直居中和水平居中

一 水平居中 行内元素 行内元素水平居中,直接在父盒子中设置text-align:center 块元素居中 ① 已知盒子的宽度 margin : 0 auto; // 最简单实现 position: relative ; left: 50%; margin-left:-50px; ...

2019-03-11 16:52:18 70 0

原创 关于JS时间的问题

一: 基础的JS使用 var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-???) myDate.getMonth(); //...

2019-03-06 15:28:36 272 0

原创 ES6扩展运算符

ES6扩展运算符实现了Iterator 接口的对象中的每个元素都一个个的迭代并取出来变成单独的被使用 eg1: console.log(...[3, 4, 5]) // 结果 3 4 5 合并数组,可以使用扩展运算符将多个数组进行合并。 let arr1 = [1, 2, 3] let ...

2018-12-11 16:15:38 115 0

原创 `${expression}`字符串占位符

在一个模板字面量中,你可以把任何合法的JavaScript表达式嵌入到占位符中将其作为字符串的一部分输出到结果中。占位符${expression}中间可以包含任意的JavaScript表达式 eg: this.$refs.scrollWrapper.style.height = `${this.c...

2018-12-11 15:44:19 673 0

原创 css 双击 取消选中的文字

在测试的时候,测试狂点按钮,会导致部分文字选中,这是浏览器默认会选中双击的文字,但是有时候会给用户造成不好的体验 。这个时候我们可以使用 user-select:none; 属性 div{ -moz-user-select:none;/火狐/ -webkit-user-select:none;/w...

2018-12-01 17:50:53 364 0

原创 微信公众号申请以及开发流程

吱吱吱吱

2018-09-25 07:44:19 211 0

原创 微信公众号开发入门

了解微信号的种类特点 本地代理环境的搭建以及最入门的加密认证 微信号分类 企业号、订阅号、服务号 企业号:不太适合小型开发,是为企业和组织提供的移动应用入口,帮助企业建立与员工,上下游供应链及企业应用间的连接 订阅号:比较适合与个人、小团队,主要用于信息传播,帮助管理用户以及和用户互动,比如撰写文...

2018-09-24 15:34:29 211 0

原创 微信小程序JavaScript

浏览器中JavaScript DOM:浏览器文档对象模型 BOM:浏览器对象模型 nodejs中的javascript实现 ECMAScript, Native, Npm 组成 Native:原生的模块,来使用一些原生JavaScript不具有的一些能力 npm 包管理工具,世界上最大的开源库...

2018-09-19 18:39:32 3402 0

原创 微信小程序之WXMl的学习

WXML的学习包括: WXML语法,WXML数据绑定,属性,WXML列表渲染,条件渲染,WXML模板及引用,响应式像素,样式,选择器 WXML 语法: 我们需要注意wxml的标签必须是完全闭合的,大小写敏感 WXML语言特性: 数据绑定: wxml...

2018-09-17 13:37:04 4185 0

原创 微信小程序开发之开发框架组成介绍

微信小程序有自己的开发框架和语言规范 小程序的开发框架的基本组成 WXS:对wxml能力增强的一种脚本语言,可以把我们请求的数据进行一个计算处理,帮助wxml快速构建出页面的内容结构...

2018-09-17 11:36:17 342 0

原创 微信小程序之helloWord

当我们不使用模板生成一个项目,项目里只有project.config.json文件,这个文件是帮助我们配置项目的信息,实现一些个性化配置 一个微信小程序应用必须包含两个文件,一个是app.js文件,一个是app.json文件 (一般包括四个:app.js。app.json,wxml文件,wxs...

2018-09-17 11:27:45 808 0

原创 微信小程序开发者工具详解

个人中心:点击头像显示的是个人中心面板,展示的是小程序版本以及系统版本更新之后的一个推送消息,也方便我们去切换我们的小程序账号 在头像后边有三个按钮: 模拟器,编辑器和调试器:点击来显示或隐藏相应的模块 编译模式:普通编译和自定义编译条件 预览:在真机预览 远程调试:真机的远程调试功...

2018-09-17 10:43:59 25779 5

原创 微信小程序介绍与开发准备

一.为什么会有小程序? 什么是小程序 小程序和移动应用程序区别 小程序能做什么 小程序是一种不需要下载安装即可使用的应用,用户扫一扫或者搜一下即可打开应用,也体现了用完即走的理念 用户不用关心安装太多应用的问题,应用将无处不在,随时可用,但又无需安装卸载 小程序和APP应用的区别 小...

2018-09-16 16:22:15 167 0

原创 常用的Linux指令

常用的Linux指令 一般通过工具来连接到Linux服务器 比如说SSH Secure Linux下的常用操作 cd / 进入根目录 ls 展示当前文件夹的所有文件 rm -rf XX: 强制删除文件 rm -rf XXX/: 强制删除文件夹 ./ 执行该文件的命...

2018-09-15 18:53:19 73 0

原创 vue 项目前端部署以及windows ,linux 端部署遇到的问题

Vue项目打包之后,部署有两种方式,一是前台打包后扔给后台,放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署,这里讲的是后者 前端如何单独部署呢? 一个最简单的办法就是使用Nginx部署辣 一.我们将自己的Vue项目打包 运行npm run build 会在项...

2018-09-13 18:11:35 4993 0

原创 JS闭包详解

一.函数和作用域 自定义函数 XXX() function XXX( ) { } // 调用函数,放在哪个位置都可以 // 如果是获取元素,元素必须放在上面 var fn = function () { } fn() // 必须放在声明的后面 这种用var声明的函数调用必须放在声明的后面...

2018-09-12 18:56:23 78 0

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