环境变量的使用，一般就是替换一下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事件你阻...
删除文件需要注意一点，就是你当前的项目，没有任何文件在待提交上，或者暂存区，有的话如果不重要你可以取消掉，或者先提交一次。让git这两个区域空下来。如果没有清空使用删除，会提示如下代码：Cannot rewrite branches: You have unstaged changes.永久删除文件清空暂存和提交区，然后输入以下命令：git filter-branch --force --index-filter 'git rm --cached --ignore-unmatch password.txt' --prune-empty --tag-name-filte...
今天遇到一个问题，就是在使用mock模拟本地api请求的时候，因为做了一个全局配置文件，配置文件里面有一个devUrl属性，这个属性是本地的url地址，所以我就想着，让mock那边自动将devUrl和api地址进行拼接。但是api地址段不一定只是字符，有可能是正则。所以，我们需要进行拼接正则。知识点1.如何获取正则的匹配的那段文本?也就是/[a-z]/ig中我们怎么拿到[a-z]，因为这个内容是自定义的，你不知道他会是什么内容。这里我们就需要了解到reg对象的source属性：RegExpObject.sourcesource就可以直接返回给我们模式匹配所用的文本/[a-z]/ig.so...
跨域一直是很烦人问题，不过好现在现在跨域，大部分都是肛后端，后端设置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目录的，...
二进制和八进制表示法es6提供了新的表示方法：数字：503二进制111110111 //es5 0b111110111 //es6八进制767 //es5 0o767 //es6也就是加了个前缀，二进制前缀是：0b，八进制前缀是：0o，后面的字母大写也是可以的，都一样。isFinite()和isNaN()is开头一般都是用于判断的，这两个方法为Number对象新增的两个方法， isFinite用于判断数字是否为有限的数字，isNaN就判断值是否为NaN需要注意的是，这两个方法和以前的方法不同，他们不会先转换值为number类型再进行比对，而是直接判断，不为数字...
fieldset这个元素，估计用的人很少吧，或者说现在使用fieldset情况已经很少了，大部分都是使用其他元素模拟这个元素的ui。今天我碰到一个很奇怪的现象。fieldset里面的元素，他不会产生横向滚动条，哪怕我设置了外部所有父元素的宽度为100%，overflow-x: auto;里面的子元素，如果比如pre这种代码块，不换行的，他会一直往右延伸，也就是超出原来的宽度，把fieldset撑的非常宽。但是所有的父元素都是block，按道理宽度是自己占满不会超出的。找了半天，理解出这么一段解释：fieldset默认是以block方式解析的，也就是宽度是按照100%占满，但是他的默认cs...
之前写过一篇typecho上一篇下一篇的文章，但是当时是对官方的代码进行小改，虽然文章标题，链接都能获取到，但是没法获取到更多，包括文章缩略图。为此我是绞尽脑汁啊，还参考了一些有这种效果的作品，发现，不行，没有我想要的效果。他们的效果都是获取文章的自定义字段，也就是和自定义文章缩略图的那种路子，你只有设置了，他这里才能显示，他不能自动去获取，有的好像连个随机不够做吧。终于，有一天晚上，我一时兴起，想解决下这个问题，于是有了这篇文章，首先我们需要两段代码，这两段代码我是通过网上的代码进行修改的，去掉了一些部分。[hide]获取文章上一篇，下一篇cid/** * 显示上一篇 * * 如果没有...
typecho的缩略图，其实自己用了好久，最近才发现了一种最简单的组合，不用太多代码，有需要改改方法就行了。目前我总结了一个对文章缩略图的获取顺序：用户自定义缩略图文章第一张缩略图文章附件第一张图文章随机图是否开启cdn加速，使用加速地址前段本地地址基本上按照这个思路，所有的情况都能照顾到，当然我看了一些付费的主题，他会对用户自定义的缩略图进行定制，比如，大图，小图这些，其实我感觉挺麻烦的，哈哈这里我们一步一步完善这三步教程[hide]自定缩略图自定义缩略图我们需要一个自定义字段，这个自定义字段也是在网上找的别人的分享技术，这里贴出来用法直接在主题function.php文件里面，插入如...
这个应该有点追求都想要做到的事情吧，都希望每次刷新页面，页面的导航栏能够自动高亮，二级菜单的话就自己展开。我想了好久，今天无意间测试到了，特此分享。[hide]思路首先我们要知道NavMenu 导航菜单他的选项菜单是有一个必填属性index的，这个index要求类型必须为string格式。然后根元素el-menu他有一个默认选中的属性default-active，而这个属性刚好要对应index。而el-menu的这个属性是可以自动展开菜单的，即便这个index可能是二级菜单的index。他依旧可以做到展开的效果，并且高亮对应的选项。所以，我们现在的重点就是这个index怎么设置，怎么获取...
最近遇到一个需求设计一个开发的环境，由于产品本身很庞大，所以需要划分区域开发，每个人负责一个部分，但是又不太想使用官方的那种资源分布的模式，想独立开发，最后整合，且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块，里面有路由、vuex、组件、单页、静态资源等目录。例如：商城：购物车、订单页、商品页、设置页...文章：新建文章、文章列表、修改页、标签页...由于这种分类非常多，所以需要将类似商城、文章这些作为一个模块，每个小组负责一个模块开发，开发vue文件，组件、vuex、路由、静态文件、导航菜单都单独拆分，自己这个项目写一个入口文件，用于资源的调...
经过一番苦练，终于搞清楚如何本地centos局域网共享了，只需一点点配置，完美的很啊。超快速部署，再也不用摸不着头脑了。[hide]要求因为我是本地共享，加上就我一个人用，权限要求自然是越高越好，反正也不会瞎鸡儿删除文件这种，所以我决定用root用户作为samba的共享账户。安装首先我的环境是centos8.4，理论7和6都是一样的。首先我们需要安装sambayum install samba配置安装完毕后我们需要进行一下环境操作：关闭防火墙去他娘的防火墙sudo systemctl stop firewalld 临时关闭 sudo systemctl disable firewall...
今天买的迷你主机到了，需要安装一个centos8.4系统，但是我原来的u盘做了pe了，如果要做linux安装，需要整个格式化，这样pe只能二选一，非常尴尬。于是找到了一款国外开发的多合一的工具Ventoy，使用非常方便，可以自动识别iso镜像，只要你的pe是iso镜像，就能通过他来使用。下载官网中文文档官方提供了window系统下制作和linux系统下制作的软件，当然还有iso镜像包，三种方式，自行下载需要的版本。安装下载完解压，插入U盘，打开软件，然后在软件界面选择u盘，点击安装，提示格式化就确认。官方的软件还支持点击升级，省的每次更新都要重新格式化。格式化完毕后，目前最新版他没有分两...
找了半天没找到一个合适的dropdown模块，本来就很简单的需求，就是希望在hover的时候能显示一个二维码小窗口出来，实在无奈，自己造了个模块用了。预览图支持四个方向简单快速使用方式资源下载： 蓝奏云 密码:6szx下载模块，layui使用自定义模块不用多说吧，不知道看我博客发布的layui模块文章，然后自己把对应的样式css单独引入就行了。html格式<div class="layui-dropdown" id="dropdown"> <button class="layui-dropdown-toggle...
传统的vue组件切换，无非是Vue.component定义一个组件，然后设置一个名字，再通过component自定义html元素加上is属性去动态切换组件。vue-cli的话，在components里面将import的组件激活，然后也是is属性配合component自定义html元素进行切换。那么异步组件的优点在哪里呢？无非是组件会作为一个单独的js文件存在，需要时才被调用，这个特性再开发单页的时候最明显，他是会在打包后将异步组件单独生成一个js文件，在调用时下载并使用。如何创建一个异步组件Vue.component创建异步组件这个方法适合script引入vue.js的那种方式，估计也用...
官方对于layui模块化的说明只言片语，看得我着实有点懵逼，还好有万能群友帮助，总算明白要怎么写了，为此特意出个教程。模块化优点相比于传统的jq模块，layui模块他在于导入方式和不占据浏览器资源请求额度(一般一次只能6个)，且调用也方便。jq模块是需要自己手动在html里创建script元素并src引用js文件，这样即便我们丢到body的最后面加载，也是需要占用下载数量的，并且如果你要调用这个模块，你的js必须在该模块之后才行。这也是传统js调用的一个模式。layui模块他的原理是js创建script元素并插入，而这样创建的script是不占据下载资源数量的，并且调用时只需要在layu...
最近评论