不久之前，我写了一篇《element ui 侧边栏导航刷新自动展开并高亮》的文章，里面主要讲了怎么对侧边栏导航进行高亮，刷新并依旧保持高亮展开的方法。但是后来我发现我之前的那种思路有些窄了。不太适合更大型的站点开发使用。之前的方法主要讲的是：每个网页对应一个导航栏菜单，此时导航栏菜单和网页是一一对应的，所以我可以使用当前路由的name值来进行高亮。但是，如果有更复杂的情况呢？比如：我的导航菜单只显示两级，剩下的级数不显示，点击三级及以上时怎么办？虽然两个页面在路由配置里是同级路由，但是a路由点击按钮跳转到b路由，b路由有前缀条件，所以不能直接出现在导航菜单里，那么应该已经保持a路由菜单高...
今天想封装一个上传组件，用于本地选择文本文件后，前端直接将文本的内容给读取出来，然后提交这个拿到的文本内容。所以，组件的作用就只是将文件转为文本。bug封装中我发现了一个bug，由于上传组件是自动上传的，所以我使用自定义上传覆盖默认上传方法。然后再自定义上传方法中拿到文件，并读取到文本。但是饿了么组件会默认将你选择的文件显示到文件列表中，也就是上面图上那个样子。并且会有动画但是，如果我想要让它显示已上传，就是文件列表显示打勾，就需要对组件绑定的file-list数组push一个对象，对象里面有文件的name值，也就是如下：this.fileList.push({name:"文件...
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文件同级，没有...
vue 的render语法让人崩溃，太过复杂，于是有了jsx，利用babel的插件，我们可以使用jsx语法。插件可以让我们在使用render的时候，语法更像template模板语法，用起来更容易上手。安装插件jsxnpm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props安装完毕后我们需要进行配置配置插件找到babel.config.js文件，该文件和package文件同级，没有就自己手动创建一个。内容如下：module.exports = { presets: ['@vue/babel-p...
最近遇到一个需求，希望在无内容的情况下能用--来表示无内容占位。所以，想来想去，用过滤器最好，然后既然是通用性，那么直接全局就行了。创建过滤器我们可以创建一个js文件，然后export导出，再到main文件里面导入并激活。创建一个名为globalFilters.js的过滤器文件，这个文件一般放在utils文件夹中，当然你也可以随意，只要能正确引入就行。// 全局过滤器 // 无内容占位符 const placeholder = (value) => { if (!value) return "--"; return value; }; export ...
今天遇到这么一个需求，官网的个别页面需要新建页面打开，但是这个页面我是配置的路由。一直以来，我以为路由的跳转只能就是在当前页面进行，特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了，哈哈。。解决方法router-link元素默认生成的是一个a元素，仔细查看你会发现a元素的href是带有路径链接的，哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素，href依旧是路由的path，所以，既然他能生成路径，那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...
饿了么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、路由、静态文件、导航菜单都单独拆分，自己这个项目写一个入口文件，用于资源的调...
最近评论