木灵鱼儿

木灵鱼儿 3年前 webpack5

webpack5 初始化《JJ》主题下部

图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙，一张嘴就说推荐使用url-loader解析器，但是闭嘴不提url-loader是基于file-loader的，所以用url就必须两个都装，否则一旦你设置了url的limit限制文件大小，文件超出设置得大小后，就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...

2489 0 0

webpack

webpack5 初始化《JJ》主题上部

木灵鱼儿 3年前 webpack5

webpack5 初始化《JJ》主题上部

初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装，省事yarn global add webpack webpack-cli如果不适用全局安装，直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本，这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...

2886 0 0

webpack

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

木灵鱼儿 3年前 JavaScript

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

原理也没啥好藏着掖着的，就是为了保证密码难度，开头的字符一定是满足安全需要的，比如要求大小写数字加特殊字符，那么开头四位就一定是：大写一位、小写一位、数字一位、特殊字符一位；然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度：hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...

4243 0 0

密码 javascript 随机密码

vue骚操作之重置data对象

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

vue骚操作之重置data对象

简单说下使用场景，你使用一个dialog组件，弹窗时要加载数据，关闭后要清理数据，以防下次使用报错或者数据残留，如果在data中写了过多的属性，或者层级很深的引用对象啥的，为了方便还原，你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是，这样实在是太难了，有没有一种简单的方法，就像表单重置一样。答案当然是有的：onClose() { Object.assign(this.$data, this.$...

2894 0 0

data vue 重置

base64转file文件方法

木灵鱼儿 3年前 JavaScript

base64转file文件方法

使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。我的想法是转成上传文件的那种file格式。方法如下：/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...

3485 0 0

File javascript blob

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

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

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

按需加载，在gzip面前根本不值一提，当然，该优化还是要优化，所以在使用了lodash-webpack-plugin插件后，在使用个别方法后就会出现问题，比如：unionBy;原因按需加载的插件，它的按需就是将你调用的方法单独提取出来，但是，如果提取的方法里面还用了其他方法，他可能无法识别，导致方法缺失，所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

3643 0 1

lodash 按需加载报错

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

木灵鱼儿 3年前 nuxt

nuxt 加快编译速度

nuxt嘴上说很快，但是其实热编译是很慢的，很墨迹，和vue cli这种对比起来，差了很多，经常改动一点东西想要看效果，编译要等一段时间。今天无聊去看了下nuxt模块库，看到这么一个插件：nuxt-build-optimisations有点牛皮，使用后，热编译速度肉眼可见的提升，官方的介绍说可以提升2-5倍的速度，实际测试中，冷启动速度没太大感觉，但是热编译速度确实是很满意。特此推荐！用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nux...

4627 0 0

nuxt 编译

自己照着别人教程写的canvas操作类

木灵鱼儿 3年前 JavaScript

自己照着别人教程写的canvas操作类

预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug！！！ */ class Chart { constructor(options) { const defaultOptions = { el:...

2154 0 0

canvas javascript class

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

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

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

问题当通过Tooltip组件，click事件触发抽屉或者弹窗功能时，Tooltip的hover效果，会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题，导致元素的事件监听不到鼠标离开，导致关闭弹窗后，浏览器又自动选中了。所以我的解决办法很简单，找到那个触发hover效果的dom元素，对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

4821 0 0

element dialog Tooltip

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

木灵鱼儿 3年前 ·

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

主要问题还是因为样式的问题，实际上嵌套的el-form如果正确配置了数据，如：model、rules、prop，那么如果rules里面没有配置必填，那么是不会有必填的效果的，只是因为受到父组件必填的样式影响。我们先看下官方的选择器：.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:befor...

3414 0 0

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

木灵鱼儿 3年前 JavaScript

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

json在格式化对象是，如果是普通的键值对对象还是没有问题的，但是如果他的值是一个函数，在格式化之后，函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你！") } }; const b = JSON.stringify(a);当你输出变量b的时候，你得到的会是："{\"name\":\"我爱你\"}"fn不见了！引用JSON.stringify()方法描述中的一段解释：undefined...

4794 0 0

对象函数 json

nuxt 一文读懂@nuxtjs/axios的用法

木灵鱼儿 3年前 nuxt

nuxt 一文读懂@nuxtjs/axios的用法

在nuxt中，有一个专门的axios版本：@nuxtjs/axios；但是由于nuxt的文档，或者说是资料不是很齐全（零散），初步了解后觉得这个插件并不是很方便，很多时候，我们都是模块化的axios写法，在使用@nuxtjs/axios时，会发现有点束手束脚，于是转而放弃使用，而是单独引入axios，然后一顿操作。当我们单独封装axios的时候，有没有这种想法：报错了能不能跳转到nuxt的错误页面？；但是实现时发现，除了在asyncData这些方法里面可以解构到error对象然后利用它跳转，好像在单独的一个js文件里面，没办法直接跳转。但是，如果我们使用@nuxtjs/axios，那么我...

8363 0 14

proxy 拦截器 nuxt

vue 横向滚动组件

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

vue 横向滚动组件

最近遇到这么一个需求，就是内容一行显示，滚轮滚动的时候，进行横向滚动。本来想尝试下css能不能做到，最后发现，即便改变了流的布局，并不能改变滚动条的方向，最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候，所以触摸事件是不考虑的，触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌：火狐滚动事件：DOMMouseScroll谷歌滚动事件：mousewheel其中DOMMouseScroll的event对象，他有一个detail字段，向下滚动是3，往上滚动是-3mousewheel的event对象是deltaY，往下滚动是125，往上是-125，具体数值记不清了...

7055 0 0

vue 横向滚动 DOMMouseScroll

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

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

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

莫名其妙就提示css冲突和顺序问题，而且组件里面的样式和class类名完全不相干，不知道怎么就给你冲突了。顺序都有点莫名其妙，这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然，反正就是大量的警告，18年就有人提出这个问题了，唉，头疼issues目前普遍的解决办法就是忽略这个警告，因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹，插入以下代码：module.exports = { css: { extract: { ignoreOrder: true }, }, }保存，然后重新打包，不会再提示冲突和顺序问题了

2902 0 0

警告 vue vue cli

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记判断对象中是否存在某个属性

木灵鱼儿 3年前 JavaScript

做个笔记判断对象中是否存在某个属性

本来是一个很简单的需求：const a = { b:1 }本来我的需求是判断，这个a对象里面b是否存在，但是b的值不确定，他可能是布尔值false，也可能是数字0，或者是空字符。那么if(a.b)就不太行了，一般来说，老前端一般都是用in 操作符。"b" in a; //true但是es6后，一般来说，不建议这样使用的，同时不建议的还有delete操作符。于是问了下群友，因为我记得es6有那么一个方法，可以判断一个对象的属性是否存在，并且不会去查prototype上的内容。但是我忘了啥名字来着！const a = { b:1 } a.hasOwnPrope...

5076 0 7

javascript hasOwnProperty

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

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

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

这个奇葩的问题，搞得我人都傻了，怎么软件内置的浏览器不能上传文件呢？？？就离谱！一开始我以为是软件的安全限制，后来发现不对，为什么别人的网页可以上传？？[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept，就没办法限制文件类型了，只能前端js做判断，我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性，他是一个数组，表示允许上传的文件类型<script> export default { data(){ return { ...

8278 0 12

vue 内置浏览器上传文件

typecho 真的很简单的自定义评论列表

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

typecho 真的很简单的自定义评论列表

以前写过一个关于自定义评论的文章，时至如今来看，还是有很多不足的，昨晚再新写主题的时候，也重新写了一次自定义评论，嗯，有了新的理解，因为其实真的很简单，仔细阅读本篇文章，相信你会有收获的。[hide]自定义评论模板到底要怎么做很简单，可以理解为两步：编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会，其实就是因为官方的文档真的是，如果懂php的人，可能看了一两遍后明白了怎么回事，但是如果是小白入门，纯前端的童鞋，可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错，心累...因为，你不知道他要做什么，我编写了自定义模板函数threadedComment...

5.9w 0 115

typecho 评论自定义评论

目前前端下载文件的最佳实践

木灵鱼儿 3年前 JavaScript

目前前端下载文件的最佳实践

目前前端最佳的方案其实有两种：a元素下载iframe 无闪下载事实上这两种下载方式，其实都存在相同的一个问题，就是如果下载的文件是跨域的（不是同域名下的问题，或者其他原因）；并且这个文件浏览器可以直接打开的，比如：图片、文本文件。那么浏览器会直接打开文件，并不是触发下载，而如果下载的文件是安装包，压缩包zip这些，则是触发下载。这个问题就很头疼。a元素下载的缺点a元素下载，那么就必须设置download属性，这个属性可以接收一个参数，可以是带后缀的文件名，或者不带后缀。也可以为空，但是要设。不带后缀的话文件格式就会与下载的文件保持一致，如果带了格式后缀，可能导致下载的jpg文件，你设置为...

5431 12 0

javascript 下载文件 a

纯css来做表单校验样式

木灵鱼儿 3年前 CSS

纯css来做表单校验样式

css3新增了三个伪类：:required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过，表单元素和form表单都有的伪类:invalid 表示不通过，表单元素和form表单都有的伪类其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。所以，如果此时设置:invalid伪类样式，是不合适的。解决办法就是：使用:placeholder-shown...

3662 0 0

样式 css input

nuxt mixins全局混入

木灵鱼儿 3年前 nuxt

nuxt mixins全局混入

全局混入我考虑到可能会有多个混入，如果把混入的内容全部写在同一个js文件里面，那是非常混乱的，所以我采用模块化的写法，其实就是导入导出而已，一种方式。具体用法和全局过滤器一样，创建插件，激活插件。在plugins目录下创建mixins文件夹，mixins里面创建一个index.js作为入口文件，然后再创建一个modules目录，用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...

4261 0 0

vue nuxt mixins

nuxt filters全局过滤器

木灵鱼儿 3年前 nuxt

nuxt filters全局过滤器

nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器，我们需要写一个插件，并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...

4735 0 0

过滤器 filters vue

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

木灵鱼儿 3年前 nuxt

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

这是一个奇葩的报错，因为他居然是因为模板vue文件没有设置name导致的。也就是说，如果要解决这个问题，在提示的模板文件上设置name属性即可。layouts/default.vueexport default { name: "default", }问题解决。

6454 0 0

name nuxt 报错

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

木灵鱼儿 3年前 nuxt

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

出现这个问题，往往是因为浏览器中的虚拟dom树和服务端dom不一致产生的，为什么会不同，举个例子：我们v-if判断客户端是否存在localstorage.getItem("token")，但实际上服务端永远不可能拿到，因为localstorage是浏览器客户端才有的东西。那么服务端渲染的dom永远没有，你浏览器上又有了，那不是就产生冲突了。于是就会报这个错，但是并不会影响页面的渲染。解决的办法就是将这个v-if放到客户端才进行运行，nuxt提供了一个自定义标签：client-only表示在这个标签内的内容，只有有客户端才会渲染运行，这样就可以让虚拟dom保持一致，且不...

4426 0 0

虚拟dom nuxt 报错

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

木灵鱼儿 3年前教程

centos 不小心删除了安装源repo文件的救命稻草

折腾小主机的时候，不小心没备份成功，删除了repo安装源文件，导致现在yum干啥都报错，特别是，我没有安装wget，真的是叫天天不应，入地地无门。唯一的办法就是去别的地方拿一个相同版本的系统的安装源，要么重装。这时，我们就需要这根救命稻草了[hide]打开这个网址：阿里安装源找到你系统对应的版本，比如我是8.x的版本，我们就下载Centos-8.repo这个文件，下载完毕后上传到centos系统/etc/yum.repos.d目录下。上传前记得改名为：CentOS-Base.repo然后我们清理缓存，重建缓存yum clean all yum makecache完事搞定，yum又活过来了...

2905 0 0

centos 教程 yum

windows10 子系统ubuntu安装宝塔配置开发环境

木灵鱼儿 3年前教程

windows10 子系统ubuntu安装宝塔配置开发环境

我真的是被小主机给整疯了，不想再碰了，又准备回到虚拟机的行列，但是还用vw总感觉不合我意。docker安装看了下，确定了，不会用。于是打起来windows10的子系统的主意，虽然目前有一点瑕疵，但是问题不大。先开启功能控制面板 --- 程序和功能 --- 启用或关闭windows功能 --- 勾选：Hyper-v和适用于Linux的windows子系统下载最新的内核包：Linux 内核更新包下载完双击安装即可。安装完毕我们需要切换到wls2，打开PowerShell，输入以下命令wsl --set-default-version 2然后就是安装linux系统[hide]安装之前，以防万一...

3247 0 1

教程前端 windows10

木灵鱼儿

webpack5 初始化《JJ》主题下部

webpack5 初始化《JJ》主题上部

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

vue骚操作之重置data对象

base64转file文件方法

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

自己照着别人教程写的canvas操作类

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

nuxt 一文读懂@nuxtjs/axios的用法

vue 横向滚动组件

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记判断对象中是否存在某个属性

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

typecho 真的很简单的自定义评论列表

目前前端下载文件的最佳实践

纯css来做表单校验样式

nuxt mixins全局混入

nuxt filters全局过滤器

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

windows10 子系统ubuntu安装宝塔配置开发环境

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

webpack5 初始化《JJ》主题 下部

webpack5 初始化《JJ》主题 上部

javascript 生成随机密码，指定位数，难度（大小写、数字、特殊字符）

vue骚操作之重置data对象

base64转file文件方法

lodash按需加载使用unionBy打包后使用报错：t is not a function 的问题解决方案

nuxt 加快编译速度

自己照着别人教程写的canvas操作类

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

关于element 表单选项必填，然后嵌套一个el-form导致这个嵌套的全部都是必填的解决办法

JSON 格式化对象，对象中存在函数的解决办法，JSON格式化函数

nuxt 一文读懂@nuxtjs/axios的用法

vue 横向滚动组件

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

做个笔记 判断对象中是否存在某个属性

关于手机端软件内置浏览器无法上传文件的问题！微信内置浏览器无法上传文件！手机qq内置浏览器无法上传文件！

typecho 真的很简单的自定义评论列表

目前前端下载文件的最佳实践

纯css来做表单校验样式

nuxt mixins全局混入

nuxt filters全局过滤器

解决报错：Invalid component name layouts default.vue . Component names should conform to valid custom element name in html5 specification.

解决报错：The client-side rendered virtual DOM tree is not matching server-rendered content

centos 不小心删除了安装源repo文件的救命稻草

windows10 子系统ubuntu安装宝塔配置开发环境

最近评论

博客文章RSS订阅

博客评论RSS订阅

webpack5 初始化《JJ》主题下部

webpack5 初始化《JJ》主题上部

做个笔记判断对象中是否存在某个属性