凡尔赛学院-优快云博客

原创 Vue中自动批量注册组件、指令、store或route模块

【代码】Vue中自动批量注册组件、指令、store或route模块。

2022-08-22 20:04:54 389

router-view组件有无key的区别（router-view已被keep-alive包裹）无key：不同路由配置的组件相同时，这些路由会共用同一个组件实例。（通常做法）有key：不同路由配置的组件相同时，每个路由对应一个自己的实例。（需要用一个组件配置多个路由，同时又希望这几个页面相互独立、互不影响）有key的常规写法：有key的注意事项问题：这个有key的router-view可能会创建出多余的组件实例，导致内存泄漏。产生原因：新的路由导航结束时，如果这个有key的router-vie

2022-07-01 19:03:19 3052

原创新版Google Analytics（GA4）入门教程

有关旧版Google Analytics（GA3）的说明： GA3（使用analytics.js）于2012年10月发布，GA4（使用gtag.js）于2020年10月发布。 GA3用到的ID为【跟踪ID】，格式是UA-XXXX-Y（XXXX是GA账号ID，Y是GA账号的媒体资源ID）。GA4用到的ID为GA账号的数据流的【衡量 ID】（格式是G-XXXX）、跟踪代码管理器的【容器ID】（格式是GTM-XXXX）。ID获取和使用方式后文中会说明。使用步骤：创建GA4账号：网址：htt

2022-04-20 13:02:19 4401

原创限制element ui的input组件的输入内容

需求描述：在 vue项目中对element ui的input组件输入的内容做限制，比如只允许输入正整数。思路描述：用带native后缀的keyup事件将对应方法绑定到input组件。方法内用正则表达式处理目标元素的value。手动触发目标元素的input事件，利用v-model监听input事件的原理将新value更新到元素绑定的数据。...

2022-03-30 18:56:11 1798

原创数据埋点之记录token过期登出行为的前端解决方案

问题描述：通过调用接口的方式实现数据埋点（事件跟踪），但需要记录因token过期导致的登出行为时会遇到问题：token已经过期了，无法用这个过期的token去调用数据埋点接口来记录用户行为。思路：让后端同学在返回token的接口添加字段：token过期时长。在刚获取token时，使用定时器实现在token过期的前一秒调用数据埋点接口。存储三样数据：定时器实例、token过期时长（必须本地存储）、获取token时的系统时间（必须本地存储）。特殊情景和处理方案：用户登录后手动点击登出：直接调用数据埋

2022-03-22 21:53:52 952

原创手写极简版vuex

let Vue = '' // 保存Vue实例class Store { constructor (options) { this.$options = options // 保存选项 // Vue实例配合getter、setter保证state的只读性质 this._vm = new Vue({ data () { return { $state: options.state // 以$开头取消数据代理 } .

2022-03-16 21:26:08 328

原创手写极简版vue-router

let Vue = '' // 保存Vue实例class VueRouter { constructor (options) { this.$options = options // 保存路由配置信息 Vue.util.defineReactive(this, 'current', window.location.hash.substring(1) || '/') // 为非响应式对象添加响应式属性（不能用Vue.set()的原因是其要求目标对象是响应式对象） // 侦听ha.

2022-03-10 21:39:29 110

原创 echarts之Error: Initialize failed: invalid dom.

问题截图：产生原因：进入图表页后调用获取图表数据接口，接口未返回数据时就跳离图表页，而后数据返回并创建图表，但因为跳离了图表页所以获取不到dom元素，因而报错并且创建图表失败。解决方案：不使用原生js方法获取dom元素（例如：document.getElementById()），改用this.$refs。如果图表所在页是缓存页，并希望跳回图表页后图表能加载好，则需要在图表容器的行内样式中写好容器的宽高（以px为单位）。（对于缓存页也提供另外一种解决思路：在组件的activated生命周期执

2022-02-17 18:23:49 3163 1

原创 axios实现发起新请求时取消上一次请求（如果上一次请求结果还未返回）

需求：发起新请求时取消上一次请求（如果上一次请求结果还未返回）参考：原文地址：使用说明 · Axios 中文说明 · 看云代码实现：未作处理： import request from '@/utils/request'// 获取跑道图的数据export function getTrackChartDataApi(data) { return request({ method: 'post', url: '/charts/routeMap', data,

2022-02-17 11:03:15 1864

原创如何在vue项目中配置引用路径“@”

配置引用路径（以@引用为项目的src目录为例）可拆分为如下两步操作配置webpack打包时将@解析为项目的src目录配置vsCode在路径中输入@时的路径提示本贴着重讲解“配置webpack打包时将@解析为项目的src目录”的操作和溯源操作在项目根目录的vue.config.js文件中做如下配置 const path = require('path')module.exports = { configureWebpack: { resolve: {

2021-09-11 20:30:05 20171 1

原创如何在vue项目打包时清除console.log()

需求：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-02 12:56:19 4999 5

m0_60692814的博客