happy81997的博客

1、和node.js版本不兼容，需要看下node-sass官网，看看package.json文件中的版本与当前node.js版本是否兼容。查一下自己安装的node-sass对sass-laoder那个版本兼容，分别安装一下即可。node -v 查看下自己node.js版本然后下载对应的node-sass。彻底弃用，不好用，又不是不可替代，还用个锤子。vue中node-sass安装报错解决方案。2、和sass-loader版本不兼容。

使用scoped后，局部样式，不会影响到全局样式如果想在使用了scoped不污染全局样式的情况下，修改局部组件的样式，可以使用深度选择器less中一般使用 >>> 或 /deep/scss中一般使用 ::v-deep

给按钮加上一个全局指令 noMoreClick 来限制在一定的时间内控件为 disabled不让再次点击。

vue项目中，页面的全屏工具screenfull。

很多人在用 或 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。设置 setStorageStorage 本身

路由懒加载可以让我们的包不需要一次把所有的页面的加载进来，只加载当前页面的路由组件就行。举个栗子🌰，如果这样写，加载的时候会全部都加载进来。所以，应该避免上面的写法，尽量使用懒加载。路由的懒加载可以分为以下三种写法。Vue异步组件es6的importwebpack提供的require.ensure()2、异步组件异步组件可以让我们在需要一些组件时才将它加载进来，而不是一初始化就加载进来，这跟路由懒加载是一个概念。以前是这么引入组件的如果不是一开始就要加载的组件，我们可以使用组件懒加载.

Day.js一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。npminstalldayjs基本用法importdayjsfrom'dayjs'dayjs().format('YYYY-MM-DDHH:mm')//=>2022-01-0315:06dayjs('2022-1-315:06').toDate()//=>MonJan03202215:06:00G...

目录Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）实现方案docx文件实现前端预览代码实现实现效果pdf实现前端预览代码实现实现效果excel实现前端预览代码实现实现效果pptx的前端预览Vue前端技术实现文件预览（word、excel、pdf、ppt、mp4、图片、文本）实现方案找了网上的实现方案，效果看起来不错，放在下面的表格里，里面有一些是可以直接通过npm在vue中引入使用。文档格式

Vue做的时间倒计时组件：<template> <div class="_base-count-down no-rtl"> <div class="content"> <slot v-bind="{ d: days, h: hours, m: mins, s: seconds, hh: `00${hours}`.slice(-2), mm: `00${mins}`.slice(-2),

目录vue工程数字动画组件vue animate-number的使用与填坑一、基本用法篇（一）、环境配置（二）、核心代码：（三）、API​二、填坑篇1、用数组v-for动态传值渲染时候不显示值，显示NAN2、提示找不到找不到start()方法。3、特殊利用formatter方法，定制需要显示的数字样式vue工程数字动画组件vue animate-number的使用与填坑一、基本用法篇（一）、环境配置1.终端执行：npm install vue-a

vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常，一般就是高度或者宽度不正常。主要原因还是echarts渲染时候，DOM还没渲染好。解决思路：1、获取包装所有tab页面的DIV的宽度和高度，因为这个再tab切换渲染前肯定已经固定存在了。2、给echarts的DOM强制赋值第1步的宽度和高度即可document.getElementById('pidichartDiv').style.height= document.getElementById("tjDi

vuex按F5刷新手数据丢失，无法保存问题最简单解决方案……原因： 页面F5刷新后，vuex会重新更新state，所以存储的数据会丢失解决办法：将vue相对state存在localStorage或sessionStorage或cookie中一份，刷新页面的时候，vuex数据消失了，vuex再从sessionStorage中拿回数据，变相的实现了数据刷新不丢失。具体解决过程：以vuex中的userdistCode变量为例。一、vuex中mutations给需要记忆数据的变量...

NPM安装 -S -D --save-dev --save区别npm i module_name -S = > npm install module_name --save 写入到 package.json文件dependencies 对象npm i module_name -D => npm install module_name --save-dev 写入到 package.json文件devDependencies 对象npm i module_nam..

vue工程中，经常需要使用公共组件，正常的流程就是先import，然后再注册，然后再使用，比较繁琐，一劳永逸解决组件注册问题，只要放在这个文件夹下的所有组件，可以直接通过组件名字进行调用，不需要任何import和注册。一、再src下新建一个globalComponents文件夹，用来专门存放公共组件，并且再该文件夹下新建global.js文件//global.js文件import Vue from 'vue' function capitalizeFirstLetter(string

vue工程中js异步函数用法vue工程中，对一些异步函数进行调用，不能按照普通函数进行调用，会涉及调用顺序的问题，对异步函数的调用：js文件写法：import { getSystemList } from "../http/moduleManage/moduleManageServices";export default function getSystemListData(type){//注意Promise、resolve 用法 return new Promise((res

axios请求post、get请求根据后参数类型的使用（带token）一、get请求：get请求常见的参数类型（Parameter Type）是query，传参过程： axios.get("/manage/project/staff/position/list", { params: { staffId: row.id, },

问题描述：vue工程start运行时候报错：no such file or directory, scandir '.../node_modules/node-sass/vendor'原因：找不到node_modules/node-sass/vendor模块。去文件夹一看，还真的是没有，应该是在安装全局依赖的时候，没有安装到vendor，通过rebuild命令重新安装一下就可以啦。解决办法，运行：npm rebuild node-sass...

vue 实现点击“增加“”按钮，添加一个HTML元素场景描述：vue中经常需要点击一次增加按钮，添加一个HTML元素，比如一个div。初始状态：点击“增加”按钮后，添加一套这样的元素：实现思路：可以利用v-for循环的方式，循环itemcount变量，先设为一个itemcount变量为1（这里初始化显示的是1个），然后“增加”按钮的事件让itemcount增加1，即可。代码：data中定义：itemcount:1,template标签中：<templ

Vue混入mixin介绍mixin官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项通俗解释：日常开发中，经常会遇到不同组件中会出现需要一些相同的或者相似的代码，这些代码的功能相对独立。可以利用vue的mixin将功能相同的或者相似的提出来，方便代码复用，也有利于代码维护。一、局部组件混入二、...

element-ui提供了很多方便的UI组件，但是使用的时候，特别是频繁使用到一个模块时候，经常需要进行二次包装，比如弹窗，很多弹窗需要加一些确定，取消按钮需要一些固定的模板套路，这些都可以利用二次封装实现。一、二次封装基本套路1、实现二次封装功能的模板：子组件<template> <el-dialog :visible.sync="visibleDialog"> <!--内容区域的默认插槽--> <slot></slo

Vue.extend开发全局组件，可通过js直接调用方法来显示和关闭 Vue.extend是一个全局Api,平时我们在开发业务的时候很少会用到它，但有时候我们希望可以开发一些全局组件比如Loading,Notify,Message等组件时，这时候就可以使用Vue.extend。 本文以开发个全局的loading加载组件为例，实现全局的遮罩层，并且实现通过js直接调用方法来控制组件显示和关闭，而不是通过components关键字来塞到每个vue文件里使用。一、开发全局需要展示的组件，实现...

目录vue工程：过滤器filters(文本格式化)使用、复用、全局注册一、文本格式化的使用二、文本格式化的本VUE文件内复用三、全局注册filtervue工程：过滤器filters(文本格式化)使用、复用、全局注册过滤器filters是被用于一些常用的文本格式化，比如时间显示的格式，比如数字太大，显示成多少万……一、文本格式化的使用过滤器添加再表达式的尾部，由管道符号“ | ”表示<div>{{ text | capitalize }}</div.

场景描述：VUE工程根据数据情况进行V-if渲染，当数据还没进行到哪一步，还没返回结果，或者数据返回有问题时候，提示data.area（数据没有，更不会获取到数据的某个属性值）未定义错误问题解析：没有请求到数据，就无法获取到数据的某个属性值，但是很多时候我们还需要设置数据的属性值解决办法：v-if中添加一个data.length的判断。 v-if="data.length >0" 确保数据有结果了，才进行渲染即可...

vue项目中 v-if和v-show的区别最全解析vue项目中有时候需要控制“条件渲染”，很多时候都是通过v-if或者v-show来控制的，有关二者的区别我想很多人都知道，但是最近做项目发现项目组中不少同志都搞不清，几乎都是乱用，出了问题，还判断不出来问题出在哪里。现在就简单讲讲这两个东西的区别。一、功能区别两个都能实现控制显示和隐藏，但是本质上有巨大的区别：1.1 v-show v-show严格意义上说“条件隐藏”。浏览器首先不管三七二十一，把HTML元素先渲染起来，符合...

目录vue工程 axios请求数据使用传统介绍+经验优化一、axios介绍二、axios安装三、axios入口配置四、axios使用4.1 get请求4.1.1 不带参数4.1.2 带参数4.2 post请求五、改进优化设置vue工程 axios请求数据使用传统介绍+经验优化一、axios介绍 在vue高版本项目中，很多使用axios...

目录VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）一、监听string属性值的变化二、监听object对象三、监听路由四、监听本身的属性4.1immediate属性4.2 deep属性五、监听vuex中值的变化VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）vue项目工程中，很多时候需要我们监听各种值的变化，一般监听......

重新npm install报错：no such file or directory 或者 deprecated XXX@版本号 解决方案问题描述：删除项目node_modules文件夹后，重新install，有时候重换操作系统，比如win7到win10，或者项目初始化构建时候时间太久远，就可能报no such file or directory 或者 deprecated XXX@版本号...

目录一、总体思路二、具体流程1、在src下面新建一个目录utils文件夹2、在utils文件夹下新建一个index.js文件3、main.js挂载到vue实例中三、如何使用vue项目工程中，有很多公用的js函数，为了便于集中管理，可以在src下面新建一个utils文件夹统一管理。这样在使用时候直接调用这个utils文件夹的内容就行。一、总体思路src下面新建一个...

目录一、xe-Utils介绍二、xe-utils API介绍API全局参数基础函数常用函数日期函数高级函数浏览器函数三、如何全局使用xe-utils3.1 安装xe-utils3.1.1 ES6方式（推荐）：3.1.2 CDN安装3.1.3 AMD安装3.2 全局配置3.3 全局参数配置（可省略）3.4 使用4、功能扩展（使用mi...

目录一、综述二、实现过程2.1 安装vue-particles2.2 全局配置vue-particles2.3 使用 vue-particles三、具体参数说明四、样式调整，实现只作为背景4.1、根据id号调整样式4.2 根据自定义的class名称lizi设置样式一、综述为了提高页面展示效果，特别类似于登录界面内容比较单一的，粒子效果作为背景经常使...

目录一、引入第三方插件二、引入函数方法2.1 单个函数引入2.1.1 JS中export函数2.1.2 JS中export default函数2.2 多个函数引入2.3 成组全部引入三、引入数组、对象JS文件四、引入class类js文件五、引入CSS文件vue中经常需要import各种文件，比如样式、组件、方法、js文件、模块等，具体每种如何使用。一...

目录一、动态使用样式二、全局公共css样式文件2.1 main.js中引入2.2 index.html引入三、单个vue文件中引入样式四、样式作用范围控制4.1 scoped私有作用域4.2 混合使用4.3 深度作用选择器4.4 动态生成的dom的样式一、动态使用样式使用场景：根据不同的值使用不同的样式，或者给样式某个属性设置一个变量值使用方法：...

目录一、父子关系如何界定二、父to子组件三、子to父组件四、非父子（eventBus）4.1使用前提4.2 使用流程4.3 使用大坑4.4 问题遗留五、vuex传值（推荐）一个vue工程，涉及到很多页面之间的传值，具体总结如下一、父子关系如何界定要传值先搞清楚组件关系，父子关系如何界面，官网中没有明确说明，个人觉得看template，B组件作为com...

目录slot插槽应用场景：作用：分类一、单个slot（基本用法）二、多个slot（具名插槽）三、作用域插槽（子组件向父组件传值）slot插槽：父组件的内容放到子组件指定的位置应用场景：项目中有很多地方需要调用一个组件，比如弹窗，但是内容又不固定，有个可能弹出是表格，有的可能弹出是照片，这个决定于需要调用这个子组件的父组件，这种情况下就可以在自组建（这个弹窗中...

目录一、全局导航钩子函数（全局守卫）1.1 全局前置守卫：beforeEach1.2 全局后置守卫:afterEach二、路由独享的钩子函数（路由守卫）:beforeEnter三、组件内的钩子函数（组件守卫）3.1beforeRouteEnter3.2beforeRouteUpdate3.3beforeRouteLeave四、路由监听watchvue工...

目录应用场景解决思路一、缓存所有页面二、缓存部分页面三、页面缓存了，有的功能需要再进入后，仍然重新执行的怎么办四、执行前进刷新，后退时候缓存五、页面B进入页面A需要缓存，页面C进入页面A不需要缓存应用场景1、vue工程，很多时候希望页面不管怎么跳转，返回时候，页面都能保持之前的操作状态，2、页面跳转不用每次都执行mounted，特别很多请求数据时...

vue提供了大量的钩子函数，来配合每个Vue实例创建，这就涉及到生命周期这个概念。vue生命周期牵涉到vue实例对象从创建之初到销毁的过程，vue所有的功能都是围绕其生命周期进行的，不同的周期内调用不同的钩子函数可以实现数据管理和DOM渲染两大重要功能。一、生命周期官方文档图二、钩子函数的详细介绍在上图，我们可以清楚地看到Vue整个项目周期和他所提供的钩子函数的作用。2.1...

问题描述：vue默认模式是hash模式，URL地址会带有“#”。例如：http：//www.xxx.com/#/index为了去掉这个#，需要在vue-router中，设置model为history，开发模式下木有问题，打包后，问题来了，原始路径下，http：//www.xxx.com/index刷新时候页面正常显示，如果路由跳转了，http：//www.xxx.com/inde...

Vue项目proxyTable反向代理，开发环境与生产环境下服务接口地址的自动匹配应用场景：vue项目中，如果采用了proxyTable反向代理，解决开发环境下的后台服务跨页问题的话，在生产环境下时候服务的URL地址就会报错。原因解析：1、配置了反向代理2、使用时候路径自带了apis，但是这只看开发环境下的，生产环境下识别不了这个apis解决办法（一）简单但每个使用...

VUE 2.X 问题爬坑集合一、通过路由跳转传参传值 通过路由跳转时候传参数、传值，一般就两种方式，params和query，但是注意：patams传参 ，路径不能使用path 只能使用name,不然获取不到传的数据。1.1params 传参跳转方法：this.$router.push({name: 'dispatch', params: {paicheNo: obj....