vue-router过渡动效
过渡动画我们使用vue官方提供的方法 transition 来实现，他的属性有 name(过渡动画名) ， mode(过渡模式) ，只有 out-in 和 in-out 两种模式。下面直接上代码。Vue2版本v3(vue2)官方文档<transition name="scale" mode="out-in"> <router-vie
vue公共js文件无法获取this(vue实例)
解决思路在 main.js 文件中创建vue实例之后将其暴露出去，然后在需要使用vue实例的文件夹引入 main.js即可获取到vue实例let that = new Vue({ router, store, render: h => h(App) }).$mount('#app') export default that // 暴露vue实例，使公共js可获取到vue实例(t
Vue2设置全局函数和全局变量
新建一个公共函数文件夹，在文件夹下新建一个js文件用于存放函数和变量 :cool:common.js// 全局变量 const gvar = { test: '全局变量' } // 全局函数 const test = () => { return console.log("全局函数"); }; // 暴露 export default { gv
vue全局路由守卫配置
先摆出 官方文档Q：路由守卫有何用？A：路由守卫可以实现许多功能，例如鉴权，登录状态校验，页面显示状态等等...全局配置可极大程度减少工作量，并且极大提高代码维护性...如何实现？实现路由守卫主要使用 vue-router提供的几个钩子函数 router.beforeEach(全局前置守卫)、router.beforeResolve(全局解析守卫)、router.afterEach(全局后置钩子)
vue2全局图标组件
1.全局注册组件方法可参考我的 上一篇文章2.设计组件在 @/components/ 目录下新建一个 Icon文件夹，文件夹内容如下我使用的图标库是iconfont上的Ant图标引入方法可参考 这篇文章把图标添加到项目之后，下载下来得到以下文件，将红色框框的文件复制到 @/components/Icon/iconfont目录下然后编写index.vue，直接上代码<template>
vue-cli 3自动导入全局组件
官方方法在此之前可以参考一下官方文档，参考完之后可以参考一下我稍作修改之后的方法如果你恰好使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：import Vue from 'vue'
vue纯手写手动暗色主题切换和跟随系统变化
小编还在快?加编中...
vue自定义一个全局消息弹窗组件
通过Vue.extend + $mount方法来构造一个带动画的可调用的全局组件，效果如下步骤如下先在components/目录下创建一个tips的文件夹再新建index.vue和tips.js的文件分别填入以下内容，并且修改main.js文件内容和public目录下index.html的内容index.vue<template> <div class="msg
深度选择器（样式穿透）
在 vue 项目的开发过程，会遇到在父组件中想要修改子组件的样式，如：官网地址：Scoped CSS | Vue Loader (vuejs.org)父组件：father.vue<script> import child from "./child.vue" </script> <template> <child cla
今天吃什么？
解决今天吃什么的问题，可以自己添加食物可也以用现成的使用到的技术：vue2 + element-ui<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib