说明本教程根据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跳...
即便我们将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中获取的那个。也就是说，重置表单，他并没有恢复我表单对象的空状态。所以我就在想，他的默认值是怎么判断的...
饿了么的侧边栏菜单，官方就是这样，当一个子菜单展开后，点击另一个无子菜单按钮，并不会收缩已展开的子菜单。然后被强迫修改，好嗨哟！效果图不废话，上教程！教程[hide]element给el-menu提供了一个手动关闭和打开菜单的方法，但是需要通过ref获取vue组件实例，通过该实例触发方法。但是首先我们要明白要处理的问题：点击无子菜单按钮折叠已展开菜单，那么如何判断哪个菜单是展开的，是我们首先要解决的问题。判断哪个菜单是展开的在for循环遍历出这个菜单时，其实是有区分有无子菜单的。所以我们可以直接给有子菜单的元素添加click事件<template> <el-menu...
通过api获取的数据，往往不一定是布尔值，在后端存放的数据中，大部分是都是0和1，但是饿了么的 Checkbox 多选框 组件，v-modal绑定的，虽然他文档上显示可以是string，number，但是实际上v-modal只能布尔值。他还有一个属性checked，checked可以使用三元判断<el-checkbox :checked="status===1"></el-checkbox>但是，他有一个致命的缺陷，如果数据源更新了数据，他不会动态变化，可能是因为我把他丢在的table组件里面的原因，如果想让他变化，只能手动点击，或者重新渲染。...
面包屑导航在网站的使用中是常常出现的，也是一个很常用的功能，最近在项目的需求里面，要求面包屑导航除了可以进行路由跳转，还在跳转时保留路由的参数，也就是说：路由a有参数1，a进入到b路由，再通过面包屑导航回到a，这个参数1要依旧存在才行。这就把我给弄蒙蔽了，这咋整？想了好久，只能这样做了：教程[hide]首先，面包屑导航必须要有规范要求，在这个规范内才能生成面包屑导航，正所谓无规矩不成方圆。路由必须存在name和title两个属性，才能生成面包屑面包屑有面包屑独有的属性配置，该配置权限高于普通属性基本上遵循这两点，我们可以配置一个路由了：export default [ { p...
本想着有木有人写好现成的组件，搜索了下，并没有，于是只能用better-scroll插件来做了。先看下效果图：教程具体的详细内容就不多说了，直接讲一下他的实现要求。最外围一个wrap容器，用于初始化的，他的宽度自己设置，然后overflow: hidden;必须设置，你也可以只设置x轴。wrap下面是一个宽度容器，content，他的宽度必须是他下面子元素宽度之和，比如有3个子元素，子元素的宽度是200，content就是3*200的宽度content容器下面就是具体的子元素了，尽量不用用margin做间隔，因为js获取margin不是很方便，可以多套个div元素，用padding来做分...
vue项目，如果要使用轮播，能做动画的只有vue-awesome-swiper了，除非牛人自己造轮子，但是vue-awesome-swiper是需要swiper的支持，而现在swiper已经出到6了，swiper的官网明确表示6只能支持vue3.0，而且官网没有旧版本的api文档，这就表示，目前主流的2.0项目，想用它真的就只能瞎子过河，摸不着边了。而且swiper的动画，是需要魔改代码的，因为动画的那个js文件需要改动，然后动画使用的animate.css也因为版本大改，导致使用起来越发的摸不着头脑，百度到的都是旧的教程，为此我特意研究了下，终于是“完美”使用了，为此出个教程。废话不多...
本来我是不怎么使用这个东西的，因为他报错实在是太烦了，但是当项目接手的人多了以后，代码可能会变得不稳定，每个人都有每个人的写法，也会有参差不齐的情况，有好有坏。有时候员工A创建了变量1，员工2修改后，变量1可能就不需要了，但是没有删除，因为代码不熟悉的缘故，往往会造成多余的代码出现，对后期维护非常不便，所以我想着能有一个基本的设定需求，在某些地方能有提供，甚至限制。所以我在初始化vue项目的时候选择的eslint的，初始化的时候有四个选项，我就选择的最后一项，也是试水。使用了eslint后遇到了几个问题：引入的第三方文件也被检测了，按道理那部分是不用检测处理的怎么配置规则这里就对应的说下...
一开始被要求这个功能我是一脸蒙蔽的，因为写了这么多vue项目，没有哪个项目要求这么做，况且，作为一个无刷新的前端项目，突然来个刷新，让我有点措不及防。中午和同事吃饭的路由讨论了此事，他说了一个点，让我想到，说不定可以这么做，于是下午百度了一些文章，心里有了思路，顺着这个思路，成功搞定这个需求。思路相同的路由，是不允许重复跳转的，所以不会触发路由守卫，想通过路由守卫处理这条路走不通。有人说通过this.$router.go(0)可以实现页面刷新，我测试了下，确实是页面刷新了，但是我要的是路由页刷新，路由页可能是某个区域，而不是整个网页，所以该方案也行不通。最终只能选择v-if和router...
饿了么的input组件只是在v-modal绑定的时候有一个.number修饰符，使用这个修饰符确实可以只输入数字，但是输入的是整数，无法输入小数，而且字符串还是可以输入，还可以负数，很尴尬。如果只想让它输入数字，小数，甚至更复杂的判断，上面的方式是不行的。网上的处理方式<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input> 大概就是给他添加一个老版本的事件，行内事件进行replace替...
修改协议最近发现axios的修改协议有个很方便的操作，就是通过create创建一个axios对象的时候，就可以直接设置上传协议了。const api = axios.create({ headers: { 'Content-Type': 'application/x-www-form-urlencoded', } }); 这样我们将协议改为了application/x-www-form-urlencoded这个协议可以上传formData对象，但是他不能上传文件，所以如果你要上传文件，需要改为这个协议：multipart/fo...
最近发现没啥用，玄学，这个崩溃在项目内容很多的时候就会出现，更换了好几个版本的系统，vscdoe版本也换过，node版本也换过，找不出原因，用其他ide就不会出现这个问题，估计是锐龙cpu的问题吧，用g4560随便启用都不出问题，真是日了狗了，只能将就用，等以后版本修复了。一般这个问题有两种情况，一种是项目非常庞大，另一种就是内存泄漏，泄漏的话跟代码有关系。但是我们肯定不能直接大刀阔斧的去删代码，所以只能自己想办法了，唯一的办法就是增加node服务的内存限制。为此我们需要安装一个全局的插件：increase-memory-limityarn global add increase-mem...
不久之前，我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章，里面主要讲了怎么对侧边栏导航进行高亮，刷新并依旧保持高亮展开的方法。但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。之前的方法主要讲的是：每个网页对应一个导航栏菜单，此时导航栏菜单和网页是一一对应的，所以我可以使用当前路由的name值来进行高亮。但是，如果有更复杂的情况呢？比如：我的导航菜单只显示两级，剩下的级数不显示，点击三级及以上时怎么办？虽然两个页面在路由配置里是同级路由，但是a路由点击按钮跳转到b路由，b路由有前缀条件，所以不能直接出现在导航菜单里，那么应该已经保持a路由菜单高...
今天想封装一个上传组件，用于本地选择文本文件后，前端直接将文本的内容给读取出来，然后提交这个拿到的文本内容。所以，组件的作用就只是将文件转为文本。bug封装中我发现了一个bug，由于上传组件是自动上传的，所以我使用自定义上传覆盖默认上传方法。然后再自定义上传方法中拿到文件，并读取到文本。但是饿了么组件会默认将你选择的文件显示到文件列表中，也就是上面图上那个样子。并且会有动画但是，如果我想要让它显示已上传，就是文件列表显示打勾，就需要对组件绑定的file-list数组push一个对象，对象里面有文件的name值，也就是如下：this.fileList.push({name:"文件...
js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。那么怎么做呢？function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments;...
vue cli目前还没有自带这个功能，需要安装一个webpack的插件：插件安装yarn add compression-webpack-plugin更新：2020-12-17 千万不要安装最新的7.0版本，会报错，而且目前没有人提供解决方案，我这里提供两个版本，大家自行选择安装稍微新一些的yarn add compression-webpack-plugin@6.1.1旧的yarn add compression-webpack-plugin@4.0.0使用这两个版本不会出现报错，个人亲测配置安装完打开vue的配置文件vue.config.js，和package.json文件同级，没有...
经常可以看到各种组件的文档，都是可交互，点开code按钮，还能查看对应的源码。那么我们如果要写一个这种的话，最省事的，应该就是在源代码的基础上，我们增加一个按钮，然后点开可以查看源码，反正就是尽量和书写vue项目一样。为了达到这个需要，我们有两个需求：怎么把vue文件作为代码文本显示代码文本怎么高亮解决这两点我们也能简单的搭建一个类似的可以交互的组件文档了。当然还有更高端的办法，就是自己写一个loader解析器，这个成本就很高了，一般人也不会这个，所以就不考虑了。怎么把vue文件作为代码文本显示webpack有一个插件： raw-loader他可以把text文本或者vue文件这些文件，拿...
moment作为一个时间插件，使用的地方是非常广泛的，但是我们使用moment的时候，需要注意下他的语言包。默认情况下，他的语言包是全加载的，也就是有多少个预设的语言包，就加载多少个。为此，我们需要对他进行优化优化前优化打开vue.config.js文件const webpack = require('webpack'); module.exports = { //... configureWebpack: { plugins: [ // Ignore all locale files of moment.js new webp...
最近评论