博哥的二进制世界

vue数据更新了但是页面不更新的解决方案背景解决方案背景有时候我们会碰到vue的data数据更新了，但是页面上却不更新的情况，这有可能是页面上依赖的data数据层级太深导致。如下示例：el-option依赖于memberNameOptions[index].arr，即memberNameOptions属于一个数组，而memberNameOptions[index]属于一个对象，对象中的arr属性又是一个数组，数组中的元素又属于对象，这样多层复杂类型的数据，可能会导致vue数据更新，但页面不更新的情况

vue-cli 如何让Eslint 报错在浏览器控制台输出背景解决办法背景现在新版本的vue-cli创建的项目，eslint的报错已经不在浏览器控制台输出了，而是默认在终端输出然而我们通常习惯在浏览器控制台中做项目的调试，而不会经常看终端的报错，导致往往忽略了eslint的报错。那么应该如何让Eslint 报错在浏览器控制台输出呢？解决办法在根目录新建 vue.config.js 文件, 加入下列配置module.exports = { devServer: { hot: true

vue-cli创建vue3+ts项目安装vue-cli脚手架通过vue-cli创建vue3+ts项目安装vue-cli脚手架// 安装npm i vue-cli -S// 查看vue版本vue --version通过vue-cli创建vue3+ts项目vue create myApp选择Manuallu select features选择以下配置，其中choose Vue version选择3.0vue3+ts项目创建成功...

watch侦听器中，我们要将新的值赋给this.a出错watch: { value: (newV, oldV) => { this.a = newV; }}这里报错undefined，这里错误的原因是不能写成箭头函数。写成箭头函数后，this会取上下文，而不是组件里面的this了，正确写法为：watch: { value: function(newV, oldV) { this.a = newV; }}如下图:...

@[TOC](Vue.use() 的使用和基本原理)介绍与使用Vue.use() （vue2.x是Vue.use,vue3.x是app.use）在 vue 中使用很多，比如 ElementUI, vantUI, VueI18n, Router, Vuex 等部分第三方库、组件、自定义方法等，在引用后会使用 Vue.use 将他们传入作为参数使用如下：vue2.x使用Vue.use()import Vue from 'vue';import App from './App';import r

vue项目的国际化实现方案安装依赖vue-i18n配置main.js配置语言包创建locales文件夹，文件夹中创建zh.js和en.js组件中使用App.vue监听语言环境并切换国际化安装依赖vue-i18nnpm i vue-i18n -S配置main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.c

曾经一直用淘宝的lib-flexible作为解决移动端自适应的方案，但是近期一看lib-flexible官网，出现了这样的一段话好吧，那么寻找了下面通过vw来解决移动端的自适应问题的办法，先收藏着https://www.w3cplus.com/mobile/vw-layout-in-vue.htmlhttps://www.w3cplus.com/css/vw-for-layout.htmlhttps://segmentfault.com/a/1190000014185590https://www

vue-cli配置环境变量项目根目录创建.env文件修改package.json命令行，加上--mode xxx项目中获取环境变量项目根目录创建.env文件①.env.devNODE_ENV=development②.env.uatNODE_ENV=uat③.env.sitNODE_ENV=sit④.env.prodNODE_ENV=production修改package.json命令行，加上–mode xxxpackage.json命令行，-- mode xxx与.env

vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）上一章我们讲过vue2.x利用Vue.prototype注册全局组件/方法，然而vue3.x是无法通过Vue.prototype来注册全局组件/方法的，因此需要另辟蹊径。vue3.x注册全局组件/方法主要有以下两个方式：provide / inject （推荐）main.js中：通过provide将组件或者方法、变量挂载在全局import { createApp } from 'vue';import App

遇到这个问下，先检查看看是不是看着vant的2.x版本进行开发。vant2.x版本代码如下：<van-popup v-model="show" closeable position="bottom" :style="{ height: '30%' }"/>vant3.x版本代码如下：<van-popup v-model:show="show" round position="bottom" :style="{ height: '30%' }"

@[TOC](vue3配置路由报错Catch all routes ("*") must now be defined using a param with a custom regexp.)背景vue3项目在配置路由时指定未识别的路径自动跳转404页面时，报错Catch all routes ("*") must now be defined using a param with a custom regexp.意思是捕获所有路由（“”）现在必须使用带有自定义正则表达式的参数来定义解决方案改

vue中使用vue-clipboard2实现文字复制到剪贴板背景安装vue-clipboard2main.js中引入组件中使用vue-clipboard2背景在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示6916 4008 ** **** **1782），而要实现复制真实银行卡号到剪贴板，去支付宝，微信进行绑卡操作的功能，这就可以利用

vue如何通过VNode渲染节点

vue+ts或者react+ts如何使用animate.css前言使用animate.css（以vue+ts为例，react可参照类似方法）前言animate.css是一个第三方的纯css库，其中内置了众多我们常用的动画特效，详细特效及文档可以浏览animate.style以及animate.css动画演示使用animate.css（以vue+ts为例，react可参照类似方法）安装npm i animate.css -Smain.ts中引入import { createApp }

vue3通过ref获取dom元素并修改样式vue3获取dom元素和vue2类似，都是通过ref来获取，请看以下示例：①元素中通过ref获取元素boxOneRef②state中创建boxOneRef属性③重新创建变量boxOneProxy，并赋值为state.boxOneRef,使之成为state.boxOneRef的代理对象（因为state.boxOneRef属于proxy对象，必须通过代理对象来修改其内部属性）<template> <div class="page rela

vue2.x利用prototype注册全局方法/变量/组件有些时候我们需要在vue项目的任意位置都能调用公共方法/变量，那么vue如何注册全局的方法/变量/组件呢？请看以下示例：创建common.js（编写插件），插件内利用Vue.prototype全局挂载方法import { Toast } from 'vant';import echarts from 'echarts';const install = (Vue) => { // toast提示,通过this.Toast调用

关于vue项目本地localhost可以正常访问项目，ip却无法访问项目的解决办法在进行本地页面调试的时候，地址栏可以输入两种地址来访问页面http://localhost:8080http://192.168.97.15:8080但是此时碰到了一个问题，即http://localhost:8080可以访问页面，但是 http://192.168.97.15:8080却无法访问页面首先以为是防火墙的问题，当关闭了防火墙，问题并未解决之后，修改vue项目中config目录中index.js，将

背景通过配置webpack，实现px自动转成vw，实现移动端的自适应做法执行以下命令安装依赖：千万注意千万注意千万注意要指定版本，否则会报错，提示依赖需要postcss8以上版本的支持npm i cssnano@3.10.0 postcss-aspect-ratio-mini@0.0.2 postcss-cssnext@3.1.0 postcss-px-to-viewport@0.0.3 postcss-viewport-units@0.1.3 postcss-write-svg@3.0.1 -S

vue-cli3读取本地json文件背景前端如何读取本地json文件前端存放json文件的位置请求JSON数据封装axios实例封装请求方法页面组件调用请求方法背景一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。由于公司业务，需要在进入页面的时候，一次获取15万条数据用于输入框的模糊搜索，但是这样前端一次性获取如此大量的数据，直接就导致了页面崩溃，加载奇慢。这么大量且不需要时常做变更的数

el-dialog弹出框被遮罩层覆盖的解决办法问题场景解决办法原理问题场景如下图所示,文案列表的dialog弹窗被遮罩层覆盖，但是遮罩层的z-index层级明显是比弹窗低的解决办法在el-dialog标签里添加:modal-append-to-body='false'<el-dialog title="文案列表" :visible.sync="isShowLabelBoundArticlesList" :modal-append-to-body='false'> &l

el-select如何自定义下拉选项框的宽度背景解决办法背景默认情况下，el-select的下拉选项框的宽度会依据选项内容的长度而改变，当选项内容的长度过长的时候，下拉选项框的宽度也会变得很长，甚至可能会超出屏幕宽度，如下图所示：解决办法为了解决这一问题，我们可以通过给el-select添加focus事件的监听，当focus之后，动态改变el-option的宽度<template> <div> <el-select v-model="textCaseType"

关于el-table单元格合并的解决方案el-table单元格合并示例实现el-table单元格合并的方法el-table单元格合并示例先看以下代码：<template> <div> <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"> &

el-dialog嵌套问题，第二个弹窗会被遮住的解决办法

如图所示，数据中多了一条横线解决办法是.el-table::before { z-index: inherit;}

ElementUI el-table 设置固定列，横向滚动条在固定列的位置上无法滚动的问题

el-table横向滚动条不显示问题

el-tree在el-form中通过rules进行校验背景正确配置el-tree的rules校验背景如下图，在el-form中想实现el-tree的校验，elementUI并没有提供相关的示例。如果是按照通常的方法配置rules,无论是否选择el-tree的选项，都会报错，提示请选择功能权限配置，这说明如果按照这种方法来配置el-tree的rules，是错误的addRoleFormRules: { permissionIdList: [ { type: 'array', required

el-upload 点击一次,出来两个选择文件框的解决方案

el-input 使用 回车键会刷新页面的问题