凉爽爽爽爽爽爽爽爽爽-优快云博客

原创解决 webpack5 打包 css 背景图片问题

现在我在src/css/style.css文件中，设置全局的图片：/* 设置一张背景图片 */body { background: url('../img/image.jpg');}在index.js文件中引入该css文件：// 导入 css 文件import './css/style.css'来看webpack.config.js的配置：// 导入 path 的 resolve 模块，进行路径拼接const { resolve } = require('path'..

2022-03-31 08:17:06 1896

原创渲染器 render

最近在看《vue.js 设计与实现》，看到了虚拟 DOM 这里，做了个笔记文章目录1、VNode虚拟DOM节点2、render工作原理3、代码实现1、VNode虚拟DOM节点虚拟DOM节点如下：const vnode = { tag: 'h2', props: { class: 'active', data: 'text', onClick: () => alert('Hello Render!') }, children: 'Click Me!.

2022-03-17 19:26:53 1431

原创 vue3 源码的 diff 算法

我看的是 vue3.2.31 版本的源码，diff 算法具体的位置在 packages/runtime-core/src/render.ts 文件中，源码中一些部分我已经做了注释文章目录1、Vue源码对于key的判断① 没有key的操作（源码）Ⅰ. 没有key的过程如下② 有key执行操作（源码）Ⅰ. 有key的diff算法如下1、Vue源码对于key的判断下面是patchChildren方法（进行新旧VNode节点比对）的源码，其位置在vue3源码（我看的源码是vue3.2.31版本）的：p.

2022-03-17 16:46:19 1864

原创 vue2 与 vue3 虚拟列表实现

文章目录1、概述2、计时3、JavaScript线程4、分片加载5、vue-virtual-scroll-list6、自己实现vue虚拟列表① vue2Ⅰ. 项目搭建Ⅱ. 虚拟列表制作② vue3Ⅰ. 项目搭建Ⅱ. 虚拟列表制作1、概述一般长列表用在后端传递大量数据，要求前端进行展示的情况先来看看原生的一个加载大量数据的一个情况：<div id="container"></div><script> // 演示大量 DOM 加载时的缓慢问题，也就是“

2022-03-16 16:50:27 6141 4

原创 pinia 的使用（四）—— getters

文章目录1、Getters① getter 声明与使用② 将参数传递给 getters (回调函数)③ getter中的this④ 访问其它getters⑤ 访问其它容器的actions 或getter1、Getters① getter 声明与使用Getter 完全等同于 Store 状态的计算属性；Getters 函数的第一个参数是 state 对象；在src/store/index.ts文件中去写一个getters，来体验一下：import { defineStore } from

2022-03-15 19:03:55 14951

原创 pinia 的使用（三）—— actions

文章目录1、状态操作 actions① 状态更新② 重置状态 $reset③ 跨容器调用④ actions 的操作⑤ 注意点1、状态操作 actionsactions 可以通过完全输入（和自动完成 ✨）支持访问整个容器实例。actions 是异步的，可以在其中等待任何 API 调用甚至其他 actions 。① 状态更新首先在src/store/index.ts文件中的pinia实例中，创建一个actions方法：import { defineStore } from 'pinia' //

2022-03-15 19:01:33 15614 1

原创 pinia 的使用（二）—— state

文章目录1、Pinia 基础应用① 项目搭建② 安装③ 初始化配置2、定义和使用 Store① 定义Store② 使用 Store③ 解构 state 数据1、Pinia 基础应用① 项目搭建使用vite初始化项目：npm create vite@latest创建项目名：vue3-ts-pinia选择项目框架：vue选择项目语言：vue-ts进入到创建的项目目录下，安装依赖：npm install启动项目：npm run dev② 安装使用yarn安装：yarn add pini

2022-03-15 18:02:46 3116

原创 pinia 的使用（一）—— 基本介绍

官网地址：https://pinia.vuejs.org/文章目录1、Pinia 介绍① 核心特性② 核心概念Ⅰ. stateⅡ. gettersⅢ. actionsⅣ. **提示：Pinia 中没有 mutations。**③ 基本示例④ Pinia vs Vuex⑤ 关于名字⑥ 关于作者2、Pinia 基础应用① 项目搭建② 安装③ 初始化配置1、Pinia 介绍一个全新的用于 Vue 的状态管理库。下一个版本的 Vuex，也就是 Vuex 5.0。Pinia最初是一个实验，目的是在.

2022-03-15 17:56:35 3887

原创 node 中使用 crypto 模块的 md5 加密

最近学习到了 node，然后在做用户注册的时候，进行密码的加密，遇到了一点的问题在 node 中自带一个 crypto 模块，这个就是用来进行密码加密的模块，官网文档：http://nodejs.cn/api/crypto.html这个地方我想要使用 md5 进行加密，做法其实很简单，具体代码如下：// 封装的加密的函数const crypto = require('crypto'); // 导入 node 的 crypto 库（node 自带）const md5password = (pa.

2022-02-02 10:11:36 2138 5

原创安装 MySQL 最新版本

目前我这个时间点， MySQL 的最新版本是 8.0.27文章目录1、下载 MySQL2、安装 MySQL1、下载 MySQL下载地址：https://dev.mysql.com/downloads/windows/installer/8.0.html根据自己的操作系统下载即可；推荐大家直接下载安装版本，在安装过程中会配置一些环境变量；Windows 推荐下载 MSI 的版本；Mac 推荐下载 DMG 的版本；这里我安装的是 MySQL 最新的版本：8.0.27（不再.

2022-01-10 08:23:03 1438

原创解决小程序中 swiper 轮播图高度问题

在小程序中的 swiper 标签，会有一个自己固定的高度 150px，但是我们实际希望这个轮播图的高度可以动态改变，不然在不同的设备上都是 150px 的高度，会出现样式的问题。这篇文章我就来解决该问题文章目录1、概述2、解决3、优化1、概述小程序给轮播图标签设置了一个固定的高度 150px，这个样式在大屏幕的设备上看起来并不是很明显，但是如果换成了 iphone5 这种小屏幕的机型的话，图片的高度并不会达到 1.

2022-01-01 12:13:59 1852

原创小程序 video 组件在真机上固定在顶部样式失效

这篇文章，是我在开发小程序的时候，在一个页面中想要实现，上面是一个固定的视频区域，下面试可以滚动的其他信息区域。但是小程序的 video 标签，使用 fixed 或者是 sticky 进行定位在顶部后，在真机上测试会有问题。下面我就来解决这个问题目录文章目录目录1、概述2、解决方法1、概述我想做的样式是，让 mv 视频固定在页面的顶部，下面的信息区域可以进行上下滚动，但是如果直接渲染的话会存在问题，在真机上调试，.

2021-12-31 16:22:48 943

原创 node 动态创建文件夹

这是一个功能函数，直接在需要的文件中进行引入调用即可// 动态新建文件夹的方法const fs = require('fs'); // 导入 fs 模块const path = require('path'); // 导入 path 模块exports.mkdirs = (pathname, callback) => { // 需要判断是否是绝对路径（避免不必要的 bug） pathname = path.isAbsolute(pathname) ? pathname : pat.

2021-12-24 08:46:58 1297

原创从零搭建 Typecho 个人博客及上传到服务器上

这里我将从零开始搭建 Typecho 并且将其发布到服务器上（这里服务器我用的是阿里云服务器，并且使用的是宝塔面板进行配置）目录文章目录目录1、起步2、在宝塔上创建一个网址3、上传 Typecho 到服务器上4、配置主题5、撰写文章6、完结散花1、起步首先登录宝塔，需要安装两个软件，点击左侧的软件商店按钮搜索 mysql 和 php，选择安装。MySQL 选择安装第一个即可，安装需要一段时间，不要退出面板；然后非常重要的一步，安装 php 要选择 7.3 版本。因为 7.4 及其以上的版.

2021-12-17 13:22:34 1600

原创阿里云 + 宝塔面板部署项目保姆级教程

这篇文章我将讲解一下阿里云+宝塔面板，如何部署一个项目文章目录1、阿里云这边的配置1、阿里云这边的配置首先打开阿里云的控制台点击左上角的橙色按钮，然后找到里面的云服务器 ECS选项...

2021-12-03 16:38:19 3447

原创使用 node 调用支付宝支付接口

这篇文章中，我将简单介绍下在 node 中使用支付宝沙箱。文章目录1、起步2、生成密钥3、初始化项目4、代码编写5、支付商品6、结束1、起步先注册支付宝开放平台账号：https://open.alipay.com/登陆成功后，点击进入管理中心进入成功后，选择控制台选项，然后点击研发服务进入。在这个沙箱应用界面中等待着，待会再过来操作2、生成密钥这时候还需要下载一个生成支付宝支付密钥的应用，下载地址：https://opendocs.alipay.com/common/02k.

2021-11-28 21:54:44 2284 1

原创 hexo —— 搭建个人博客保姆级教程

之前我去找过很多大佬使用 hexo 搭建博客的文章，大多是 18 19 年的文章，因为这期间 github 发生了下更新，有些东西不配置的话会报错。在这篇文章中，我将会带领大家搭建一个属于个人的博客，只要电脑上安装了 node 和 git 的话，就会轻松搞定。文章目录1、起步① 需要安装的工具② 安装 hexo2、开始① 搭建 github 仓库② 生成 SSH Keys③ 本地生成 hexo 博客④ 将博客发布到网络上⑤ 在互联网访问自己的个人博客3、结语1、起步① 需要安装的工具 .

2021-11-28 19:36:24 2419 3

原创 websocket + node 手把手实现简陋聊天室

在这一篇文章中，我将会先对 websocket 做一个简单的介绍；然后使用 node + websocket 做一个极其简陋的聊天室；最后在将这个简陋的聊天室通过 websocket 框架 —— socket.io 进行制作。文章目录1、认识 websocket① 什么是 websocket② 特点③ 补充技术2、直接上手① 使用浏览器 + websocket + node 做一个简单的聊天室Ⅰ. 服务端Ⅱ. 客户端Ⅲ. 效果查看Ⅳ. 完整代码② 使用 socket.io 框架制作一个聊天框1、认.

2021-11-27 22:19:19 2450

原创用户登录和权限认证之 —— JWT

这里我会讲解 web 前端常用的用户登录和权限认证的方法 —— JWT，有错误希望指正文章目录1、Cookie + Session① 概述② 流程图③ 校验步骤④ 存在的问题2、JWT① 流程图② 校验步骤③ 解读 token 中存储的内容④ 对 Swagger 一个功能的补充3、总结1、Cookie + Session 在讲解 JWT 之前，我先介绍一下最简单的用户登录和权限认证方式：Cookie + Ses.

2021-11-23 15:46:19 3528 1

原创 vue2 与 vue3 之组件间数据双向绑定的区别

下面的文章中我对 vue2 和 vue3 中组件间数据双向绑定显示做了简单的说明，如果感觉看理论太枯燥的话，可以直接看代码实践，没有什么是比动手实践更有奇效的了。文章目录1、vue2 中的组件间数据双向绑定① 对 vue2 组件间数据双向绑定进行简单的说明② v-bind.sync③ 上代码实践④ 效果图2、vue3 中的组件间数据双向绑定① 对 vue3 中的变动做一下简单的说明② 上代码实践③ 效果图3、总结1、vue2 中的组件间数据双向绑定① 对 vue2 组件间数据双向绑定进行简单的说.

2021-11-17 14:52:09 1027 1

原创深入 JavaScript 之执行上下文与执行栈【一】

这个笔记系列我将会对 JavaScript 中，执行上下文与执行栈做一个深入的探究，若有不对的地方希望各位指正。开始前，进行下简单介绍：这一系列的笔记，都是在浏览器环境中运行代码；声明变量都是通过 var 关键字，并未讨论 let、const 关键字的声明情况。文章目录1、执行上下文① 概述② 分类③ 执行上下文中存储的内容2、执行栈① 概述3、全局执行上下文① 概述② GEC（全局执行上下文）中存储的内容② window 下的全局执行上下文4、函数执行上下文① 概述② FEC（函数执行上下文）.

2021-11-17 12:28:04 566 1

原创 Object is possibly undefined

这是因为我设置的 user 对象，因为给它设置了一个 UserProps 类型，但是可能这个不是一个对象类型，而是 undefined，那么我在调用 user.isLogin 其中的属性的时候，要先判断是否是一个对象在这里插入图片描述正确的代码如下：后面再遇到这个问题的时候，先对类型进行一次判断...

2021-11-05 15:34:41 3846

原创 Cannot find name ‘require‘. Do you need to install type definitions for node?

1、安装 npm i --save-dev @types /node2、在根目录下的 tsconfig.json 文件中，给 compilerOptions 对象配置一个 “types”: [ “node” ] 属性3、如果是在 ts 文件中使用 require 报错的话，就在整个文件的最开始写一句话：declare var require: any4、如果是在 vue 文件中使用 require 报错的话，就在 export default defineComponent({}) 前面写一句话：d

2021-11-04 19:50:46 6733 1

原创 [Vue warn]: ＜Suspense＞ slots expect a single root node.

这个报错是 vue3 前段之间新添加的，就是如果在 Suspense 标签中插入多个组件的话，需要给这多个组件包裹一个根标签，如下的形式：<Suspense> <template #default> <div> <async-show /> <dog-show /> </div> </template> <template #fallback> &lt

2021-11-04 15:46:29 3187

原创 entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

这是因为 webpack 打包后的文件太大导致，所以手动设置打包文件的大小限制需要输入这一段代码：performance: { // 入口起点的最大体积 maxEntrypointSize: 50000000, // 生成文件的最大体积 maxAssetSize: 30000000, },/* webpack 的配置文件 */// 引入 path 模块中的 resolve 方法const { resolve } = require(.

2021-10-27 11:15:37 5020

原创解析 webpack 打包后出口文件中的代码

通过 webpack 打包后，会生成一个 dist 目录，里面有一个 main.js 文件，打包后端所有代码，都会包放入到这个文件中，这里我简单解析一下该文件中的代码初始化项目：npm init -y创建 src 文件夹，index.js 文件，data.json 文件打包文件：webpack ./src/index.js --output-path ./dist --mode=development来看导出的文件 main.js 里面的代码：解析这里面代码的含义：整个代码是一个 .

2021-10-22 10:17:12 498 1

原创解决 npm 发布包出错问题

npm publish 报错【you or one of your dependencies are requesting a package version that is forbidden by your security policy】npm ERR! code E403npm ERR! 403403 Forbidden - PUT https://registry.npmjs.org/dj-dingding-auth - Forbiddennpm ERR!403 In most case.

2021-10-12 11:05:26 4249 1

原创对js原型和原型链的理解

学习到 JavaScript 原型这个地方的时候，最开始是比较懵的状态，今天早上起来看了下红宝书中对于原型的解释，慢慢的也就有了些了解，但是解释的比较官方。接下来，我会把自己的理解分享下来，尽量用通俗易懂的话来描述。如果有什么不对的地方，希望大家指正。1、原型1.1 prototype JavaScript 中，当我们创建一个函数的时候

2021-08-11 14:51:29 3420

原创 vue 程序执行的过程

首先是 vue 在 runtime-compiler 模式下进行执行的过程通过 runtime-compiler 创建的项目，会经过上述图片中的 vue 程序运行过程，但是用 runtime-only 创建的项目，会直接从 render 函数将挂载的 App 变成 virtual dom(虚拟dom)，性能更加高效！而且 vue 的代码量更少！因此 runtime-only 小的 6KB 就是少了执行前两个步骤的代码。让我们看下一下这两种不同的方法创建的 vue 项目中 main.js 文件的区别吧

2021-08-10 13:33:55 2169 2

原创 vue 的响应式原理浅谈

对学习到的 vue 的响应式原理做了一些简单的总结，还需继续学习vue 的响应式原理就是数据劫持 + 发布者订阅者模式创建一个 vue 的时候，最开始是从 new Vue 开始执行，在 new Vue 里面有 el 挂载实例对象和 data 响应式数据。当创建好 vue 实例之后，他会在整个响应式流程里面，走不同的流程。如下图，vue 实例中的 el 会走下面的流程，data 会走上面的流程，下面是 vue2 的一个响应式原理的流程， vue3 的响应式主要是基于 ES6 的新特性 Proxy 实现

2021-08-10 13:14:19 131

原创 Vuex 报错之 [vuex] unknown mutation type: handlePower

这里我才坑半天！！！如果你有设置一个类型常量，如下那么你在 index.js 里面导入这个这个类型常量的时候，注意我红色框框里面，不能用 {} 将 mutations、actions、getters 包裹起来

2021-08-06 10:19:06 413

原创在 vue3 使用 Ant Design

先安装：npm i --save ant-design-vue@next然后在 main.js 文件中引入之后去官网找自己想要的组件：Ant Design Vue下面知识我的一个小例子，用法和 element-ui 是一样的，找到自己想要的组件，直接放入页面中就可以...

2021-08-03 15:17:20 575

原创 vue 项目中 base.css + normalize.css

这两个 css 样式文件，放在同一个文件夹下base.css@import "./normalize.css";/*:root -> 获取根元素html*/:root { --color-text: #666; --color-high-text: #ff5777; --color-tint: #ff8198; --color-background: #fff; --font-size: 14px; --line-height: 1.5;}*,*::befor

2021-08-03 12:14:36 893

原创 vue-cli4 手动给文件起别名

第一种：找到 vue.config.js 在该文件中配置，没有这个文件的话，就在根目录下创建一个 vue.config.js 文件，然后配置如下需要引入 path 模块，没有引入的话安装一下： npm install path --save以后找文件就可以这么找：当然配置完成后要重新运行下项目第二种：找到 node_module 文件夹，找到下面的 @vue 文件夹，找到下面的 cli-service 文件夹，找到下面的 lib 文件夹，找到下面的 config 文件夹，找到下面的 base.js

2021-07-30 11:07:27 299

空空如也

空空如也