今天就遇到一个问题，后端从头信息给我携带了数据，我需要在请求头中获取，但是不管怎么get，返回的永远是null，但是f12去看响应头，那个数据就在那，亮瞎了眼。一个大大的问号？why？？？谷歌查了下原因，大概就两种：安全限制，不允许客户端获取部分头信息跨域了，对于跨域请求，客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ，在“Access-Control-Allow-Headers”中加了无效说到底，还是后端的设置，如果是nigix可以参考下面的代码：以token头信...
简单使用移动端开发最蛋疼的是什么？当然是调试了，在真机测试阶段，console输出看不了，只能alert，alert又不是能查看对象这种复杂的东西，请求信息也没法看，总之就是有点难受。为什么手机就不能像电脑那样f12出来个控制台呢？于是乎，vConsole 出现了，他是一款移动端的前端开发者调试面板，可以查看console、网络请求、页面元素、cookie、localStorage、SessionStorage、手打js代码并运行，基本就是一个小控制台了，满足了日常开发调试所需。这个插件是由腾讯开发的，应该是为了微信小程序顺便开发的，github地址在此：vConsole使用方法也很简单...
el-checkbox本身是没有click事件的，但是我们可以通过native的方式穿透下去，但是这样的话会有一个问题，我们先看下代码：<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出，你会发现，click实际上运行了两次，native本身是将事件绑定给了组件的根元素，这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果，因为stop只能防止根元素往上冒泡，并不能阻止他本身...
element ui的图片预览组件并没有单独提供出来，默认是在image组件里面一起使用，但是有的时候，我们需要点击某一个自定义按钮，然后弹出图片预览，但是，又不需要使用el-image组件，于是乎，有了这篇笔记。首先思路并不是我的，我也是看了下同事，他网上找的教程，然后我看了下，在掘金找到一篇文章：《Vue中使用element-ui的内置组件实现图片预览全局调用功能》；深受启发，于是也记下自己的笔记。首先思路是两个：element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来，new出来的这个构造器，他的属性为组件的属性以及其他（其他就...
由于最近moment.js已经停止维护了，加上他本身确实有点大，只能找找其他的时间库了。yarn add dayjs --dev安装后我们引入：import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; dayjs.extend(duration); import "dayjs/locale/zh-cn"; dayjs.locale("zh-cn");使用：dayjs的计算，是需要用毫秒的，所以如何是s的时间戳，自己记得乘以...
由于moment属于纯js，他不需要window对象，所以我们有两种方式在nuxt中调用它。传统引入第一种：plugins在plugins目录下创建一个moment.js文件，内容如下：import Vue from "vue"; import moment from "moment"; import 'moment/locale/zh-cn'; moment.locale("zh-cn"); //汉化 Vue.prototype.$moment = moment;我们将它挂载到vue上，然后再打开nuxt...
具体的反代我其实在之前《nuxt 入坑的那些事》就说过了，这里就不多说，主要是讲下我们自己axios怎么处理反代。在nuxt中我们其实可以自己封装一个axios模块来使用，也就是常见的后台管理项目中对aixos模块化的用法。常常就是import引入axios，然后使用拦截器进行加工处理，然后在导出，使用的时候import这个axios。import axios from "axios"; let api = axios.create({ baseURL: xxxxxx, timeout: 15000, }); //请求前 api.interceptors.r...
最近遇到一个需求，要求在新建打开的vue项目网页中，还要定位到某个位置，这么一想就只有hash哈希值定位了。如果要用js定位，一般是使用： window.location.hash = "#xxx";但是这方法有个弊端，就是只有首次运行这段代码时才有效，第二次再使用，就毫无效果了。所以，如果你想更稳定一点，可以使用url方法 window.location.url = "#xxx";虽说url是改变浏览器地址，会触发刷新，但是如果值是哈希值，那么并不会触发页面刷新，并且哈希定位也是可以重复触发的。更新： 2021-2-12经过实际测试发现，url方...
在axios速读中，我们了解到axios请求的取消方法。const CancelToken = axios.CancelToken; //请求前拦截器 axios.interceptors.request.use(function(config) { //添加取消token const source = CancelToken.source(); config.cancelToken = source.token; //取消请求 source.cancel("取消请求"); return config; }, fu...
最近把公司的官网改成nuxt了，因为要通过api获取页面信息，这样每次等待api返回的时间可以通过服务器渲染给去掉，会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话，按照官方得指示，我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了，都不用配置，这点我要说一句，真香。一定要装node-sass，不热css的热更新失效。全局scss变量既然用了scss，那么全局变量文件不可少，官方推荐是全局文件里面只存放scss的变量和@...
后端返回一个活动到期时间戳(s)，前端需要根据这个时间做个倒计时，倒计时的精度为：xx天xx小时xx分钟xx秒一个常见的活动倒计时。注意：秒要转为ms毫秒，moment计算是以毫秒为单位的。那么moment.js怎么计算出这些值呢？纯文本显示倒计时这个就要看你的样式了，如果你的要求只是显示纯文字：xx天xx小时xx分钟xx秒那么可以直接使用format方法。<script> import moment from "moment"; moment.locale("zh-cn"); //汉化 export default { data(...
Animate.css自从更新到了4.0版本，百度以前的那些使用教程都不能用了，原因是使用方法变了，class也变了。这里说下最新版怎么使用！安装yarn add animate.css安装完毕后我们需要在main.js文件里面引用并激活。main.js//动画样式 import animated from 'animate.css' Vue.use(animated);注意和以前不一样，新的需要use一下。使用<transition enter-active-class="animate__fadeIn" leave-active-clas...
了解一下首先我们要明白微信自定义分享是做什么的？当我们用微信打开一个网址，觉得不错，想要分享给朋友或者发送朋友圈，一般都是选择分享，分享的内容微信会显示为一个卡片，里面有页面的标题，简介，logo图片。大概是这样的一个效果：但是现在微信做了调整，他禁止了没有公众号认证的网页链接显示这些内容，这就造成一些企业的官网啊，产品链接变成了丑不拉几的样子，（微信变相收费）而且，如果你想要实现上面那个带简介带logo的卡片样式，你就需要对接微信的分享接口。注意：这个分享效果只有在微信端才有效！那么，知道为什么要这样做了，我们就开始实际的教程吧！教程[hide]微信提供了前端对接的一个js文件，被称为...
说明本教程根据YouTube的大神Vue Mastery的教程《Scaling Vue with Nuxt.js》；有兴趣可以油管搜索一下，b站有人搬运，并且带上了机翻，还可以b站搬运建议配合食用，毕竟，这个是我个人的笔记。简介nuxt是一个vue的一个类似cli框架的东西，用于处理vue无法做到的后端渲染，简单点来说就是vue的写法，服务端进行渲染成静态网页。目前有三个这种后端渲染框架：next、nuxt、nest；分别对应目前前端三种框架：React、Vue、Angular，作为国内的话，可能国内nuxt是用的比较多的，虽然这是一个由国外开发者发布的一个工具。静态的页面优势就是在于s...
vue作为单页app，基本上所有的页面跳转全是在当前页完成的，但是，也不能排除新建页面打开的需求。我们平时路由跳转都是直接push，replace这些this.$router.push({name:"xxx"})；那么新建页面跳转怎么写呢？router-link跳转 <router-link :to="{name:'xxx'}" target="_blank">新建页面</router-link>给router-link添加target="_blank"即可。js跳...
在引入vant的时候，我看到官方推荐了两个自动转换px为rem的插件，一个叫postcss-pxtorem，一个叫lib-flexible。他们的用法如下：安装插件：安装postcss-pxtorem npm install postcss-pxtorem --save-dev安装lib-flexible由于时间的问题，lib-flexible其实已经弃用了，现在是使用名为amfe-flexible的插件，amfe-flexible实际上就是在lib-flexible的基础上更新的，所以用法都是一样。npm i -s amfe-flexible安装完毕只需要引入amfe-flexib...
即便我们将npm或者yarn的源改为国内的淘宝源，但是还是会卡在这个noed-sass这里一动不动。搞了半天终于找到一个方法，一劳永逸。npm config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" yarn config set sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"自己根据自己的包管理器使用对应的命令就行了，然后你会发现，安装不会卡主了。
同事写的，我也是借花献佛，顺带做个笔记axios拦截器添加取消请求的方法因为我们需要在路由进入前判断有没有存在取消请求的方法，所以需要一个存储介质，选用数组，然后存放在vuex中，一是方便动态追踪，二是本来就在axios和router里面import了vuex，就没必要添加window的全局变量了。import axios from "axios"; import store from "./store"; //vuex //拦截器 api.interceptors.request.use(config => { //设置取消请求的...
经常漏删console真的很头疼，又不得不重新打包，所以希望有一款能在打包时自动删除console的插件。于是乎，就有了这篇文章。安装yarn add babel-plugin-transform-remove-console --dev安装完毕我们开始使用使用打开_babel.config.js_文件，输入以下代码，没有这个文件就手动创建。let plugins = []; if (process.env.NODE_ENV === 'production') { //正式环境自动删除console plugins.push('transform-r...
前端在api请求的时候，有时候可能会遇到发送多个请求的时候，但是实际有效的是最后一次，但是后端响应的值不一定是你最后一次发送的请求，有可能最后一次比之前的还要更快响应，这就导致用户切换到a数据，前端显示是b数据。解决这个情况有很多种方式，比如改动api请求方式，或者请求如果重复同一个接口，取消前面的请求，发起新的请求。这里我们是后者。使用方式官方提供了两个例子，第一个例子照着写怎么都没用，第二个没看懂他的参数到底是data的还是谁的，最终还是百度了好多文章，才渐渐明白。首先，我的项目使用的axios是二次封装的，也就是通过axios.create()方法预设了baseURL和拦截器的，最...
Element UI和iView 两个框架，他们表单验证使用的是async-validator，所他们的重置表单的方法是一样的。this.$refs[name].resetFields();使用该方法，会重置校验状态和表单值，表单的值会恢复成默认的值。那么，这个默认值的定义是什么？我今天就遇到了一个情况，就是我的表单绑定的对象，是一个空值，然后我在这个元素被创建时，拿到props传过来的值赋值给表单对象。当我再来改动表单内容后，进行表单重置时，发现，重置后表单显示的值居然是我从props中获取的那个。也就是说，重置表单，他并没有恢复我表单对象的空状态。所以我就在想，他的默认值是怎么判断的...
element的dialog弹窗，默认不是垂直居中的，只是水平居中，但是他有一个很好的地方，就是当窗口的高度小于dialog的高度时，他会有滚动条，并且可以完整的显示dialog，算是一个非常不错的兼容方式。但是当我们对dialog进行css调整为垂直居中时，往往会使用下面两种样式：绝对定位：.el-dialog__wrapper { position: relative; .el-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -...
最近评论