明天也要努力的博客

本项目中的公共样式文件均位于 src/assets/css 目录下，其中 index.scss是总的样式文件的汇总入口 ，common.scss 是供全局使用的一些基本样式(常量）， _theme.scss、_handle.scss 两个文件是进行主题颜色配置的文件。如下图，将 index.scss 在 main.js 文件中引入即可全局使用。

2.1 自定义限制输入特殊字符指令// 禁止输入特殊字符 Vue . directive('emoji' , {// 正则规则可根据需求自定义 const regRule = / [`~^!:"{}|.\/;'\\[\]·~！} });2.2 在 main.js 中引入该自定义组件2.3 在组件中使用在需要校验的输入框（多行文本框）加上 v-emoji 即可。

patch-package npm地址patch-package github文档如果不需要在生产中运行 npm (如：正在制作 web 前端，则可使用 --save dev）

第一部分：主版本号，当进行不兼容的 API 更改时，则升级主版本；第二部分：次版本号，当以向后兼容的方式添加功能时，则升级次版本；第三部分：补丁版本号，当进行向后兼容的缺陷修复时，则升级补丁版本；第四部分：日期版本号 + 希腊字母版本号（base、alpha、beta 、RC 、 release）；Base此版本表示该软件仅是一个假页面链接，通常包括所有的功能和页面布局，但是页面中的功能都没有做完整的实现，只是做为整体网站的一个基础架构；Alpha。

Babel 中文官方文档Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：1. 语法转换；2. 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块，例如 core-js）；3. 源码转换（codemods）；

说到本地存储数据，首先想到的是 localStorage，应该很多小伙伴都用过，使用很简单。存储容量限制，大部分浏览器应该最多5M。我就遇到过localStorage存储字符然后尺寸爆掉的情况；仅支持字符串，如果是存对象还需将使用 JSON.stringify 和 JSON.parse 方法互相转换，有些啰嗦；读取都是同步的。大多数情况下，还挺好使的。如果存储数据比较大，如一张重要图片base64格式存储了，再读可能会有可感知的延迟时间；

很多做pc端平台的小伙伴都遇到过这样一个问题：在做侧边栏菜单时会有一个收缩和展开的一个功能，在伸缩的过程中右边的页面的宽度就会随之改变。我上网查了查 ，也动手试了试 window.onresize = ()=>{}。却不尽人意，因为它只能检测浏览器大小的变化，完全跟我们的需求不沾边。为解决类似此问题，我们可使用 element-resize-detector。

在 public 文件夹下新建 static 文件夹，然后将 html 文件及相关引用拷贝到 static 文件夹下。2. 相互通信vue 文件完整代码html 文件完整代码定义和用法：postMessage() 方法用于安全地实现跨源通信。语法：参数说明otherWindow其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。message

1. 简介1.1 功能兼容 PC 和 Mobile；画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。导出图片格式为 base64；1.2 安装npm install vue-esign --savevue-esign npm地址1.3 属性属性类型默认值说明widthNumber800画布宽度，即导出图片的宽度

1. 封装监听移动端软键盘弹出、收起事件的类iOS 系统中软键盘弹起时，虽然仅会引起 $(‘body’).scrollTop 值改变，但可通过输入框的获取焦点情况来做判断。但也只能在 iOS 系统中采用这个方案，因为在 Android 系统中存在主动收起键盘后，输入框并不失焦的情况。Android 系统中软键盘弹起或收起时，都会引起窗口的高度发生变化，因此可监听 window 的 onresize 事件；focusin 和 focusout 对应 focus 和 blur。使用 focusi

类型provide：Object | () => Objectinject： Array<string> | { [key: string]: string | Symbol | Object }详细这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。...

传送门：Vue中 子组件向父组件传值 及 .sync 修饰符 详解传送门：Vue状态管理器（vuex）详解及应用场景传送门：Vue中 $ attrs、$ listeners 详解及使用1. 简介Vue 组件中常见的有：父子组件通信、兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。今天就来说说，如果两个页面没有任何引入和被引入关系，该如何通信呢？如果应用程序不需要类似 Vuex 这样的库来处理组件之

1. 安装及引入vue-socket.io 其实是在 socket.io-client（在浏览器和服务器之间实现实时、双向和基于事件的通信） 基础上做了一层封装，将 $socket 挂载到 vue 实例上，同时可使用 sockets 对象轻松实现组件化的事件监听，在 vue 项目中使用起来更方便。安装：vue-socket.io npm地址npm i vue-socket.io引入：// main.jsimport Vue from 'vue'import store from './st

注意：本文 vue-cli 版本：3.x， 4.x1. 下载想要引入的字体的字体包；2. 将要的字体放在资源目录下并创建一个 css 文件；3. 在 font.css 文件中引入想要的字体；// 这是 font.css 可设置多种字体；// 注意：font-family: 'XXX'; 将字体名字自定义为 XXX,使用时要用这个名字@font-face { font-family: 'DigitalThick'; src: url('./DigitalThick.ttf');}

1. 简介keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。原理： 在 created 函数调用时将需要缓存的 VNode 节点保存在 this.cache 中／在 render（页面渲染） 时，如果 VNode

1. 简介vue-virtual-scroll-list npm 地址vue-virtual-scroll-list 主页安装npm i vue-virtual-scroll-list对比通过 v-for 渲染 10000 个节点，当页面展示94~100区间内的数据时，我们发现浏览器实际将 10000 条数据全部渲染出来了，这很容易导致页面卡顿。通过 vue-virtual-scroll-list 渲染 10000 个节点，当页面展示94~100区间内的数据时，我们发现浏览器实际只渲染了展

问题：项目中需要对用户是否登录进行判断，如果用户未登录或者 token 过期就需要跳转登录页面，进行登录验证。所以需要做一个拦截，在跳转登录页面时报了一个错。报错如下图所示：原因：这个错误是 vue-router 内部错误，没有进行 catch 处理，导致的编程式导航跳转问题，向同一地址跳转时会报错的情况（push 和replace 都会导致这个情况的发生）。解决：方案一：安装 vue-router 3.0 以下版本，先卸载 3.0 以上版本然后再安装旧版本 。npm install vu

vue-video-player 适用于 Vue 的 video.js 播放器组件。1. 安装及引入使用github 地址npm 地址安装npm install vue-video-player --save全局引入import VueVideoPlayer from 'vue-video-player';import 'video.js/dist/video-js.css';Vue.use(VueVideoPlayer);局部引入import 'video.js/dist/vid

需求：后端接口返回文档流格式图片，如何在页面中显示显示并预览？思路：设置 axios responseType: ‘blob’；传送门：JavaScript Blob 对象详解URL.createObjectURL() 创建一个 DOMString，包含一个表示参数中给出的对象的 URL；通过 Element-ui 中的图片组件（Image）实现预览；完整代码：<template> <div class="home"> <el-image

思路： 通过 html2canvas 将 HTML 页面转换成图片，然后再通过 jspdf 将图片的 base64 生成为 pdf 文件。1. 安装及引入// 将页面 html 转换成图片npm install html2canvas --save // 将图片生成 pdfnpm install jspdf --save在项目主文件 main.js 中引入定义好的实现方法并注册import htmlToPdf from '@/utils/htmlToPdf';// 使用 Vue.use(

需求：由于 iframe 的内容加载较慢，需要在加载完成前添加 loading 效果。本文 loading 使用的是 Element 框架的加载（Loading）组件。功能实现完整代码<template> <div style="height:1000px;" v-loading="loading"> <iframe ref="Iframe" src="https://www.taobao.com/" width="

安装npm 地址npm install vue-splitpane属性说明类型默认值split分割类型String [ horizontal （水平），vertical （垂直） ]必选一种min-percent面板最小百分比Number10max-percent面板最大百分比Number10...

关键点1. 使用 :ref="`record${i}`" （或者 :ref="'record'+i"），为每一项动态添加 ref;2. 使用 this.$refs[`record${i}`] 获取当前元素 dom 结构完整代码<template> <div class="wrap"> <div v-for="(item,i) in testArr" :key="item.id" :ref="`record${i}`" :id="'record'+i"

js-pinyin npm

1. Vue-cli2 升级到 Vue-cli3+1.1 卸载旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.> x)，需要先卸载它。npm uninstall vue-cli -g// 或yarn global remove vue-cli 1.2 node 配置Vue CLI3+ 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)1.3 全局安装包npm install

在做 vue 中大型项目的时候，官方推荐使用 axios，但是原生的 axios 可能对项目的适配不友好，所以在工程开始的时候来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。如果你能看到这篇文章，鉴于有很多小白可能会参考我这篇文章来进行前期配置，特说明下正式配置路线：获取到项目及后台接口，首先做的是配置全局代理及第二点；全局封装 axios 及第三点 request.js；过滤 axios 请求方

在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果，使用不同的功能呢？这里就需要引入环境的概念。一般一个项目都会有以下 3 种环境：开发环境（开发阶段，本地开发版本，一般会使用一些调试工具或额外的辅助功能）；测试环境（测试阶段，上线前版本，除了一些 bug 的修复，基本不会和上线版本有很大差别）；生产环境（上线阶段，正式对外发布的版本，一般会进行优化，关掉错误报告）

我们先看下官方文档：vue .sync 修饰符，里面说vue .sync 修饰符以前存在于vue1.0版本里，但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中，我们发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分，从 2.3.0 起我们重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。...

1. js-cookie 安装及引入js-cookie 是关于 cookie 存储的一个js的API，根据官网描述其优点有：适用所有浏览器、接受任何字符、经过任何测试没什么 bug、支持 CMD 和 CommonJS、压缩之后非常小，仅900个字节。npm install js-cookie --save在这里插入代码片...

1. 前言多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props 特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和 事件总线 的情况下变得简洁，业务清晰。首先分析以下应用场景A 组件与 B 组件

1. 简介DES是一种对称加密 (Data Encryption Standard) 算法。于1977年得到美国政府的正式许可，是一种用56位密钥来加密64位数据的方法。一般密码长度为8个字节，其中56位加密密钥，每个第8位都用作奇偶校验。DES算法一般有两个关键点，第一个是加密算法，第二个是数据补位。加密算法常见的有 ECB 模式和 CBC 模式。ECB 模式： ECB（电子密本方式）其实非常简单，就是将数据按照8个字节一段进行DES加密或解密得到一段段的8个字节的密文或者明文，最后一段不足8个

在 vue 的项目中，我们时常会需要对 data 的改变做出处理，这时候就需要用到 watch 和 computed 这两个属性。既然都是数值改变触发改变的属性，他们之间又有什么异同呢？1. 计算属性 computed特点：支持缓存，只有依赖数据发生改变，才会重新进行计算；不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化；computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的。也就是基于 data 中声明过或者父组件传递的 props 中的数据通过

1. WebSocket 简介前端和后端的交互模式最常见的就是：前端发数据请求，从后端拿到数据后展示到页面中。如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。一种新的通信协议应运而生 WebSocket，它最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。WebSocket 其他特点：建立在 TCP 协议之上，服务器端的实现比较容易；与 HTTP 协议有着良好的兼容性；默认端口也是80和443，并且握手阶段采用 HTT

安装插件:moment.jsnpm install momentformat就是格式化函数，参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式。详情请看下图：1 获取当前时间var moment = require('moment');let seekTime = moment().format("YYYY-MM-DD HH:mm:ss");console.log...

安装插件:moment.jsnpm install momentformat就是格式化函数，参数’YYYY-MM-DD HH:mm:ss’定义了返回日期的格式。详情请看下图：1. 计算两个日期差var moment = require('moment');let diffTime = moment('2020-04-02').diff(moment('2019-04-02'));...

安装插件:moment.jsnpm install moment1. UTC(世界标准时间) 转 指定日期格式2020-03-07T16:00:00.000Z 转 2020-03-08 00:00:00<script>export default { methods:{ formatTime(){ var moment = ...

1. mixins 简介混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。1.1 mixins 理解组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。而 mixins 则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件

应用场景：有时候我们需要下载的文件数量不多且内容是固定的不变的静态文件（如：模板之类），那么实现下载功能在前端就可以完成，不需要和服务端进行交互。如需下载内容较为复杂是动态文件，请移步 传送门：Vue中 实现文件流下载本文vue-cli 版本：3.x， 4.x1. 将待下载的文件放在 public 里public 文件夹下的文件并不会被 Webpack 处理，它们会直接被复制到最终的打包目录下。必须使用绝对路径引用这些文件，简单说 public 就是用来存放万年不变的文件。2. 组件中代码实现

1. 简介1.1 函数防抖(debounce)定义： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；(类似于 王者荣耀回城效果~~）典型的案例 输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。实现原理： 函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。使用场景：搜索框搜索输入，最后一次输入完成后，再发送请求；手机号、邮箱的输入验证；window 触发

vue-clipboard2 github地址vue-clipboard2 npm地址1. 安装并引入npm install vue-clipboard2 --save// 全局引入main.jsimport VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)2. 使用方法一<template> <div> <el-button v-clipboard:copy="cop