饿了么ui的返回顶部，官方的文档非常不上心，写的那个无法使用，因为默认那个示例里面，他用了target属性，然而实际上，如果你没啥定制化的滚动条，而是body的滚动条，那么target就不需要设置。<!-- 返回顶部 --> <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了，效果ok，不会不显示，滚动效果也是有的。里面的i是我自定义图标，这个看下文档就明白了。
当我们使用vue去创建一个官网的时候，或者是其他传统类型的html，就会触碰到vue的痛点，他没有seo优化。因为所有的html全是js生成，你打包出来的文件，最终也只是一个简单的index.html，里面可以说什么都没有。这样的话是不利于爬虫抓取的，所以我们需要进行预渲染。目前我将预渲染分为两种：服务器渲染 ssr本地打包渲染服务器渲染ssr可能很多人不太清楚怎么回事，其实只要知道node后台服务搭建，那就肯定是知道的，因为所有的node框架，他都绕不过一个知识点，就是模板语法渲染html页面，这个就是所谓的ssr了。可以理解成node的php写法吧。这个由于目前还未遇到，而且之前学n...
对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源...
lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。教程安装插件yarn add lodash-webpack-plugin babel-plugin-lodash --dev安装这两个...
之前我写了一篇关于cli2的一个文件打包分析的用法，需要安装webpack-bundle-analyzer插件。然后还需要配置这配置那的，有点麻烦。不过现在vue cli已经内置这个功能了，不需要安装插件，也不需要配置vue.config.js，我们只需要给package.json添加一段启动命令即可。"scripts": { "report": "vue-cli-service build --report" }使用该命令即可。然后运行这个report。他会生成dist打包目录，并且在里面生成一个report.htm...
是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？那么我们就来一一讲解，vue cli怎么才能绑定图片。style标签中引用图片我们的资源存放路径就两个：纯静态的public文件夹动态的src/assets文件夹assets里的图片，如果很小的话，webpack打包的时候会将其转为base64，这样就减少了文件的请求数量，但是相对来说，如果特别多小图片，那么反而会增加js文件的大小，因为base64并不是压缩，如果文件很大，base64占用的存储可能会比原文件还要大一些。所以，优化很重要，但是要看项目需求。引入public中的资源首先我们要知道，p...
初衷是因为自己有这个需要，然后又看了下市面上的ui组件，基本都没这个功能，不知道他们怎么想的，为什么要一定要传到服务器等拿到api参数才进行回显，且图片是在线连接。这不是很蛋疼吗？？？？？我本地随便传个图，你就丢服务器了，不是很费资源吗？预览图使用因为就花了半个小时写，没怎么精心，反正代码极度简洁，二开也方便，有需要自取。反正就是，除了icon用的饿了么框架的，其他的都是自写css，所以兼容性还可以，懂的都懂，不懂的，就先学学基础吧。源码<template> <div class="upload"> <div class=&q...
环境变量的使用，一般就是替换一下api的url链接，或者是一些其他设置。比如：本地测试的时候，你使用的api链接是test.xxx.xxx；而正式上线后，要求改为:formal.xxxx.xxx这样的话，如果你不使用环境变量，每次打包的时候都需要手动修改默认的api地址段。非常麻烦，如果你有更多的需求，比如有好几个api应对不同的平台，哦豁，那就真的吐血。如果使用了环境变量，我们只需要创建一个env文件，然后设置一个固定的值，打包的时候指定使用该env文件，api的获取自动拿到env文件里面设置的值，这样就不用每次都要手动修改了。知识点1. 文件名的命名.env文件是存放在项目根目录，和...
最近发现了element主题的一个知识点，应该可以方便大家。前提项目里的组件都是按需导入，然后要求使用自定义主题，但是设计师只给了一个官方在线主题生成工具生成的主题zip包。这个主题压缩包打开发现只有一个index.css，一个font文件夹，一个config.json文件。css文件大概会有200kb以上。而我们的按需引入是引入一个组件，就会引入对应的样式文件，他不会一口气引入所有的样式，但是如果要使用自定义主题，index.css又不得不引入，导致按需引入达不到理想状态。我们现在就要解决这个css的问题。思路打开config.json文件，你可以看到一些键值对，仔细看一下，你可以发现...
最近遇到如题的一个需求，因为很常用，所以我把它记录下来，方便以后使用。流程用户正常使用时，或者后台刷新了缓存，导致登录超时或者失效，前端api请求得到一个信息，比如code=10010，那么就表示用户登录信息失效了，前端页面就需要提示用户登录失效了，需要重新登录。用户点击确认后，我们删除本地token，然后路由跳转。跳转之前我们需要记录当前的路由，这样用户登录成功后可以跳转回来，体验极好。233...流程示意：登录失效 --> 前端api请求时得到code=10010 --> 弹出提示窗口 --> 用户点击 重新登录 --> 清除token --> ...
超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。警告提示 Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952大概就这么一段提示，只要是touchu事件你阻...
跨域一直是很烦人问题，不过好现在现在跨域，大部分都是肛后端，后端设置CORS信息即可。但是也有少部分，可能前端能完成的事前端搞定就行了，懒得麻烦后端，这种情况一般都是进行反代。使用场景后端提供了一个在线api地址，但是该地址段和本地localhost不在同一域名下，所以产生了跨域。配置反代 proxy这种情况，我们的vue-cli提供了一个很好的功能，反代。首先我们需要找到vue cli的配置文件：vue.config.js，他存在项目的根目录，和package.json同级，如果没有，手动创建即可，只是一个js文件而已。打开文件填入以下信息：vue.config.jsmodule.ex...
有时候我们可能经常需要对某一些模块进行引用，这些模块虽然都分文件夹了，但是他们都有一个共同的特点，就是前缀路径是相同的。比如：import Header from "@/components/default/Header"; import Sidebar from "@/components/default/Sidebar";@/components/default这段是相同的，如果文件目录再深一些，这段代码可能在编辑器里无法一行显示了，相对来说，对于代码整体，不是很友好，所以我们可以自定义一个路径别名。@这个别名我们都知道，他是表示src目录的，...
这个应该有点追求都想要做到的事情吧，都希望每次刷新页面，页面的导航栏能够自动高亮，二级菜单的话就自己展开。我想了好久，今天无意间测试到了，特此分享。[hide]思路首先我们要知道NavMenu 导航菜单他的选项菜单是有一个必填属性index的，这个index要求类型必须为string格式。然后根元素el-menu他有一个默认选中的属性default-active，而这个属性刚好要对应index。而el-menu的这个属性是可以自动展开菜单的，即便这个index可能是二级菜单的index。他依旧可以做到展开的效果，并且高亮对应的选项。所以，我们现在的重点就是这个index怎么设置，怎么获取...
最近遇到一个需求设计一个开发的环境，由于产品本身很庞大，所以需要划分区域开发，每个人负责一个部分，但是又不太想使用官方的那种资源分布的模式，想独立开发，最后整合，且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块，里面有路由、vuex、组件、单页、静态资源等目录。例如：商城：购物车、订单页、商品页、设置页...文章：新建文章、文章列表、修改页、标签页...由于这种分类非常多，所以需要将类似商城、文章这些作为一个模块，每个小组负责一个模块开发，开发vue文件，组件、vuex、路由、静态文件、导航菜单都单独拆分，自己这个项目写一个入口文件，用于资源的调...
传统的vue组件切换，无非是Vue.component定义一个组件，然后设置一个名字，再通过component自定义html元素加上is属性去动态切换组件。vue-cli的话，在components里面将import的组件激活，然后也是is属性配合component自定义html元素进行切换。那么异步组件的优点在哪里呢？无非是组件会作为一个单独的js文件存在，需要时才被调用，这个特性再开发单页的时候最明显，他是会在打包后将异步组件单独生成一个js文件，在调用时下载并使用。如何创建一个异步组件Vue.component创建异步组件这个方法适合script引入vue.js的那种方式，估计也用...
一直想找一个动效，因为以前一直都是使用mode="out-in"；这种一般也就fade这种动效好看，如果要更好看一点，就需要花点心思了。效果原理通过给每个路由的自定义属性meta设置一个层级，第一层，第二层，第三层，也可以理解为第一页，第二页，第三页。然后通过这个层级关系判断页面是往左还是往右。源码[hide]vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive&g...
这个问题一般是出现在在路由鉴权的功能上。我们在路由守卫里面判断，当用户已经登录了，点击进入访客页，那么在进入之前我们next({name:"Home"})跳转到首页。然后就会报错：Error: Redirected from X to Y via a navigation guard.百度和谷歌找了好久，很多人都说是代码里面重定向过多，拜托，这种应该是键盘侠，如果真的过多，早就解决问题，还问个鸡腿。首先这个问题大部分都是出现在vue-router v3.1及以上的版本我觉得可能是插件的问题，因为出现这个问题的提问时间基本都是这两个月内出现的。唯一的解决办法就是降级，将...
按照官方的教程，在main文件中引入自定义的less文件，在这个前提下，我们需要less语言解析yarn add less less-loader --dev安装完我们main引入自定义的less文件，结果启动的时候出现错误：Inline JavaScript is not enabled .bezierEasingMixin();这个错误一般是因为新版本less带来的，你可以换旧版，比如5.0的版本我们在项目根目录找到vue.config.js文件，没有你就创建这个文件填入以下：module.exports = { css: { loaderOptions: {...
最近写项目遇到一个问题，很头疼，几天了，问了好些大佬，都没有找到问题的解决方案，但是，最后还是被我找到了，可喜可贺...问题有一个home页，home页里面有router-link元素进行子路由切换，为了减少资源损耗，所以直接使用了keep-alive进行路由页缓存，假设有三个子路由abc，a路由页面有两个子路由a-1和a-2，默认是a-1显示。当我们进入到a路由是，默认显示a-1，然后我们切换到a-2，然后路由push返回到home页，再次进入到a页面时，你会发现，a路由此时显示的a-2而不是a-1，但浏览器地址是a-1的地址，此时，我们可能没办法切换到a-1了。问题图为什么主要因为k...
听说yarn很好用，所以这次初始化项目的时候使用的就是yarn，在安装完yarn后，再用vue create会自动调用yarn进行初始化，应该是吧，我初始化的时候显示用的yarn。但是安装node-sass的时候会报错，原因可能是因为网络问题，所以需要给yarn更换为国内的源：yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g两段命令都提示success就ok了，再重新安...
最近评论