weixin_60547084的博客

这些代码都是 vue2 项目的，vue3 也通用，改一下 loading 和 message 就好了（主要是 element 的区别）我这里的应用场景是 token，当我发现当前请求没有 token 时，先挂起当前请求然后获取 token，在添加上。在请求响应拦截器里面添加 loading，这样就不需要给每一个请求添加 loading 了。重复请求需要取消，取消请求会走响应拦截器的 error，会和请求重试有冲突。响应状态码配置，更好的给用户提示，这里只设计到响应，就只写了响应拦截。

因为最近都是做的 pc 端的项目，所以就按 pc 端常用的来配，都是架子可以直接拷贝。

标注：需要通过 --mode 去匹配对应的环境文件，而开发环境不需要配置。测试环境不会生成 css 文件，而是每个组件生成对应的 js 文件。

/ 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了。// 替换状态(不是覆盖状态)，需要新的状态去替换旧的，如果 key 值不相同就是添加新状态。// 修改状态3，这种方式和 React 中的 setState 很像。// 当函数中存在失败状态的 Promise，或函数抛出异常时执行。// 这个 store 的 Id，这里是 count。// action 中的函数每次调用，都会触发一次。// store 中的值，每修改一次就会触发。

define 开头的都是使用的宏编译，不需要导入。后面的列子都是使用 setup 语法糖的写法。

在vue2和vue3中使用的方式基本一致，这个在官网上都有描述，因为之前没有去封装过公共组件也就没有去留意过，这个是在vue2.3.0的时候新增的一种双向绑定。

3. 通过 history 实现3.1 实现思路在 window 上有一个 history 对象，使用该对象的 pushState、replaceState方法时，对浏览器的历史记录进行操作，页面并不会进行刷新而使用 ，，时会触发 window 上的 popstate 方法，页面也不会进行刷新3.2 代码实现4. 效果图

/ 可以直接通过 store. 去获取 state、getters、actions 中的属性和方法了。// 替换状态(不是覆盖状态)，需要新的状态去替换旧的，如果 key 值不相同就是添加新状态。// 修改状态3，这种方式和 React 中的 setState 很像。// 当函数中存在失败状态的 Promise，或函数抛出异常时执行。// 这个 store 的 Id，这里是 count。// action 中的函数每次调用，都会触发一次。// store 中的值，每修改一次就会触发。...

文章目录静态路由动态路由静态路由// 最开始就把路由给配置好import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)import Login from "../page/login/Login.vue"const routes = [ { path: "/", redirect: "/login", }, { path: "/login", componen

文章目录1. Vue3带来了什么1.1 性能的提升1.2 源码的升级1.3 支持TypeScript1.4 新的特性2. 常用的 Composition(组合式) API2.1 setup函数2.2 ref函数2.3 reactive函数2.4 计算属性与侦听器2.4.1 computed函数2.4.2 watch函数2.4.3 watchEffect函数2.5 自定义hook2.6 toRef与toRefs2.7 Provide与Inject3. 其他组合式API3.1 shallowRef与shallo

文章目录vue2与vue3生命周期官网图解之间的区别生命周期的改变组合式API中的生命周期vue2与vue3生命周期官网图解之间的区别在 Vue2 中，如果实例没有挂载，那么也会走 beforeCreate、created在 Vue3 中，如果实例没有挂载，那么生命周期就不会走生命周期的改变beforeDestroy ===> beforeUnmountdestroyed ===> unmounted组合式API中的生命周期在 Vue3 中可以使用配置项生命周期，

父组件与子组件父亲 beforeCreate父亲 created父亲 beforeMount孩子 beforeCreate孩子 created孩子 beforeMount孩子 mounted父亲 mounted设计到路由组件设计到路由组件时，父组件一定会更新一次父亲 beforeCreate父亲 created父亲 beforeMount父亲 mounted父亲 beforeUpdate孩子 beforeCreate孩子 created孩子 b

问题一为什么在 created 中使用了 $nextTick 可以通过 Vue 的方式获取 DOM？？？首先说一下为什么我会有这个疑问在事件循环(Event loop)中，微任务的优先级是要大于 DOM 渲染的而在 Vue 底层对于 $nextTick 的实现，如果浏览器支持 Promise，那么就是用的 PromisePromise.then 也是微任务我这里测试是使用的谷歌浏览器，所以 $nextTick === 微任务<div id="app" ref="app">

scoped作用：使样式局部生效，防止冲突写法：<style scoped>原理：为每一个标签添加了一个 data-v-xxx 属性，通过属性选择器添加样式注意：父组件的 scoped 会给子组件根元素添加一个相同的 data-v-xxx 属性穿透在使用组件库的时候，scoped 并没有为深层的 dom 元素添加 data-v-xxx 属性这个时候就需要用到穿透，手动添加 data-v-xxx 属性css 穿透<!-- 拿 vant 组件为例 --><s

文件间的关系App 为根组件Father 与 Brother 为兄弟组件，也同为 App 的子组件Child 是 Father 的子组件，也是 App 的孙组件2. 父子之间传值2.1 props，父传子// Father.vue 文件 import Child from "./Child.vue";export

文章目录1. 单页面应用(SPA)2. 路由的理解2.1 什么是路由2.2 路由分类3. 路由的安装与搭建4. 路由的使用4.1 基本使用4.2 嵌套(多级)路由4.3 路由传参5. 路由命名与元信息5.1 命名路由5.2 路由元信息6. 路由的props配置7. 编程式路由导航8. 缓存路由组件9. 路由守卫9.1 路由配置信息9.2 全局路由守卫9.3 路由独享守卫9.4 组件内的守卫9.5 完整的导航解析流程10. 路由器的两种工作模式11. 路由懒加载1. 单页面应用(SPA)SPA (sin

文章目录1. vuex是什么2. 什么时候使用 vuex3. vuex 工作原理4. vuex安装与搭建5. vuex 核心概念和 API5.1 state5.2 getters5.3 mutations5.4 actions5.5 Module6. 辅助函数6.1 mapState与mapGetters6.2 mapMutations与mapActions7. 模块化编码与命名空间1. vuex是什么专门在 Vue 中实现集中式状态数据管理的一个 Vue 插件对 Vue 应用中多个组件共享状态进行

文章目录1. Vue 过渡与动画2. vue 脚手架配置代理2.1 单个代理配置2.2 多个代理配置1. Vue 过渡与动画作用：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果写法：当标签没有 name 属性时，样式默认为 v 开头，有 name 属性时，以 name 属性值开头元素进入的样式：v-enter：进入的起点，(name=“text”，text-enter)v-enter-active：进入过程中v-enter-to：进入的终点元素离

文章目录1. 组件与模块1.1 模块1.2 组件1.3 模块化与组件化2. 非单文件组件的使用2.1 data与el的两种写法2.2 使用组件的步骤2.3 使用组件的注意项2.4 组件嵌套2.5 Vuecomponent2.6 Vue实例与组件的关系3. 单文件组件的使用3.1 认识3.2 文件结构4. 组件间操作4.1 ref属性4.2 props配置4.3 mixin混入4.4 插件4.5 scoped样式4.6 自定义事件4.7 全局事件总线4.8 消息订阅与发布4.9 `nextTick`1. 组

先看图Vue 实例初始化：beforeCreate → created → beforeMount → mountedVue 实例更新：beforeUpdate → updatedVue 实例销毁：beforeDestroy → destroyed常用的生命周期钩子：mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】关于销毁 Vue 实例：销毁后借助 Vu.

文章目录1. 什么是vue2. vue的特点3. MVVM模型4. 初始vue5. 模板语法(插值表达式)6. vue内置指令6.1 v-on：事件绑定6.2 v-bind：属性绑定6.3 v-text：更新元素6.4 v-html：更新元素6.5 v-if：条件渲染6.6 v-show：条件渲染6.7 v-for：列表渲染6.8 v-model：双向绑定6.9 v-cloak6.10 v-once6.11 v-pre6.12 v-slot：插槽7. 自定义指令7.1 函数式7.2 对象式7.3 全局与局部