全易

unplugin-vue-components 的使用

那么在需要复制的地方就可以直接。没有权限的摁钮就显示不出来了。

mounted(){ console.log(this.$listeners);}父组件子组件打印看看：

自定义封装的组件、指令、过滤器，任何东西都千万不要挂载全局！哪里需要哪里import尽可能的让main.js文件 import最少如果你的项目使用ElementUI的组件比较少的话，可以在此按需引入，我的项目基本全用了，就直接全引了。

@time 2022-08-30 10:32:55 星期二。* @description 测试动态属性、事件。* @author 全易。

统一配置整个vue项目的全局事件防抖

举个例子，比如基本上每个页面都有筛选数据的功能，筛选完了要清空重置数据的按钮：那么每个页面都写一遍重置按钮的方法吗？那就太臃肿了此处有更优方案，使用vue的mxin：这就是重置按钮的功能了那么效果：https://cn.vuejs.org/v2/guide/mixins.html...

在子组件打印一下：mounted(){ console.log(this); },说明用到了两个插槽：left和columns

组件props必须定义value属性：是用来与父组件的v-model相呼应的向父组件传递数据：父组件v-model接收的数据使用组件效果：

超简单，就2步

给出默认的静态路由登陆成功后调用获取有权路由接口：在调用refresh接口时处理返回数据合并有权路由调用vueX的setRouters函数合并有权路由： // 设置权限路由 setRouters(state, data) { // console.log("接口返回路由信息：", data); // 5/1. 扁平化路由数据封装 let flatRoute = []; function flattening(menu) { men

简直不要太简单

如果使用require()引入页面文件的话，要加.default。{ path: 'home', name: 'Home', component: require("@/pages/home").default, meta:{ title: '首页', id:"0" } },

1. 官方获取key：https://console.amap.com/dev/key/app2. index.html引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script> 3.配置build/webpack.base.conf.js：externals: { 'AMap': 'AMap' },重启项目

vue项目配置二级目录、固定二级路由

config/index.js文件：

const directives = { focus: (el) => { el.focus(); }, }export default { install(Vue) { Object.keys(directives).forEach(item => { Vue.directive(item, { inserted: directives[item] }) }) }}import direct.

export default { numberFormatter: (num, digits) => { const si = [ { value: 1E18, symbol: 'E' }, { value: 1E15, symbol: 'P' }, { value: 1E12, symbol: 'T' }, { value: 1E9, symbol: 'G' }, { value: 1E6, symbol: 'M' }, .

大型项目中的数据状态会比较复杂，一般都会使用 vuex 来管理。但在一些小型项目或状态简单的项目中，为了管理几个状态而引入一个库，显得有些笨重。在 2.6.0+ 版本中，新增的 Vue.observable 可以帮助我们解决这个尴尬的问题，它能让一个对象变成响应式数据建立store文件：import Vue from 'vue'export const state = Vue.observable({ count: 0})export const mutations = { SET

安装：compression-webpack-pluginnpm install compression-webpack-plugin --save添加vue.config.js 文件，并配置compression-webpack-plugin：const CompressionWebpackPlugin = require('compression-webpack-plugin')const isProd = process.env.NODE_ENV === 'production'.

提供两种vue项目的配置方案

自定一个滚动指令：v-scrolldirectives: { scroll: { inserted(el) { el.scrollIntoView({ block: "end", behavior: "smooth" }); } } },

/* -------------------------------- 导航守卫 -------------------------------- */import router from './index';// 全局前置守卫router.beforeEach((to, from, next) => { if (sessionStorage.getItem("token")) { next() } else { if (to.path !==

介绍axios怎么配置全局同意封装

'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable:.

proxyTable里配置：module.exports = { dev: { ... proxyTable: { '/api': { target: 'http://192.168.99.250:9090', // 接口请求的基路径 changeOrigin: true, // 开启跨越 pathRewrite: { '^/api': '' //用 /api 代替上面targe的路径，我们调接口时路径直接用/.

在项目目录下执行安装命令：npm install less less-loader --save-dev如图：2. 配置：在build/webpack.base.conf.js文件里配置：{ test: /\.less$/, loader: "style-loader!css-loader!less-loader"}至此在style标签上就能用lang="less"了...

如同uniapp一样，使用事件跳转页面：给标签添加点击事件：跳转代码：先看看配置改页面的路径是：好，知道了：get的 传参结果如图：

computed：不做计算：<template> <view class="test"> {{ text }} </view></template><script> export default { name: 'test', data () { return { ...

一、二、创建个组件试试：配置：调用：

如下图，当data里的数据多层嵌套要改变深层某条数据却不生效时：this.$set(this.schoolBag[0].bagData[2],'value','666');解释：设置第一个schoolBag数组里 的第三个bagData里 的value为666...

打开模态框：在父组件：在子组件：关闭模态框：在子组件：在父组件:代码：父组件：<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li&...

1.在你的项目根目录安装此插件npm install nprogress --save 2.在min.js文件中全局引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'//下面两段代码按需复制 //1 ajax请求有progressVue.http.interceptors.push((...

效果如下：

首先在子组件中给出插槽<slot></slot>然后就可以在父组件中给插槽插入以元素了看看这两个元素是不是在ADD组件的插槽里放的呢果然是啊，图1可以看到我们给ADD组件一个class=“add”。插入的元素是在class为add里面。上面说的是单个插槽，下面说下具名插槽就是给插槽起个名字，子组件可以同时留有多个个插槽在子组件中给slot插槽起名：然后...

在router目录下的index.js路由配置文件里使用children嵌套路由，如下：嵌套路由配置好，就需要在嵌套的页面展示被嵌套的页面了router-view 为什么写这？因为刚在配置路由的时候是在child下配置的呀。效果如下：到此有个问题来了，点击进入child页面时（图2）是不是发现右侧时空白的？此时是不是需要默认进这个页面时右侧显示成图3那样呢？那么就需要重定向一...

找到项目router目录下的index.js，在此文件内进行配置路由，如下图：然后去跳转前的文件写： <router-link to="/child">去child</router-link>效果如下：点击前：点击后：-------------------------------------------------...

Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript 以及 Vue、React、Angular 和 Svelte 等框架。

vue的生命周期分为8个阶段beforeCreated：实例创建前created：实例创建后beforeMount：页面载入前mounted：页面载入后beforeUpdata：实例更新前updata：实例更新后beforeDestory：实例销毁前Destory：实例销毁后...