摘要：有过，项⽬开发的时间⻓了，沉淀了不少业务通⽤全局组件，想把他们统⼀进⾏注册，就封装了⼀个⼩ 插件 当时其实⼀开始也没有什么思路，后来扒了⼀下 elementUI的源码，仿了⼀下它的写法，流程我还⼤概记 得 先是把所有的组件放到⼀个数组中，然后在插件的install⽅法⾥遍历整个数组调⽤Vue.com 阅读全文

摘要：token 失效分为主动失效和被动失效 主动失效 就是自己设置函数检查token是否失效了， 主要步骤 ；1 1.在登录的时候记录存储token的时间， 2. 在request文件，设置一个函数，用来检查token是否过期 3. 在请求拦截器记录当前的时间，并且引用函数主动检查token是否过期 ； 阅读全文

摘要：// import parseTime, formatTime and set to filter /** * Show plural label if time is plural number * 如果时间是复数，则显示复数标签 * @param {number} time * @param { 阅读全文

摘要：传统的图片上传 ； 封装一个上传 接口 ； 注意 把 input 隐藏掉 ；-- hidden ； 点击事件上传 ； element-ui 的图片上传 https://element.eleme.cn/#/zh-CN/component/upload#methods 阅读全文

摘要：预览详情 ： 父组件：注册引入子组件 ；只需要传递一个数据 limit ；这是限制显示多少张图片 ； 子组件： - 图片上传 - el-upload 代码 ； <template> <div> <el-upload action="#" list-type="picture-card" :file- 阅读全文

摘要：// 回顾自定义指令 // 作用 ： 自定义一些对dom操作的快捷指令 // 前提：指令就是用来操作 dom （v-if /v-show/v-for ....） // 语法：Vue.directive(指令名字，{配置对象}) // 使用：<标签 v-指令名=“表达式/变量名” /> import 阅读全文

摘要：1.在 存储 token 的时候说明登录了 此时 把时间戳记录一下 js-cookies - auth.js // 导入 js-cookie 用于操作 cookies import Cookies from "js-cookie"; const TokenKey = "hrsacc_admin_to 阅读全文

摘要：分类：插槽又分为匿名插槽、具名插槽以及作用域插槽 ； 匿名插槽，我们又可以叫它单个插槽或者默认插槽 因为组件标签中间是不允许写内容的，但是可以插入 插槽 ；template 标签 ； 插槽的使用方法 ： 使用组件 定义组件 使用场景：vue提供组件插槽能力, 允许开发者在封装组件时，把不确定的部分定 阅读全文

摘要：路由守卫共有 7 个 ； 全局路由守卫 3 个 ： beforeEach 全局前置守卫 ；所有的路由跳转都要经过beforeEach ，参数 to 去的路由信息 ，from 来自的路由信息 next 是否放行 ； afterEach 后置守卫 beforeResolve 解析守卫 组件守卫 befo 阅读全文

摘要：首先 token 过期会导致请求不到数据 ， 就不能准确渲染页面 ，此时的错误配置项的token是过期的，只要更新了token 拿着原先的配置项重新请求数据即可 ；但是如果更新token的时候请求错误，可能是refresh_token也过期了，直接去登录页面重新登录 ； 具体操作：先封装好一个更新t 阅读全文

摘要：<template> <div class="search-history"> <div class="search-history"> <van-cell title="搜索历史"> <template v-if="isEdit && searchHistories.length"> <!-- v 阅读全文

摘要：传值 keywords <template> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="(item, index) in list" 阅读全文

摘要：// 父组件传 1 个值 关键词 // 子组件 的 emit自定义的search事件会委托父组件改变 keywords 的值 然后更新 props 的keywords 然会触发 watch 的 handler 函数 然后请求建议数据 <template> <div> <!-- 显示搜索建议 --> 阅读全文

摘要：搜索逻辑的判断展示思路 * 1. 如果 keywords 是空，就显示搜索历史 * 2. 如果 input 聚焦，并且搜索关键词 keywords 不为空，就显示搜索建议 * 3. 点击搜索按钮或者在input框聚焦状态下按下 enter 触发 input 的时候展示搜索结果 <form actio 阅读全文

摘要：// vue.config.js 文件是脚手架的配置文件 const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, lintOn 阅读全文

摘要：1. vue create 项目名称 整理目录 2. 工具层 utils 封装本地存储 storage.js 存值 取值 删值 封装请求实例 request.js 创建实例 - 配置基准地址 baseURL 请求拦截器 - 统一携带 token 响应拦截器 - 处理 token 过期 未登录 异常错 阅读全文

摘要：场景：token过期，然后更新了token 重新发起请求获取数据 ； 代码：使用上一次的错误请求配置报错 return request(error.config) ； 解决 ： return request({ ...error.config, headers: {}, }); // 添加响应拦截器 阅读全文

摘要：1. 添加全局前置路由守卫 import store from "@/store"; import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); const routes = [ { path: "/" 阅读全文

摘要：使用场景：点击图片预览图片的时候，用于生成一个临时的预览地址 ，会存放在本地电脑的内存中 ； imgFile 是？？ 使用 input type = file 选择的图片 ； const imgFile = this.$refs.imgFile.files[0]; // 接口需要的参数 file类型 阅读全文

摘要：点击生日表格的时候，popoup 显示 ，popup 包裹一个修改生日的组件 ； ps：父组件传值 当前的 日期 birthday -currentDate ； 在onfirm 方法里面更新数据 ，然后更新视图 ； <template> <van-datetime-picker v-model="c 阅读全文