![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
情系半生e
坚持分享,努力学习,冲冲冲!!!
展开
-
vue优化篇-1.前端性能优化及注意点
一.页面级优化1.减少HTTP请求数2.使用静态资源CDN加速3.使用字体图标 iconfont 代替图片图标4.使用 fontmin-webpack 插件对字体文件进行压缩。5.使用雪碧(精灵)图,多张图片合为一张图片6.提取公共样式,减少css样式获取7.图片懒加载 v-lazy-conmpent8.压缩文件用gzip, 前端webpack开启gzip,服务端也开启gzip9.尽可能利用 CSS3 效果代替图片,代码大小比图片小,并且显示效果好10.为避免卡顿,初次请求页面应延迟启动原创 2021-04-02 13:50:36 · 373 阅读 · 0 评论 -
Vue优化篇-2.防抖节流
调用throttle(this.fun, 3000, true)1.防抖/** * 防抖原理:一定时间内,只有最后一次操作,再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */let timeout = null;function debounce(func, wa原创 2021-04-02 13:45:33 · 247 阅读 · 0 评论 -
Vue功能篇- 10.upload上传组件封装
主文件为index.vue封装文件为upload.vue引用包为webupload详细内容之后补充,暂只放资源!下载地址: https://download.csdn.net/download/r657225738/13721773原创 2020-12-18 15:51:40 · 194 阅读 · 3 评论 -
Vue功能篇- 9.数据导出为Execl文件
目录1.下载引用包2.新建文件 Blob.js3.新建 Export2Excel.js4.页面使用1.下载引用包npm i xlsxnpm i file-saver2.新建文件 Blob.js/* eslint-disable *//* Blob.js * A Blob implementation. * 2014-05-27 * * By Eli Grey, http://eligrey.com * By Devin Samarin, https://github.com/eboy原创 2020-12-18 15:23:49 · 94 阅读 · 0 评论 -
Vue功能篇- 8.发送短信验证码组件封装
公用的短信验证码模块无需多言,简单好用!<template> <!-- <el-button class="loginright_btn nopadding" type="primary" @click="getPhoneCode()" :disabled="BtnSms"> {{smsTip}} </el-button> --> <span class="yanzhengcode" @click="getPhoneCode()"原创 2020-12-18 15:06:59 · 503 阅读 · 0 评论 -
Vue功能篇-7.基于SignalR实现消息推送(websocket通信)
目录1.下载依赖包2.封装signalr代码,便于扩展3. main.js全局引用4.页面使用C#后端代码下载1.下载依赖包npm i @aspnet/signalr 或cnpm i2.封装signalr代码,便于扩展signalR.jsimport * as signalR from "@aspnet/signalr";//连接集线器let connectionSignalR = new signalR.HubConnectionBuilder() //请求一次后端接口,保证是可通信原创 2020-12-09 14:06:29 · 4207 阅读 · 1 评论 -
Vue功能篇 - 6.检测页面长时间未操作返回首页功能
代码写于App.vue页面,相当于全局监听,每个路由是被包含在div中的!<template> <div id="app" @click="clickDiv"> <router-view></router-view> </div></template><script>export default { name: "App", data() { return { lastT原创 2020-11-25 10:37:39 · 2713 阅读 · 0 评论 -
Vue功能篇 - 5.element-ui使message每次显示一次(单例)
目录1.封装的js代码,找位置存放,如utils/singeMessage.js第一种: main.js中全局调用第二种:页面中单独调用1.封装的js代码,找位置存放,如utils/singeMessage.js/**重置message,防止重复点击重复弹出message弹框 */import { Message } from "element-ui";let messageInstance = null;let mainMessage = function DoneMessage(options原创 2020-11-24 17:41:47 · 1185 阅读 · 0 评论 -
Vue功能篇 - 4.element Dialog支持窗体拖动
目录1.js文件代码2、main.js中导入:import ‘./utils/directives.js’3.代码中使用1.js文件代码文件名: directives.jsimport Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dia原创 2020-11-18 09:29:47 · 729 阅读 · 0 评论 -
Vue功能篇 - 3.封装axios请求库,支持取消请求和刷新token
Vue封装axios请求库import axios from 'axios';import { Message, Loading} from 'element-ui';import router from '../router';import _ from 'lodash';import qs from 'qs';const http = axios.create({ baseURL: process.env.API_HOST, //设置请求的base url timeout原创 2020-11-18 09:25:36 · 5348 阅读 · 11 评论 -
Vue功能篇 - 2.顶部加载进度条
npm install --save nprogress参考文献:https://lvsige.blog.csdn.net/article/details/109111750原创 2020-11-18 09:24:22 · 257 阅读 · 0 评论 -
Vue功能篇 - 1.分页组件
Vue分页组件<!-- 分页公用组件 --><template> <div class="pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.page_index" :page-sizes="paginati原创 2020-09-14 16:57:29 · 1000 阅读 · 0 评论 -
[推荐] Vue、Element、JS问题与解决办法总结
本文主要记载使用Element中遇到的各种问题及解决方案目录NavMenu1.使用NavMenu时重复点击当前菜单报错正文NavMenu1.使用NavMenu时重复点击当前菜单报错import Router from 'vue-router' // 解决重复点击导航路由报错const originalPush = Router.prototype.push;Router.pr...原创 2020-11-18 09:31:56 · 630 阅读 · 2 评论 -
Vue兼容IE报错解决方案
兼容问题一般是IE 对于es6 的部分新对象、表达式,语法并不支持,解决方案是使用 babel-polyfill 来正常使用ES6。第一步: 安装babel-polyfillnpm i babel-polyfill第二步: 在main.js中引入babel-polyfillimport 'babel-polyfill'第三步: 在build中的 webpack.base.con...原创 2019-12-01 10:29:26 · 745 阅读 · 0 评论 -
vue+element-UI实现右键菜单
大体思路类似,具体实现在于控件是否提供了右键菜单的回调方法. 右键菜单的样式也可以根据自己需求进行变更.右键菜单的样式<div v-show="menuVisible"> <ul id="menu" class="menu"> <li class="menu__item">新增</li> <li class="menu_...原创 2019-05-23 14:31:51 · 18734 阅读 · 8 评论 -
vue配合elementUI完成全选功能
vue配合elementUI完成全选功能 <template> <div class="deliverySetting"> <div class="deliverySetting-btn"> <div class="tabs-btn ac"> <in原创 2018-12-27 13:27:45 · 4203 阅读 · 0 评论 -
解决vue单页文件引入js的问题
vue单页文件引入jsVue.component('remote-script', { render: function (createElement) { var self = this; return createElement('script', { attrs: { type: 'text/j...原创 2018-10-19 14:58:20 · 5514 阅读 · 1 评论 -
前端-Vue入门项目实战 Vue2+VueRouter2+Webpack+Axios
转载自FungLeo大神: https://blog.csdn.net/fungleo/article/details/77606321这个是对FungLeo文章的一个总体总结: https://www.cnblogs.com/zhaowy/p/8513070.html对于初入vue的小白很友好,强烈建议阅读!!!...转载 2018-09-21 15:11:40 · 161 阅读 · 0 评论