前言网页自适应布局常见的方法有三种。1.原生：使用@media媒体查询，rem相对单位。通过对不同的屏幕宽度进行CSS的调整来实现，不同设备下的网页自适应显示效果。适合对不同设备显示都需要进行详细且精确的自适应调整，缺点是工作量大。 例如：@media (min-width: 1200){ //>=1200的设备 }@media (max-width: 990px){ //<=990的

vue项目用到了proxyTable代理，有时候请求不到。F12看network的url是没问题的，这时候想查看一下真实的代理路径。直接上代码proxyTable:{"/arc": {target: targetUrl,changeOrigin: true,pathRewrite: {"^/arc": "/arc"},onProxyReq:function(proxyReq,.

如果你同时有vue2,vue3的项目。一定会遇到插件的问题。因为vue2项目插件是使用vetur的，vue3是使用volar的。以前vscode为了在不同项目中能使用不同的配置文件，是使用工作区的概念去解决的，但是比较复杂而且不好用。现在新版本的vscode（我现在下的是1.79 version的），新增了配置文件功能可以很方便的解决这个问题。

在做多语言的时候，因为用到vue-i18n，未翻译的部分，控制台会有warning提示，一看就是一大片，影响开发。解决：在创建VueI18n实例时，可以添加这行代码配置，关闭waring提示信息。silentTranslationWarn: trueconst i18n = new VueI18n({// set locale// options: en | zh | eslocale: getL

有时候页面与页面之间需要传参，一般会在路由跳转时携带参数。vue-router提供了两种模式第一种是使用 params第二种是使用 query// 使用params的路由router.push({ name: 'user', params: { userId: '123' }})// 使用query的路由带查询参数，变成 /user?userId='123'router.push({ name:

在页面之间跳转，需要携带参数。正常传参的话就vue-router的params，query两种，或者使用localStorage本地持久化存储。为了刷新不丢失数据， 我使用query进行传参，但是我传的是一个对象。发现刷新后，即使url里还有object的相关信息，但是数据还是丢失了。原因：第一次跳转，是没有问题的。刷新页面后，url里的object就会变成字符串，数据就丢失了。解决方法：使用JS

碰到一个需求，我这里使用el-autocomplete，因为列表的内容可能很长，导致显示不全，影响阅读。所以需要修改一下下拉列表的宽度为auto，使得其适应内容宽度，而不是继承父元素宽度。一开始使用深度作用选择器，发现作用样式不生效，查看dom结构发现是因为下拉列表的class是插入至body下的，而不是vue app 下。所以无法作用到。解决方法：将popper-append-to-body设为

因为项目用了vue-i18n，为了方便快速翻译，所以装了Comment Translate插件之前一直都可以使用，现在突然就不行了。试了卸载重装插件后也不行，最后在该插件的扩展设置里，将Google换成Baidu才解决，不确定是不是墙的原因。...

在写页面时，用了el-row和el-col进行布局。对接接口，v-for渲染数据 到对应位置时，发现了这个问题。第一次遇到，作个记录。htmlamtn_total_debit 应该是空的， amtn_total_credit为260.50，是有数据的，应该出现在右边。但由于第一个没有数据，el-col会直接不占据空间，把右边的el-col挤到了左边解决办法给el-col加一个透明边框，这样即使没有

今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了查了一下，是因为有element-ui源码有bug，主要原因是参考该博客autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在q