今天啃了下官方文档，加上之前也配置到webpack的，有一些经验，我觉得官方可能有对应的方式，毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了，都不用安装啥插件。于是乎，果然，官方有，但是文档很蛋疼，你能看懂引入单个全局，没有多个全局的示例，索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...
前言作为一个前端菜鸡，理解上可能会有诸多不对的地方，望大家指正，本篇文章也是本人这几天苦思冥想的结果，也不能保证所说全对，也算是抛砖引玉了，期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于：src/transitions目录下，gayhub地址：链接由于内容不多，我直接贴出来源码：import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-t...
一般出现这个问题，肯定大部分人都是使用default-passive-events插件。但是随着项目的扩大，default-passive-events难免会和其他插件产生冲突，比如canvas库konvajs。在使用konvajs和default-passive-events后，肯定会报：拖拽时Unable to preventDefault inside passive event listener invocation.没办法，我们只能禁用default-passive-events插件我们新建一个polyfill.js文件polyfill.js/* * @Author: mul...
高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示，常常是展示一个父级菜单名，子路由菜单作为页面内的导航啥的。常见的场景： 详情页为此，我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置，里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢？我个人觉得应该遵循父级优先的概念，如果子路由设置了，但是父级路由也设置了，那么以父级为准，也就是最上层路由为准，这样子集直接可以随便切换，不会影响侧边栏高亮，因为他有父级。那么如果没有父级，就使用自己遵循这个原则，我们对el-menu的defau...
由于最近ios收税政策的影响，ios的h5支付已经不行了，所以，这里讲的是我对接安卓端h5支付的那些事情。[hide]当我们给后端提交一个订单请求的时候，这个请求的内容具体要看后端是怎么设置的，这个和h5支付对接没有直接关系。提交订单后，后端回返回一个用于支付的链接，这个链接对应于微信h5支付文档中这里：文档链接：微信h5支付开发文档可以看到，这个链接是一个http开头的，实际测试中，通过a元素，然后打开这个链接，是可以直接调用微信的付款的，所以，这其实就是一个普通的超链接而已。（当然，坑也在这里）在这个链接的末尾，他是有一个参数的：redirect_url这个参数用于，用户支付成功或者...
简单说下使用场景，你使用一个dialog组件，弹窗时要加载数据，关闭后要清理数据，以防下次使用报错或者数据残留，如果在data中写了过多的属性，或者层级很深的引用对象啥的，为了方便还原，你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是，这样实在是太难了，有没有一种简单的方法，就像表单重置一样。答案当然是有的：onClose() { Object.assign(this.$data, this.$...
按需加载，在gzip面前根本不值一提，当然，该优化还是要优化，所以在使用了lodash-webpack-plugin插件后，在使用个别方法后就会出现问题，比如：unionBy;原因按需加载的插件，它的按需就是将你调用的方法单独提取出来，但是，如果提取的方法里面还用了其他方法，他可能无法识别，导致方法缺失，所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...
nuxt嘴上说很快，但是其实热编译是很慢的，很墨迹，和vue cli这种对比起来，差了很多，经常改动一点东西想要看效果，编译要等一段时间。今天无聊去看了下nuxt模块库，看到这么一个插件：nuxt-build-optimisations有点牛皮，使用后，热编译速度肉眼可见的提升，官方的介绍说可以提升2-5倍的速度，实际测试中，冷启动速度没太大感觉，但是热编译速度确实是很满意。特此推荐！用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nux...
问题当通过Tooltip组件，click事件触发抽屉或者弹窗功能时，Tooltip的hover效果，会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题，导致元素的事件监听不到鼠标离开，导致关闭弹窗后，浏览器又自动选中了。所以我的解决办法很简单，找到那个触发hover效果的dom元素，对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...
在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。但是，如果我们使用@nuxtjs/axios，那么我...
最近遇到这么一个需求，就是内容一行显示，滚轮滚动的时候，进行横向滚动。本来想尝试下css能不能做到，最后发现，即便改变了流的布局，并不能改变滚动条的方向，最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候，所以触摸事件是不考虑的，触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌：火狐滚动事件：DOMMouseScroll谷歌滚动事件：mousewheel其中DOMMouseScroll的event对象，他有一个detail字段，向下滚动是3，往上滚动是-3mousewheel的event对象是deltaY，往下滚动是125，往上是-125，具体数值记不清了...
莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示 冲突和顺序问题了
![关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题](https://mulingyuer-1253375624.cos.ap-guangzhou.myqcloud.com/%E5%9B%BE%E7%89%87%E7%A9%BA%E9%97%B4/%E5%85%B3%E4%BA%8Evue%20cli%E6%89%93%E5%8C%85%E6%8F%90%E7%A4%BA%20chunk%20chunk-ec595700%20%5Bmini-css-extract-plugin%5D%20css%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%92%8C%E5%86%B2%E7%AA%81%E8%AD%A6%E5%91%8A%E7%9A%84%E9%97%AE%E9%A2%9801.jpg!Anti_theft)
这个奇葩的问题，搞得我人都傻了，怎么软件内置的浏览器不能上传文件呢？？？就离谱！一开始我以为是软件的安全限制，后来发现不对，为什么别人的网页可以上传？？[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept，就没办法限制文件类型了，只能前端js做判断，我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性，他是一个数组，表示允许上传的文件类型<script> export default { data(){ return { ...
全局混入我考虑到可能会有多个混入，如果把混入的内容全部写在同一个js文件里面，那是非常混乱的，所以我采用模块化的写法，其实就是导入导出而已，一种方式。具体用法和全局过滤器一样，创建插件，激活插件。在plugins目录下创建mixins文件夹，mixins里面创建一个index.js作为入口文件，然后再创建一个modules目录，用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...
出现这个问题，往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的，为什么会不同，举个例子：我们v-if判断客户端是否存在localstorage.getItem("token")，但实际上服务端永远不可能拿到，因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有，你浏览器上又有了，那不是就产生冲突了。于是就会报这个错，但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行，nuxt提供了一个自定义标签：client-only表示在这个标签内的内容，只有有客户端才会渲染运行，这样就可以让虚拟dom保持一致，且不...
由于nuxt无法配置路由信息，所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案，大概流程如下：创建一个路由中间件auth，用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时，auth进行判断：重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js：export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...
老规矩，还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕，在plugins目录创建一个localStorage.js文件localStorage.js：import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { ...
在使用vant框架的时候，一般都是使用rem自动适配，这个东西有好有坏，具体就不细说，我们这次处理的问题就是使用了rem适配，他样式第一次加载闪烁的问题。其实出现这个问题，大多数都是使用了plugins插件的方式加载rem适配。具体如下：在plugins目录下创建了lib-flexible.js文件，文件名随意打开文件，在里面写入import 'amfe-flexible'打开nuxt.config.js，在plugins中加入代码{ src: '@/plugins/lib-flexible', mode: 'client' }...
今天就遇到一个问题，后端从头信息给我携带了数据，我需要在请求头中获取，但是不管怎么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只能防止根元素往上冒泡，并不能阻止他本身...
最近评论