木灵鱼儿

木灵鱼儿 5年前 vue 项目实战

vue 路由跳转使用新建页面打开

今天遇到这么一个需求，官网的个别页面需要新建页面打开，但是这个页面我是配置的路由。一直以来，我以为路由的跳转只能就是在当前页面进行，特别是我跳转路由使用的都是路由name属性。接到这个请求我有点懵逼了，哈哈。。解决方法router-link元素默认生成的是一个a元素，仔细查看你会发现a元素的href是带有路径链接的，哪怕你跳转的:to="{name:xxx}"使用的是路由name。它最终生成的a元素，href依旧是路由的path，所以，既然他能生成路径，那么我们只需要给他加上a元素的attr属性target即可。<router-link :to="{n...

4274 0 0

vue router vue cli

elment ui el-backtop使用教程

木灵鱼儿 5年前 vue 项目实战

elment ui el-backtop使用教程

饿了么ui的返回顶部，官方的文档非常不上心，写的那个无法使用，因为默认那个示例里面，他用了target属性，然而实际上，如果你没啥定制化的滚动条，而是body的滚动条，那么target就不需要设置。 <el-backtop> <i class="el-icon-arrow-up"></i> </el-backtop>这样就行了，效果ok，不会不显示，滚动效果也是有的。里面的i是我自定义图标，这个看下文档就明白了。

6061 3 0

vue vue cli element ui

vue cli4 预渲染生成静态html文件，seo优化，prerender-spa-plugin

木灵鱼儿 5年前 vue 项目实战

vue cli4 预渲染生成静态html文件，seo优化，prerender-spa-plugin

当我们使用vue去创建一个官网的时候，或者是其他传统类型的html，就会触碰到vue的痛点，他没有seo优化。因为所有的html全是js生成，你打包出来的文件，最终也只是一个简单的index.html，里面可以说什么都没有。这样的话是不利于爬虫抓取的，所以我们需要进行预渲染。目前我将预渲染分为两种：服务器渲染 ssr本地打包渲染服务器渲染ssr可能很多人不太清楚怎么回事，其实只要知道node后台服务搭建，那就肯定是知道的，因为所有的node框架，他都绕不过一个知识点，就是模板语法渲染html页面，这个就是所谓的ssr了。可以理解成node的php写法吧。这个由于目前还未遇到，而且之前学n...

6024 0 0

vue vue cli 静态化

centos 8 ssh连接wifi教程

木灵鱼儿 5年前教程

centos 8 ssh连接wifi教程

首先，如果你是重装系统，那么在安装界面你可以连接到wifi，但是，安装完开机后还是连接不了的，所以，最佳的方案是这样的：先有线连接网络并安装系统 --- 关闭防火墙 --- ssh连接 --- 安装NetworkManager-wifi ---- 连接无线网 ---搞定这里就以ssh连接后开始：你可能需要先关闭防火墙，如果ssh连接不上的话:systemctl stop firewalld.servicesystemctl disable firewalld.service教程yum install NetworkManager-wifi安装完毕后重启：reboot重启后开启wif...

9244 0 2

wifi ssh centos

vscode 自定义代码补全

木灵鱼儿 5年前教程

vscode 自定义代码补全

有时候有些代码总是重复输入，但是没有自动补全，总是重复书写很头疼，特别是路径。错一个字就error所以我们可以使用编辑器的自定义代码补全功能，省去了大把时间。教程文件 --- 首选项 --- 用户片段 --- 这里我们可以创建全局的，或者基于当前项目的代码提示 --- 我这里选择全局选择全局后会进入一个json文件，这里就不多解释了，直接上代码{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // de...

5449 0 0

vscode 代码补全

vue cli4 配置静态cdn资源

木灵鱼儿 5年前 vue 项目实战

vue cli4 配置静态cdn资源

对于打包的优化，除gzip和按需引入，就只有cdn是效果最明显的了。首先使用cdn我们要明确一个事实，就是我们cdn加载的文件，他是没有所谓的按需引入的概念，他就是一个完整的包，顶多给你分为基础包、核心包、完整包啥的。所以，引入是定死的，不可能说你用到什么功能自动引入什么功能，那是本地打包才能做到的。就好比如element ui ，本地打包，我可以按需引入，用到什么引入什么，然后生成一个js文件，但是cdn，你要么就引入全部功能，要么就自己本地，只能这么二选一。所以，对于像element ui 这种框架的打包优化，如果你是按需引入，你可能需要调整为完整引入，因为最终打包使用的是cdn资源...

4353 0 0

vue vue cli 静态资源

vue cli4 lodash库按需引入

木灵鱼儿 5年前 vue 项目实战

vue cli4 lodash库按需引入

lodash这库还是为微信技术群里有人推荐的，我一开始都不知道，不过看了下，是对一些常用js方法的封装，比如深度克隆，筛选啊这些。但是一个lodash的库引用，他占用了起码有500kg的大小，在vue cli 打包后，在chunk-vendors.js文件中也占据了一些大小。这就会导致chunk-vendors这个文件变得特别的大，但是lodash里面的方法你可能只会用到一部分，并不是全部，所以我希望的是，他可以按需引入，并且不改变原来的写法的情况下。教程安装插件yarn add lodash-webpack-plugin babel-plugin-lodash --dev安装这两个...

1.1w 0 4

vue vue cli lodash

vue cli4 文件打包分析

木灵鱼儿 5年前 vue 项目实战

vue cli4 文件打包分析

之前我写了一篇关于cli2的一个文件打包分析的用法，需要安装webpack-bundle-analyzer插件。然后还需要配置这配置那的，有点麻烦。不过现在vue cli已经内置这个功能了，不需要安装插件，也不需要配置vue.config.js，我们只需要给package.json添加一段启动命令即可。"scripts": { "report": "vue-cli-service build --report" }使用该命令即可。然后运行这个report。他会生成dist打包目录，并且在里面生成一个report.htm...

6771 0 1

vue 文件分析 vue cli

js 函数注释

木灵鱼儿 5年前 JavaScript

js 函数注释

函数注释的一个常用的格式：/** * @description: 函数描述 * @param {类型} 参数描述 * @return {类型} 描述 */description 就是函数的说明，干什么用的param 是函数的参数； {}里面表示这个参数是什么类型，后面接参数名称，描述，参数有多少个，@param就有多少个return 表示要输出的内容，一般可以省略不写，也可以写，和param 差不多示例/** * @description: 测试函数 * @param {*} a 任何类型参数 * @param {*} b 用来xxx * @return {*} 返回空...

5224 0 0

javascript 注释

vue cli3-4 绑定图片方法大全

木灵鱼儿 5年前 vue 项目实战

vue cli3-4 绑定图片方法大全

是不是经常头疼vue cli项目怎么绑定图片，是不是感觉为什么路径是对的，但是就是会报错？那么我们就来一一讲解，vue cli怎么才能绑定图片。style标签中引用图片我们的资源存放路径就两个：纯静态的public文件夹动态的src/assets文件夹assets里的图片，如果很小的话，webpack打包的时候会将其转为base64，这样就减少了文件的请求数量，但是相对来说，如果特别多小图片，那么反而会增加js文件的大小，因为base64并不是压缩，如果文件很大，base64占用的存储可能会比原文件还要大一些。所以，优化很重要，但是要看项目需求。引入public中的资源首先我们要知道，p...

4633 0 0

vue vue cli 绑定图片

图片upload组件，本地上传预览，无需传到服务器即可预览图片

木灵鱼儿 5年前 vue 项目实战

图片upload组件，本地上传预览，无需传到服务器即可预览图片

初衷是因为自己有这个需要，然后又看了下市面上的ui组件，基本都没这个功能，不知道他们怎么想的，为什么要一定要传到服务器等拿到api参数才进行回显，且图片是在线连接。这不是很蛋疼吗？？？？？我本地随便传个图，你就丢服务器了，不是很费资源吗？预览图使用因为就花了半个小时写，没怎么精心，反正代码极度简洁，二开也方便，有需要自取。反正就是，除了icon用的饿了么框架的，其他的都是自写css，所以兼容性还可以，懂的都懂，不懂的，就先学学基础吧。源码<template> <div class="upload"> <div class=&q...

4268 0 0

vue upload 本地预览

element 时间组件转时间戳

木灵鱼儿 5年前 vue 项目实战

element 时间组件转时间戳

所有的时间组件，存服务器一般都是需要转时间戳的，并且由于位数问题，都是以秒为单位存储。<el-form> <el-form-item :label="label"> <el-date-picker :placeholder="placeholder" :value="value" :type="type" format="yyyy-MM-dd" value-fo...

7057 5 0

vue element 时间戳

element 表单重置无效 resetForm resetFields

木灵鱼儿 5年前 vue 项目实战

element 表单重置无效 resetForm resetFields

这个原因是因为没有设置prop，需要设置一个prop即可。个人测试，form的rules绑定一个空的{}对象，prop随便设置，也是可以使用的，表单重置正常。//重置表单 resetForm(formName) { this.$refs[formName].resetFields(); },

5044 0 0

vue element 表单重置

vue 环境变量

木灵鱼儿 5年前 vue 项目实战

vue 环境变量

环境变量的使用，一般就是替换一下api的url链接，或者是一些其他设置。比如：本地测试的时候，你使用的api链接是test.xxx.xxx；而正式上线后，要求改为:formal.xxxx.xxx这样的话，如果你不使用环境变量，每次打包的时候都需要手动修改默认的api地址段。非常麻烦，如果你有更多的需求，比如有好几个api应对不同的平台，哦豁，那就真的吐血。如果使用了环境变量，我们只需要创建一个env文件，然后设置一个固定的值，打包的时候指定使用该env文件，api的获取自动拿到env文件里面设置的值，这样就不用每次都要手动修改了。知识点1. 文件名的命名.env文件是存放在项目根目录，和...

5034 0 0

vue 环境变量 env

element ui 自定义主题按需导入样式 yarn

木灵鱼儿 5年前 vue 项目实战

element ui 自定义主题按需导入样式 yarn

最近发现了element主题的一个知识点，应该可以方便大家。前提项目里的组件都是按需导入，然后要求使用自定义主题，但是设计师只给了一个官方在线主题生成工具生成的主题zip包。这个主题压缩包打开发现只有一个index.css，一个font文件夹，一个config.json文件。css文件大概会有200kb以上。而我们的按需引入是引入一个组件，就会引入对应的样式文件，他不会一口气引入所有的样式，但是如果要使用自定义主题，index.css又不得不引入，导致按需引入达不到理想状态。我们现在就要解决这个css的问题。思路打开config.json文件，你可以看到一些键值对，仔细看一下，你可以发现...

7722 0 2

vue yarn element

axios 拦截器登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

木灵鱼儿 5年前 vue 项目实战

axios 拦截器登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

最近遇到如题的一个需求，因为很常用，所以我把它记录下来，方便以后使用。流程用户正常使用时，或者后台刷新了缓存，导致登录超时或者失效，前端api请求得到一个信息，比如code=10010，那么就表示用户登录信息失效了，前端页面就需要提示用户登录失效了，需要重新登录。用户点击确认后，我们删除本地token，然后路由跳转。跳转之前我们需要记录当前的路由，这样用户登录成功后可以跳转回来，体验极好。233...流程示意：登录失效 --> 前端api请求时得到code=10010 --> 弹出提示窗口 --> 用户点击重新登录 --> 清除token --> ...

6607 0 0

login vue router

vue 去除谷歌浏览器对阻止touch事件默认行为的警告提示 Added non-passive event listener to a scroll-blocking

木灵鱼儿 5年前 vue 项目实战

vue 去除谷歌浏览器对阻止touch事件默认行为的警告提示 Added non-passive event listener to a scroll-blocking

超烦有没有，触发一次事件它就提示一次，洁癖的我今天就告诉你们怎么处理掉这个问题。警告提示 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事件你阻...

1.1w 0 0

vue 谷歌浏览器 touch

vue 去除谷歌浏览器对阻止touch事件默认行为的警告提示 Added non-passive event listener to a scroll-blocking

git永久删除文件或文件夹并删除历史记录同步到远程仓库

木灵鱼儿 5年前 Git 笔记

git永久删除文件或文件夹并删除历史记录同步到远程仓库

删除文件需要注意一点，就是你当前的项目，没有任何文件在待提交上，或者暂存区，有的话如果不重要你可以取消掉，或者先提交一次。让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...

5012 0 0

git 永久删除删除

javascript 拼接两条正则或多条正则

木灵鱼儿 5年前 JavaScript

javascript 拼接两条正则或多条正则

今天遇到一个问题，就是在使用mock模拟本地api请求的时候，因为做了一个全局配置文件，配置文件里面有一个devUrl属性，这个属性是本地的url地址，所以我就想着，让mock那边自动将devUrl和api地址进行拼接。但是api地址段不一定只是字符，有可能是正则。所以，我们需要进行拼接正则。知识点1.如何获取正则的匹配的那段文本?也就是/[a-z]/ig中我们怎么拿到[a-z]，因为这个内容是自定义的，你不知道他会是什么内容。这里我们就需要了解到reg对象的source属性：RegExpObject.sourcesource就可以直接返回给我们模式匹配所用的文本/[a-z]/ig.so...

6154 0 0

正则拼接正则修饰符

vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy

木灵鱼儿 5年前 vue 项目实战

vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy

跨域一直是很烦人问题，不过好现在现在跨域，大部分都是肛后端，后端设置CORS信息即可。但是也有少部分，可能前端能完成的事前端搞定就行了，懒得麻烦后端，这种情况一般都是进行反代。使用场景后端提供了一个在线api地址，但是该地址段和本地localhost不在同一域名下，所以产生了跨域。配置反代 proxy这种情况，我们的vue-cli提供了一个很好的功能，反代。首先我们需要找到vue cli的配置文件：vue.config.js，他存在项目的根目录，和package.json同级，如果没有，手动创建即可，只是一个js文件而已。打开文件填入以下信息：vue.config.jsmodule.ex...

5159 1 0

跨域 vue vue cli

vue cli3-cli4 自定义路径别名

木灵鱼儿 5年前 vue 项目实战

vue cli3-cli4 自定义路径别名

有时候我们可能经常需要对某一些模块进行引用，这些模块虽然都分文件夹了，但是他们都有一个共同的特点，就是前缀路径是相同的。比如：import Header from "@/components/default/Header"; import Sidebar from "@/components/default/Sidebar";@/components/default这段是相同的，如果文件目录再深一些，这段代码可能在编辑器里无法一行显示了，相对来说，对于代码整体，不是很友好，所以我们可以自定义一个路径别名。@这个别名我们都知道，他是表示src目录的，...

4090 0 0

vue cli3 cli4

Function 函数

木灵鱼儿 5年前 ES6

Function 函数

函数默认参数es5无法设置默认参数，只能通过函数内部先进行判断，如果没有参数则设置一个值。function test(x,y){ x = x || "hello "; y = y || "word"; console.log(x+y); } test(); //hello word这样写的话会有一个问题，就是如果我就要参数为空，就会出现问题test("","test"); // hello test所以我们还需要加一个判断function test(x,y){ x = typeof x...

4090 0 0

function es6

Number 类型

木灵鱼儿 5年前 ES6

Number 类型

二进制和八进制表示法es6提供了新的表示方法：数字：503二进制111110111 //es5 0b111110111 //es6八进制767 //es5 0o767 //es6也就是加了个前缀，二进制前缀是：0b，八进制前缀是：0o，后面的字母大写也是可以的，都一样。isFinite()和isNaN()is开头一般都是用于判断的，这两个方法为Number对象新增的两个方法， isFinite用于判断数字是否为有限的数字，isNaN就判断值是否为NaN需要注意的是，这两个方法和以前的方法不同，他们不会先转换值为number类型再进行比对，而是直接判断，不为数字...

4321 0 0

number Math Integer

fieldset元素宽度撑开的问题

木灵鱼儿 5年前 CSS

fieldset元素宽度撑开的问题

fieldset这个元素，估计用的人很少吧，或者说现在使用fieldset情况已经很少了，大部分都是使用其他元素模拟这个元素的ui。今天我碰到一个很奇怪的现象。fieldset里面的元素，他不会产生横向滚动条，哪怕我设置了外部所有父元素的宽度为100%，overflow-x: auto;里面的子元素，如果比如pre这种代码块，不换行的，他会一直往右延伸，也就是超出原来的宽度，把fieldset撑的非常宽。但是所有的父元素都是block，按道理宽度是自己占满不会超出的。找了半天，理解出这么一段解释：fieldset默认是以block方式解析的，也就是宽度是按照100%占满，但是他的默认cs...

5107 0 0

宽度 fieldset

typecho 超完美上一篇下一篇文章加文章缩略图

木灵鱼儿 5年前 Typecho博客教程

typecho 超完美上一篇下一篇文章加文章缩略图

之前写过一篇typecho上一篇下一篇的文章，但是当时是对官方的代码进行小改，虽然文章标题，链接都能获取到，但是没法获取到更多，包括文章缩略图。为此我是绞尽脑汁啊，还参考了一些有这种效果的作品，发现，不行，没有我想要的效果。他们的效果都是获取文章的自定义字段，也就是和自定义文章缩略图的那种路子，你只有设置了，他这里才能显示，他不能自动去获取，有的好像连个随机不够做吧。终于，有一天晚上，我一时兴起，想解决下这个问题，于是有了这篇文章，首先我们需要两段代码，这两段代码我是通过网上的代码进行修改的，去掉了一些部分。[hide]获取文章上一篇，下一篇cid/** * 显示上一篇 * * 如果没有...

8.7w 0 94

木灵鱼儿

vue 路由跳转使用新建页面打开

elment ui el-backtop使用教程

vue cli4 预渲染生成静态html文件，seo优化，prerender-spa-plugin

centos 8 ssh连接wifi教程

vscode 自定义代码补全

vue cli4 配置静态cdn资源

vue cli4 lodash库按需引入

vue cli4 文件打包分析

js 函数注释

vue cli3-4 绑定图片方法大全

图片upload组件，本地上传预览，无需传到服务器即可预览图片

element 时间组件转时间戳

element 表单重置无效 resetForm resetFields

vue 环境变量

element ui 自定义主题按需导入样式 yarn

axios 拦截器登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

vue 去除谷歌浏览器对阻止touch事件默认行为的警告提示 Added non-passive event listener to a scroll-blocking

git永久删除文件或文件夹并删除历史记录同步到远程仓库

javascript 拼接两条正则或多条正则

vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy

vue cli3-cli4 自定义路径别名

Function 函数

Number 类型

fieldset元素宽度撑开的问题

typecho 超完美上一篇下一篇文章加文章缩略图

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

vue 路由跳转使用新建页面打开

elment ui el-backtop使用教程

vue cli4 预渲染生成静态html文件，seo优化，prerender-spa-plugin

centos 8 ssh连接wifi教程

vscode 自定义代码补全

vue cli4 配置静态cdn资源

vue cli4 lodash库 按需引入

vue cli4 文件打包分析

js 函数注释

vue cli3-4 绑定图片方法大全

图片upload组件，本地上传预览，无需传到服务器即可预览图片

element 时间组件转时间戳

element 表单重置无效 resetForm resetFields

vue 环境变量

element ui 自定义主题按需导入样式 yarn

axios 拦截器 登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来

vue 去除谷歌浏览器对阻止touch事件默认行为的警告提示 Added non-passive event listener to a scroll-blocking

git永久删除文件或文件夹并删除历史记录同步到远程仓库

javascript 拼接两条正则或多条正则

vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy

vue cli3-cli4 自定义路径别名

Function 函数

Number 类型

fieldset元素宽度撑开的问题

typecho 超完美上一篇下一篇文章加文章缩略图

最近评论

博客文章RSS订阅

博客评论RSS订阅

vue cli4 lodash库按需引入

axios 拦截器登录超时或失效，删除token并跳转Login页面，并且记住跳转前path，登录成功后跳转回来