King、344-CSDN博客

原创 vue3.0手写图片放大镜效果

首先准备大图容器和遮罩容器然后使用@vueuse/core的useMouseInElement方法获取基于元素的偏移量计算出遮罩容器定位与大容器背景定位暴露出数据给模板使用 //这是大图根据是鼠标进入小图来进行显示和隐藏<div class="large" v-show="isShow" :style="[{backgroundImage:`url(${images[currIndex]})`},bgPosition]"></di...

2021-09-25 11:26:15 252

原创项目优化-图片懒加载vue

当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。介绍一个webAPI：IntersectionObserver// 创建观察对象实例const observer = new IntersectionObserver(callback[, options])const obs = new IntersectionObserver((entries, observer) => { // entries = [{isIntersecting: true}] },

2021-09-16 20:31:53 110

原创 js数组的常用方法最详情最详解

数组的方法1.push()添加到最后，返回添加后的数组,改变原数组 let arr =[1,2,3,4,5] arr.push(6)console.log(arr) =[1,2,3,4,5,6]2.unshift()添加到最前面，返回添加后的数组；改变原数组let arr =[1,2,3,4,5] arr.unshift(6)console.log(arr)=[6, 1, 2, 3, 4, 5]3、shift(）删除数组的第一个元素改变原数组l..

2021-09-11 10:32:51 255

原创 webpack配置排除打包-打包瘦身和引用Cdn网络资源

通过配置vue-cli把一些平常不需要用的包排除在打包文件之外。例如:让 webpack 不打包 vue xlsx 和 element使用方式先找到 vue.config.js，添加 externals 项，具体如下：configureWebpack: { // 配置单页应用程序的页面的标题 name: name, externals: { /** * externals 对象属性解析。 * 基本格式： * '包名' :

2021-09-01 20:39:52 600

原创 VUE项目打包去掉console.log

在vue.config.js中，配置：chainWebpack(config) { config.optimization.minimizer('terser').tap((args) => { args[0].terserOptions.compress.drop_console = true return args })}

2021-09-01 20:12:40 199

原创 vue自定义指令

注册格式// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时inserted会自动执行 inserted: function(el, binding) { // v-focus="'abc'" ===> binding.value = 'abc' console.log('focus.... binding', binding.value) // 聚焦元素 el.fo

2021-08-29 15:23:41 53

原创 vuex的基本使用

vuex核心概念官网地址: https://vuex.vuejs.org/zh/ 安装(固定) 配置项(固定) 配置项含义注意state单一状态树类似datamutations数据管家(同步)唯一修改state地方actions异步请求要改state需要提交给mutationsgettersvuex计算属性类似computedmodules模块拆分配置项含义:注意 state state是存放共享数据的地方

2021-08-27 16:28:50 51

原创项目图片性能优化腾讯云cos申请配置

使用现成的腾讯云服务创建一个免费的云存储案例操作前置基础：1.在云服务器上的准备：申请cos服务器，配置密钥,设置cors访问2.在代码层面的准备：(1) 下载一个官方提供的操作cos服务的包(cos-js-sdk-v5)(2) 用自己的密钥去实例化cos(3) 具体做上传在项目中安装依赖```npm i cos-js-sdk-v5 --save```### **实例化cos对象**在`src/components/Uplo...

2021-08-27 16:04:23 271

原创 vue-element-excel导出功能介绍

前端主导（工作大量在前端)vue-element-admin中的导出方案1.把vue-element-admin中的导出功能，迁移本项目2.在项目中安装依赖 npm install file-saver script-loader xlsx --save3.给导出按钮添加点击事件import('@/vendor/Export2Excel').then(excel => { // excel表示导入的模块对象 console.log(excel) excel.expor

2021-08-26 20:49:29 407 1

原创 vue-element excel导入功能

1.将vue-element-admin提供的组件复制到我们自己的项目 src/components/UploadExcel下2.新建一个公共的导入页面，即import路由组件 src/views/import/index.vue在页面中使用前面封装的excel上传组件，并补充导入成功后的回调函数<template> <upload-excel :on-success="handleSuccess" /></template><script&

2021-08-21 13:28:31 200

原创防抖和节流

当事件触发之后，约定单位时间（比如1s）之后，执行里面的代码；如果在单位时间只内再次触发了事件，那么要重新计时，以保证事件里面的代码只执行一次。<body><button>按钮</button><script>lettimer=nulldocument.querySelector('button').addEventListener('click',function(){...

2021-08-18 20:52:53 45

原创使用svg-icon组件步骤

第一步安装包:npm i svg-sprite-loader第二部配置:vue.config.js//这是nodejs语法配置路径const path = require('path')function resolve (dir) { return path.join(__dirname, dir)}{ // 省略其他... chainWebpack (config) { // set svg-sprite-loader config.module

2021-08-11 20:18:53 332

原创 uni-app入门详解

什么是uni-appuni-app是一个使用Vue.js语法来开发所有前端应用的框架（也称之为全端开发框架）技术栈：JavaScript，vue，微信小程序， uni-app如何创建项目脚手架搭建项目1.全局安装 npm install -g @vue/cli 2.创建项目 vue create -p dcloudio/uni-preset-vue my-project 3.启动项目（微信小程序） npm run d...

2021-08-08 22:08:07 336

原创 vue项目优化

1、v-for 正确设置key值2、封装复用的模块（http请求）、组件（ui库）3、路由懒加载：component：() => import(’./xxx.vue’)4、productionSourceMap: false5、启用gzip压缩，打包体积更小6、keep-alive 缓存不活跃组件7、插件CDN方式引入，减小项目体积8、图片使用CDN地址，图片懒加载...

2021-08-04 21:55:44 54

原创数组转树形结构

2021-08-04 19:57:47 64

weixin_56562996的博客