个人博客

有时候我们可能需要在vuex中存储一些静态数据，比如一些下拉选项的字典数据。这种数据基本很少会变化，所以我们可能希望将其存储起来，这样就减少了请求的数量。但是在每个位置都进行存储，好像是在做重复的逻辑，所以我们可以考虑将这个功能提取出来，作为一个插件使用。

当我们eslint报错我们修改之后，重新启动项目eslint依然报错。如果你确认修改了，这时候可能就是eslint缓存导致。删除最新的一份缓存文件即可。

我们在node_modules/http-proxy-middleware/dist/http-proxy-middleware.js中的prepareProxyRequest方法中的。但是我在配置之后并没有任何日志打印在控制台。按道理源码中this.logger.debug方法应该要打印，但是它没有生效。修改源码这种方式很不推荐，因为只能在自己本地使用，而且一旦更新包就需要重新修改，还是安心等待官方进行处理吧。但是通过阅读源码发现，外面可以手动在源码中加入调试语句，不过并不推荐，仅作本地临时调试使用。..

下载插件：这里使用的是codemirror5，现在codemirror最新已经是6了，不过参考文档相对较少，使用起来不是那么方便。后续文档丰富之后可以考虑使用6这里使用到的配置如下三、CodeMirror具体使用1.首先创建一个textarea标签2.然后引入相关依赖3.最后初始化编辑器四、CodeMirror语法校验1.引入语法校验依赖codemirror支持的校验库如下3.安装lint需要的其他依赖仅仅是这样还是不够的，因为codemirror对应的校验插件中可能还依赖其他

vue-router偶现返回失效问题描述解决方式问题描述vue-router 动态addRoute 后 router.back和router.go(-1) 失效，点击返回之后仅仅是路由改变，页面不刷新解决方式在调用 $addRoutes 动态添加方法时，调用一下 router.history.setupListeners()for (let i = 0; i < arr.length; i++) { router.addRoute(arr[i]); // arr 登录后传进的有权

使用marked解析markdown文件并实现图片点击放大效果

vue-cli4配置生产环境去除console一、问题描述二、babel-plugin-transform-remove-console1.具体配置一、问题描述本地开发环境一般会打印很多console进行调试，而且一部分console可能暂时不想删除。但是直接发到生产环境就会比较难看，而且容易暴露相关信息。这个时候就需要配置生产环境去除console了。二、babel-plugin-transform-remove-console推荐使用babel的插件babel-plugin-transform-

vue与nginx配置websocket反代vue配置websocket反代创建连接config配置nginx配置websocket反代vue配置websocket反代创建连接this.url = `ws://${location.host}/UMS-CLUSTER-WS/websocket/test` // 使用location.host的目的是在当前项目运行的域名和端口号下发起ws连接，例如本地为localhost:80new WebSocket(this.url) // 创建连接confi

解决dart-sass转义伪元素中的字符集（elementUI字体图标乱码的问题）一、问题描述二、解决办法1.修改dart-sass配置2.直接使用css一、问题描述当我在scss中使用伪元素修改elementUIselect选择框的下拉图标样式时遇到一个问题：我写的伪类content本地打包之后字符集被转义为明文，但是element原生的样式却没问题虽然直接发布依然可以显示，但是会偶发的出现乱码。二、解决办法在网上查找说是dart-sass在打包过程中会将伪元素content中的内容转义。

eventBus实现跨组件传值一、触发事件与监听事件二、定义eventBus三、具体演示一、触发事件与监听事件在vue中可以使用vm.$emit触发自定义事件我们经常在子组件中使用this.$emit()触发一个自定义事件，然后在标签中绑定事件，调用父组件的方法。例如：子组件 ChildItem：<template> <div style="width: 100px;height: 100px;background-color:red;" @click="this.emitT

移动端布局长度单位转换一、场景描述二、实现方式1.安装2.配置3.其他配置三、多规则配置一、场景描述一般我们做移动端网页开发时，设计稿一般都是固定的宽高的（比如750*1334）。但是实际上手机的屏幕大小千奇百怪，各种各样都有。这就要求我们开发人员很好的去处理兼容性问题。一般做长度兼容有两种方式，一种是使用rem，一种是使用vw、vh。这里就说一下将px转换为vw、vh。二、实现方式众所周知，vw本质上还是一种百分比单位，100vw即等于100%，即window.innerWidth。实现这个转换

记一次vue-cli2 build报错一、错误描述二、解决方式一、错误描述build之后出现如下错误二、解决方式首先注释掉/bulid/webpack.prod.conf.js中的new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }

vue-cli 3.0生产环境中去除console一、问题描述二、具体插件1.babel-plugin-transform-remove-console（1）安装（2）配置2.terser-webpack-plugin（1）安装（2）配置一、问题描述当我们在开发环境是，可能会打很多console来调试，但是发布到生产环境后，这些console就会很不美观而且影响性能还容易暴露部分信息。但是要一个一个删除太过麻烦，并且可能后续开发还要使用。这里就推荐一些插件来解决这些问题二、具体插件1.babel-p

qs的应用一、qs概述1.qs的下载2.qs的引入二、具体使用1.qs.stringify()（1）对象情况（2）数组情况（3）建议2.qs.parse()（1）对象形式（2）数组形式三、优点1.参数转换2.url转码一、qs概述qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。主要用于将url后面的值转换为对象，或者将对象拼接未url后面的值1.qs的下载qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.2.qs的引入如果是在vue框架下，直接按照常

vue获取图片流数据并展示一、问题描述二、数据获取三、数据展示1.window.URL.createObjectURL()（1）[URL](https://developer.mozilla.org/zh-CN/docs/Web/API/URL)（2）[createObjectURL](https://developer.mozilla.org/zh-CN/docs/Web/API/URL)2.封装blob数据3.将url的值赋给img标签的src属性四、最终结果一、问题描述该场景适用于所有后端传递图片

Vue this.$router.resolve新开窗口使用情况代码实现使用情况当我们需要点击某个位置进行路由跳转时，在浏览器新打开一个窗口，可以有效避免返回之前的页面路由刷新问题点击时新开窗口打开这样我返回之前的页面时，还是保持在我点击时的页码代码实现使用vue的this.$router.resolve封装路由数据，配合window.open打开页面。let routeData = this.$router.resolve({ // path:'/PatientInfo_

history路由模式线上适配一、问题描述及原因1、问题描述2、问题原因二、解决方法1.项目部署在根目录时2.项目部署在自定义目录一、问题描述及原因1、问题描述当我们将项目成功部署线上之后，按照路径正常访问项目时正常，在项目中使用目录跳转也正常，但是一旦刷新网页就会nginx404。并且直接使用二级路由的路径访问项目也是4042、问题原因首先官网对此有所解答，官网地址：vue-router Html5 History模式大致来说就是vue-router模式使用hash模式：使用 URL 的 ha

vue使用Ajax库axios获取接口数据axios安装与引用获取接口数据axios有很多时候你在构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种，而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。安装与引用npm install --save --save-exact axios vue-axios：安装axios在main.js中引入和运用获取接口数据用axios获取接口数据getNews () {const url = ‘ht

vue命令行vue命令初始化一个vue web工程Webpack工程目录vue命令vue -V :查看vue版本号vue help（vue -h） ：获取命令行帮助（展示可用命令行与解释）vue init ：初始化vue工程vue list ：查看vue提供的官方模板模板官网https://github.com/vuejs-templates初始化一个vue web工程vue init webpack myweb：webpack：模板名 myweb：目录名（文件名）cd myweb