meimeib的博客

当我们需要使用不同的服务器时，就需要手动修改vue.config.js中配置并重新启动项目。当项目越来越大时，会需要较长的时间来等待项目启动，如此反复，极大影响我们开发进度。

项目npm run serve时报错：如果你遇到了这个问题，那你一定是使用了 OpenSSL v3 的 Node.js 版本。（node版本过高）

git clone报错RPC failed； curl 18 transfer closed with outstanding read data remaining

element抽屉嵌套级联选择器，下拉框不显示

数组扁平转树形结构数据

实现效果代码<el-table :data="tableData" border> <el-table-column label="数据" align="right" width="150"> <el-table-column prop="name" label="数据指标" width="150"> </el-table-column> </el-table-column> <el-table-c

使用npm包“xlsx”进行vue框架下表格的生成和导出使用第三方包https://www.npmjs.com/package/xlsx支持导出格式● xlsx● xlsb● xlsm● xls● xml● csv● txt● ods● fods● uos● sylk● dif● dbf● prn● qpw● 123● wb*● wq*● html● htm安装npm install xlsx使用demo<template> &l.

element 树状表格，表格全选时所有项（包括所有子节点）都选中，选中树状表格父节点时，这个父节点下所有子节点也都要选中，如果某个父节点下的所有子节点没有全部，则这个父节点处于半选状态

场景vue项目中，页面请求接口响应速度非常慢，F12打开谷歌控制台，查看network，发现响应时间为1.14秒排查问题接口响应速度慢，后端打断点进入接口到返回这段时间有很快，要判断是什么问题，首先要确定是前端问题还是后端问题，可通过nginx日志查看接口响应时间1. nginx查看日志打开终端，登录服务器并输入服务器密码//ssh 用户名@服务器ipssh root@192.168.0.132切换到nginx目录cd /var/log/nginx/查看nginx日志

报错vue项目npm i下载包时报以下错误解读上述报错日志中有个关键字眼：this command with --force, or --legacy-peer-depsFix the upstream dependency conflict, or retrythis command with --force, or --legacy-peer-depsto accept an incorrect (and potentially broken) dependency resolutio

问题el-form表单只有一个输入框，输入内容回车导致页面刷新，路由多了一个问号<el-form> <el-form-item > <el-input @keyup.enter.native="search" /> </el-form-item></el-form>export default { methods:{ search(obj){} }}输入框输入内容回车之后

前端 JS 项目开发规范规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。引自《阿里规约》的开头片段：----现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字

实现效果window点击ctrl（MAC点击command）+通过import引入的文件，方法等等，跳转启定义的页面方案在项目根目录新建文件 jsconfig.json并添加一下代码{ "allowJs": true, "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src/**/*"], "exclud

beforeRouteEnter(to, from, next) { next(vm => { vm.$nextTick(_ => { vm.$refs.service.beforeRouteIn(to, from, next) }) }) },

封装在methods.js中class cookie { static get(k) { return ((new RegExp(["(?:; )?", k, "=([^;]*);?"].join(""))).test(document.cookie) && RegExp["$1"]) || ""; } static set(k, v, e, d) { document.cookie = [k, "=", v, e && e["toGMT

sonar是什么sonar是一个代码质量管理的开源平台，用于管理源代码的质量，通过插件形式，可以支持包括java、C#、JavaScript等二十余种编程语言的代码质量管理与检测。sonar是从七个维度检测代码质量:1) 不遵循代码标准sonar可以通过PMD，CheckStyle，Findbugs等代码规则检测工具规范代码编写 2) 潜在的缺陷sonar可以通过PMD，CheckStyle，Findbugs等代码规则检测工具检测出潜在的缺陷 3) 糟糕的复杂度分布文件、类、方法等，如果复杂度过高

运行命令中加入sonar-scanner \ -Dsonar.projectKey=datamapping \ -Dsonar.sources=src \ //把sources的值改为要扫描的文件夹名 -Dsonar.host.url=http://localhost:9000 \ -Dsonar.login=174cda9b53a749a07d67bbd81462c533b620ab35sonar平台设置...

一、全局配置方案适应px->rem->px方案安装postcss-px2rem及px2rem-loadernpm install postcss-px2rem px2rem-loader --save新建配置文件rem.jsconst baseSize = 16function setRem () { // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientW

IE11报错详情解析通过查找问题，发现问题发生在crypto-js这个包中因为只有在ie中才报这个错误，导致页面加载不出来，才想是这个包中有语法是ie不兼容的解决让这个包进行babel转译chainWebpack(config) { // 为了兼容IE，crypto-js和部分node_modules下的js要经过babel的转译 config.module .rule('js') .exclude.clear().end() .include

场景页面上使用iframe,embed,video插入音频，pdf等控制台报错Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.X-Frame-Options简介The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 , 或者中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，

element el-table多列多字段同时排序后端返回数据（支持多个字段同时进行排序）场景描述element el-table仅才支持单列（一个字段）进行排序，想要支持多列排序，首先要定义一个数组，用于存放所有排序的字段及其顺序，设置列sortable=“custom”，结合sort-change事件，在点击排序箭头时进行排序操作<template> <el-table :data="tableData" style="width: 100%"

关闭eslint//vue.config.jsmodule.exports = { lintOnSave: false//eslint-loader 是否在保存的时候检查}创建项目的时候选择了Linter / Formatter，写代码的时候会有代码规范检查，怎么才能关闭eslint校验//项目创建好后会生成 .eslintrc.js文件,注释@vue/standardmodule.exports = { root: true, env: { node: true

flex:1解析问题原因：//在谷歌中flex:1;会解析为flex-grow:1;flex-shrink:1;flex-basis:0%;//在IE中被解析为flex-grow:1;flex-shrink:1;flex-basis:0px;解决：将flex:1; 更改为flex: 1 1 auto;父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器原因：IE中flex-shrink 的默认值

下载npm i nprogress引入import NProgress from 'nprogress'import 'nprogress/nprogress.css'使用router.beforeEach((to, from, next) => { NProgress.inc() next()})router.afterEach((to) => { NProgress.done() setPageTitle(to.meta.title)})...

解决路由版本问题（使用侧边栏router模式产生的问题）el-menu使用route模式//解决路由版本问题（使用侧边栏router模式产生的问题）//element-ui.common.js?6514:3349 Error: Navigation cancelled from "/welcome" to "/roles" with a new navigation.const originalPush = VueRouter.prototype.pushVueRouter.prototype.p

自动填充跟手动填充进入页面后，账号密码可能会自动填充手动填充是要密码输入框获取焦点时，就会出现保存的账号的下拉框，可以选择其中一个，这是浏览器的功能解决自动填充问题方案一：<input type="password" name="password" readonly onfocus="this.removeAttribute('readonly')" value="" autocomplete="off" />方案二：<input type="password" nam

ssh链接远程服务器并上传文件到远程服务器一、与远程服务器链接1. 远程登录主机ssh [用户名]@[ip地址]例如我的用户名是root，IP地址是192.168.9.25ssh root@192.168.9.25然后输入密码即可进行链接，成功后出现以下提示2. 切换到指定目录下cd [目录地址]切换到文件要存放的文件后方可进行上传3. 查看当前文件中的所有文件ls3. 查看当前文件的路径地址pwd二、上传文件到远程服务器1. 上传本地文件到远程服务器注意：这个

实现效果使用flex进行左右布局，左边定宽200排序，右边自适应，当右边内容过多，造成右边盒子被撑开，会造成两种问题左边定宽盒子被压缩解决办法：flex-grow:0;//是否自动增长空间flex-shrink:0;//是否自动缩小空间右边自适应的盒子被撑开解决办法：flex:1;width:0;将右边自适应的盒子的宽度设置为 0 ，然后使用 flex：1 样式，将宽度交给 flex 布局来决定，最终子元素不会被内容撑开，达到想要的效果。...

需求vue中css样式中使用data里面的数据,动态设置元素高度用法<template> <div class="box" :style="{ '--heightLine': heightLine + 'px' }"></div></template><script>export default { data() { return { height:42 }; }};</script>

场景如上图所示，左边展示分组及分组下的标签，点击某个标签，在右边展示某个标签的详情，可以对标签内容进行编辑保存，还可对标签进行搜索，默认展示全部标签，展开一级不目下标签，若对标签进行搜索筛选，则把每个节点都展开实现准备准备两棵树，一颗树存放全量标签，一棵树存放筛选后的标签在获取懒加载数据时缓存第一个节点，在编辑标签保存后刷新列表时使用每次编辑标签时，先把编辑的标签进行本地存储，在刷新树状列表完成后根据id进行高亮回显及标签展示实现步骤//这棵树是搜索标签时展示的树<div v-if=

场景登录成功之后，如果产品没有授权，要跳转到授权页面，但是在ie中跳转不过去，原因是因为授权页面用到了公司的业务组件库，打包时里面使用到箭头函数没有进行转译解决办法在vue.config.js里面加入转译 // 为了兼容IE，部分node_modules下的js要经过babel的转译 config.module .rule('js') .exclude.clear().end() .include .add(resolve('src')) .add(reso

情况使用vue的el-menu组件，在chome中无报错，在IE11中报有两个错误[vue-router] uncaught error duringError in v-on handler: “TypeError: 对象不支持此操作”分析考虑到element-ui版本更新或者重新通过npm install安装包时，写入node_modules\element-ui\lib\element-ui.common.js里面的patch会失效。解决办法在 /public/js/下创建pol

本地联调接口响应时间过长引起的超时问题原因webpack proxy默认连接时间是2000s解决办法设置proxy的超时时间module.exports = { lintOnSave: false, devServer: { port: 8080, // 默认端口号 host: '0.0.0.0', // 任意地址可访问本机 open: true, // 配置自动启动浏览器 proxy: { '/': { target: 'htt

在v-html指令时如何使用过滤器// html <div class="word" v-html="$options.filters.filters2(item.news_content)"></div>// scriptfilters: { filters2: function (arg) { arg.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, ca

v-html引起xss攻击场景<div v-html="html"></html>data(){ return { html:'alert('1')' }}解决办法1. 下载 xss 依赖npm install xss --save2. main.js中引入xss包并挂载到vue原型上import xss from "xss";Vue.prototype.xss = xss;3. 在vue.config.js中覆写html指令chainWebpac

需求伪元素高度使用data中的变量，对其进行动态修改实现css/less中使用变量的方式声明css变量的时候，变量名前面要加两根连词线（–）。变量名大小写敏感，–header-color和–Header-Color是两个不同变量。var()函数用于读取变量。var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。第二个参数不处理内部的逗号或空格，都视作参数的一部分根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置

需求实现树状图，同级值展示一行分组的子集，实现效果如下；实现<div class="flex" style="flex:1"> <div class="flex flexv col" v-for="type in 4" :key="type"> <div class="line" v-for="(item, index) in treeData[type - 1]" :key="index" :cla

怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope=“scope”，使用scope.row拿到当前行的数据<el-table max-height="290" :data="userTableData" border style="width: 100%"> <el-table-column label="名字"> <template slot-scope="scope"> {{scope.row.na

本文讲述Vue element 关于表单校验中自定义表单校验，怎么校验表格中的表单，怎么校验表单数组循环，对象中的数据1. 自定义验证表单中某个值//html<el-form :model="dataInfo" :rules="rules" ref="form" class="demo-form" > <el-form-item label="名称" prop="name"> <el-input size="small" v-model="dataInfo.

Vue 父子组件传值中inheritAttrs +$attrs + $listeners用法我们在vue组件中常用的传值方式有通过 props 的方式向子组件传递(父子组件)vuex 进行状态管理(父子组件和非父子组件)非父子组件的通信传递 Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。下面介绍第四种方式inheritAttrs默认情况下父作用域的不被子组件用 props接收的属性都会被放到attrs这个对象中，子孙组件可通过‘attrs这个