不正经的博客

转载 【无标题】

改完之后运行 npm run build打包没问题了，但是npm run serve 报了’“node --max-old-space-size=4096”'不是内部或外部命令，也不是可运行的程序，要不就用vscode将项目下所有.cmd文件里面的"%_prog%"双引号去掉，要不就将package.json里面的serve命令也改成build命令里面的格式。项目中依赖的模块那么多，就算可以批量替换，但代码改动越多，风险越大，想想太麻烦了，所以再想想办法吧！没有完全解决的继续看，以解决的不用看。

原创 git 项目过大问题解决

当项目过大时，git clone时会出现error: RPC failed;HTTP curl The requested URL returned error: Gateway Time-out的问题解决方法很简单，在git clone时加上--depth=1即可解决。

翻译 vue项目单页面引入echarts步骤

vue项目单页面引入echarts步骤

转载 CSS 实现多行文本“展开收起”

多行文本展开收起是一个很常见的交互， 如下图演示实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮 “展开”和“收起”两种状态的切换 当文本不超过指定行数时，不显示“展开收起”按钮说实话，之前单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本，vue-clamp就是这么做的），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~一、位于右下角的“展开收

转载 vue+element+vue-cropper实现图片裁剪功能

1、下载插件：npm install --save vue-cropper2、全局注册插件挂在到全局的vue上import { VueCropper } from 'vue-cropper';Vue.component('VueCropper',VueCropper);html部分：element 的el-upload插件上传图片插件<el-upload class="avatar-uploader" :actio...

转载 vue+element实现图片上传及裁剪功能

1 、安装 vue-cropper 1 npm install vue-cropper 2、组件内使用 1 2 3 4 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, demo 1 2 3 4 5 6 7 8.

转载 清明节灰色主题css

html {-webkit-filter: grayscale(100%);filter: gray !important;filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);

转载 vue中使用G2

前言这一章节主要讲解的是如何使用G2和G2Plot, 通过阅读你可以学习到:G2最基本的使用 在vue中使用G2 在vue中使用G2Plot一、G2简介G2其实就是一套基于可视化编码的图形语法，使得前端能够高效的生成各种统计图表...不做过多介绍，直接贴文档：G2文档二、最基本的使用不结合任何的前端框架来使用G21. 浏览器引入创建一个名为demo1.html的文件,想要在html中使用G2的话，需要先引入进来。这一部分官网也有详细介绍，有两种引入方式：

转载 VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决

问题现象项目使用vue/cli3脚手架搭建的前端项目，vue版本为2.6.10。browserslist的配置如下：1[ "> 1%", "last 2 versions"]但开发环境的IE11打开显示白屏，F12打开显示：分析过程5306行显示 "./node_modules/[email protected]@debug/src/browser.js"这个路径报错，由于eval()包含的代码中有ES6的语法，IE不支持，查了网上很多资料都说使用babel-polyfill来解决。现

转载 从零解读Vue3.0源码响应式系统

首先看下面 effect 的传参，fn 是回调函数，options 是传入的参数。export function effect<T = any>( fn: () => T, options: ReactiveEffectOptions = EMPTY_OBJ): ReactiveEffect<T> { if (isEffect(fn)) { fn = fn.raw } const effect = createReactiveEffect(fn,...

转载 JavaScript面试中容易遇到的算法

素数Q：你将如何验证一个素数？A：一个素数只能被它自己和1整除。所以，我将运行一个while循环并加1。（看代码示例，如果你无法理解，那这不是你的菜。先回去学习JavaScript基础知识然后再回来吧。）方法1function isPrime(n){var divisor = 2;while (n > divisor){if(n % divisor == 0){ return false;}else divisor++;}return true;}is...

转载 常见NodeJS基础面试题

1、你了解 Node. js吗？Node. js是一个基于 Chrome v8引擎的服务器端 JavaScript运行环境；Node. js是一个事件驱动、非阻塞式I/O的模型，轻量而又高效；Node. js的包管理器npm是全球最大的开源库生态系统。2、Node. js的使用场景是什么？高并发、实时聊天、实时消息推送、客户端逻辑强大的SPA（单页面应用程序）。3、为什么要用 Node. js？原因如下。（1）简单， Node. js用 JavaScript、JSON进行编码，简单好学。（2）

转载 移动端的面试题

1、在移动端，单击穿透是什么？单击穿透现象有3种。单击穿透问题：单击蒙层（mask）上的“关闭”按钮，蒙层消失后，发现触发了按钮下面元素的 click事件。页面单击穿透问题：如果按钮下面恰妤是一个有href属性的a标签，那么页面就会发生跳转。跨页面单击穿透问题：这次没有蒙层了，直接单击页内按钮跳转至新页，然后发现新页面中对应位置元素的 click事件被触发了。有4种解决方案。（1）只用 touch。这是最简单的解决方案，完美解决单击穿透问题，把页面内所有 click都换成 touch事件

转载 前端测试的面试题

1、什么是mock测试？mock测试就是在测试过程中，对于某些不容易构造或者不容易获取的对象，创建一个虛拟的对象来测试，以便完成测试方法。2、什么是冒烟测试（ smoke test）？冒烟测试源自硬件行业，对一个硬件或者硬件组件改动后，直接给设备加电，看看设备会不会冒烟。如果没冒烟，就表示待测组件通过了测试。在软件开发过程中，一直有高内聚、低耦合这样的说法，各个功能模块之间的耦合还是存在的。因此，一个功能的改动还是会影响到其他功能模块。如果在开发人员修复了先前测试中发现的Bug后，想知道这个

转载 HTTP和HTTPS的面试题

1、HTTP与HTTPS有什么联系？它们的端口号是多少？HTTP通常承载于TCP之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。HTTP默认的端口号为80，Https默认的端口号为443。2、为什么 HTTPS更安全？在网络请求中，需要有很多服务器、路由器的转发。其中的节点都可能篡改信息，而如果使用HTTPS，密钥在终点站才有。HTTPS之所以比HTTP安全，是因为它利用 SSL/TLS协议传输。它包含证书、卸载、流量转发、负载均衡、页面适配、浏

转载 关于性能优化的面试题

1、谈谈你对重构的理解。网站重构是指在不改变外部行为的前提下，简化结构、添加可读性，且在网站前端保持一致的行为。也就是说，在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。对于传统的网站来说，重构通常包括以下方面。把表格（ table）布局改为DV+CSS。使网站前端兼容现代浏览器。对移动平台进行优化。针对搜索引擎进行优化。深层次的网站重构应该考虑以下方面。减少代码间的耦合让代码保持弹性。严格按规范编写代码。设计可扩展的API。代替旧的框架、语

转载 100道前端js基础面试题

1、JavaScript有哪些垃圾回收机制？有以下垃圾回收机制。标记清除（ mark and sweep）这是 JavaScript最常见的垃圾回收方式。当变量进入执行环境的时候，比如在函数中声明一个变量，垃圾回收器将其标记为“进入环境”。当变量离开环境的时候（函数执行结束），将其标记为“离开环境”。垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量，以及被环境中变量所引用的变量（闭包）的标记。在完成这些之后仍然存在的标记就是要删除的变量。引用计数（ refe

转载 前端工程化的面试题

1、谈谈你对 WebPack的认识。WebPack是一个模块打包工具，可以使用 WebPack管理模块依赖，并编译输岀模块所需的静态文件。它能够很好地管理与打包Web开发中所用到的HTML、 JavaScript 、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源， WebPack有对应的模块加载器。Web Pack模块打包器会分析模块间的依赖关系，最后生成优化且合并后的静态资源。WebPack的两大特色如下。（1）代码切割（ code splitting）（2） lo

原创 写一个 function，清除字符串前后的空格（兼容所有浏览器）。

function trim（str）{if （str && typeof str === "string"）{return str.replace（/^\s+1\s+$/g，""）；//去除前后空白符。

原创 un-app使用sass注意事项

node-sass 安装版本不得高于4版本sass-loader 安装版本不能太高 建议7.3.1

转载 Vue CLI3 开启gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。webpack在打包时可以借助compression webpack plugin实现gzip压缩，首先需要安装该插件：npm i -D compression-webpack-plugin在vue cli3.0 生成的项目里，可在vue.config.js中按照如下方式进行配置：压缩前后大小大致如下：生成的压缩文...

原创 在div内使用模拟placeholder

转载 vue 之this.$router.push、replace、go的区别

一、this.$router.push说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面使用：1 this.$router.push('/index')2 this.$router.push({path:'/index'})3 this.$router.push({path:'/index',query:{name: '123'}})4 this.$router.push({name:'index',params:{name:'123'}})　　

原创 vue状态共享 Observable API

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。如下这个例子，我们将在组件外创建一个 store，然后在 App.vue组件里面使用 store.js 提供的 store和 mutation方法，同理其它组件也可以这样使用，从而实现多个组件.

转载 Chorme 浏览器中的垃圾回收和内存泄漏

垃圾回收通常情况下，垃圾数据回收分为手动回收和自动回收两种策略。手动回收策略，何时分配内存、何时销毁内存都是由代码控制的。 自动回收策略，产生的垃圾数据是由垃圾回收器来释放的，并不需要手动通过代码来释放。JavaScript 中调用栈中的数据回收JavaScript 引擎会通过向下移动 ESP(记录当前执行状态的指针) 来销毁该函数保存在栈中的执行上下文。JavaScript 堆中的数据回收在 V8 中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的

原创 自定义指令directive 配置v-if or v-show权限显隐

我们可以通过全局自定义指令来处理判断条件繁琐且多个地方需要判断（v-if / v-show）。 先在新建个 array.js 文件，用于存放与权限相关的全局函数；array.js内容exportfunctioncheckArray(key){letarr=['1','2','3','4','demo']letindex=arr.indexOf(key)if(index>-1){retu...

原创 高频使用组件全局导入

我们先在components文件夹（这里面都是些高频组件）添加一个叫global.js的文件，在这个文件里使用require.context 动态将需要的高频组件统统打包进来，然后在main.js文件中引入global.js的文件。global.js内容importVuefrom'vue'functionchangeStr(str){returnstr.charAt(0).toUpperCase()+str.slice(1)}constrequireComp...

转载 vue + typescript 项目起手式

vue + typescript 新项目起手式最后更新于2018-06-30，技术文具有时效性，请知悉我知道你们早就想用上 vue + ts 强类型了还有后续 vue + typescript 进阶篇安装vue-cli 安装ts依赖 配置webpack 添加tsconfig.json 添加tslint.json 让ts识别.vue 改造.vue文件什么是typescriptTypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有...

转载 用vue构建多页面应用

最近一直在研究使用vue做出来一些东西，但都是SPA的单页面应用，但实际工作中，单页面并不一定符合业务需求，所以这篇我就来说说怎么开发多页面的Vue应用，以及在这个过程会遇到的问题。这是我放在GitHub上的项目，里面有整个配置文件，可以参看一下：multiple-vue-page准备工作在本地用vue-cli新建一个项目，这个步骤vue的官网上有，我就不再说了。这里有一个地方需要...

原创 长按app内区域截图利用html2Canvals保存到手机

gotouchstart(){clearTimeout(this.timeOutEvent);//清除定时器this.timeOutEvent=0;this.timeOutEvent=setTimeout(()=>{//执行长按要执行的内容，this.saveImg();}...

原创 vue-qr二维码插件使用

1、安装npm install vue-qr --save2、导入vue项目中使用下面给出一个简单的demo<template> <vue-qr :text="downloadData.url" :margin="0" colorDark="#f67b29" colorLight="#fff" :logoSrc="downloadData.icon + '?cach...

转载 jquery里用正则来验证密码，必须包含大小写字母，数字及特殊符号，或最少包含两种

一：要求用正则来验证用户输入的密码，至少包含大小字字母，数字和特殊符号中两种，简单的说，就是验证用户输入的密码不能太简单。乍一想，这种正则好像不太方便下手写，至少以前站长在验证用户输入的密码格式时，都是分步来写的，比如：if(/[a-z]/g.test(v)){alert("不能纯为小写字母");returnfalse;}elseif(/[A-Z]/g.test(v...

转载 Echarts x轴文本内容太长的几种解决方案

Echarts 标签中文本内容太长的时候怎么办 ?1对文本进行倾斜 在xAxis.axisLabe中修改rotate的值 xAxis: { data: ["衬衫11111","羊毛二二","雪纺衫111","裤子111","高跟鞋11","袜子111"],//x轴中的数据 name:"123",//坐标轴名称。 n...

原创 拼音匹配模糊搜索

pinyin-engine这是一款简单高效的拼音匹配引擎，它能使用拼音够快速的检索列表中的数据。使用索引以及缓存机制，从而在客户端实现毫秒级的数据检索 它的字典数据格式经过压缩处理，简体中文版本仅仅 17kb 大小（Gzip） 支持多音字、支持拼音首字母匹配 简体版本覆盖 6718 个汉字，繁体中文覆盖 20846 个汉字在线演示：https://aui.github.io/pin...

转载 vue Element-ui 表格多选 修改选中行背景色

<el-table v-show="res" border ref="multipleTable" :data="projectList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" @select="handleSelection"...

转载 前端独立实现模糊查询--filter()与match()

ilter()方法和match()方法结合使用可以使前端已获取数据的情况下独立实现模糊查询，不再调用后端接口，这种情况适用与查询次数比较多，且数据比较固定的情况，减少调用后端接口一定程度上可以缓解后端压力。示例：teacherList = allTeacherList.filter(array => array.name.match(searchContent));1这里有几个小...

原创 Object常用方法

Object 构造函数为给定值创建一个对象包装器。如果给定值是 null 或 undefined，将会创建并返回一个空对象，否则，将返回一个与给定值对应类型的对象。当以非构造函数形式被调用时，Object 等同于 new Object()。Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign(tar...

转载 js只能输入数字、汉字、字母等正则匹配

只能输英文:<input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')">只能输入汉字：<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipb...

原创 设置cookie，获取cookie，删除cookie，修改cookie

设置cookie： 1 /** 2 * 设置cookie 3 * @param name cookie的名称 4 * @param value cookie的值 5 * @param day cookie的过期时间 6 */ 7 var setCookie = function (name, value, day) {...

原创 js判断手机系统是android还是ios

<script type="text/javascript">var u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Ma...