Github图床搭建，结合Picgo与jsdelivr的免费cdn加速
话不多说 ，直接开整！
jsdelivr加速地址：
12https://cdn.jsdelivr.net/gh/Github用户名/仓库名@masterhttps://fastly.jsdelivr.net/gh/Github用户名/仓库名@master
注意：这两个地址偶尔不好使，自己看哪个好用用哪个。
创建一个GitHub仓库：
进入你的GitHub首页，在右上角你会找到一个➕，在下拉菜单中选取”New repository”选项
.fnmrwkztmgxu{}
按需填写相关信息，创建仓库：
获取一个GitHub的token用以picgo的身份验证，在你的GitHub主页，右上角点击你的头像，在展示的抽屉中选择”Settings”
然后把左侧选项框滑到最下面，选择”Developer settings”，再从左侧点击”Personal access token”下拉展开，选择”Tokens(classic)”，然后再点击右上角的”Generate new token”，选择”Generate new token(classic)”
按步骤填写 ...
为什么vue template中不用加.value?
vue3 中定义的 ref 类型变量，在 setup 中使用这些变量是需要带上.value 才可以访问的，但是在 template 中却可以直接使用。why？你可能会说 vue 自动进行 ref 解包了，那具体是如何实现的的？
proxyRefsvue3 中有个方法 proxyRefs，这属于底层方法，在官方文档中并没有阐述，但是 vue 里是可以导出这个方法！
例如：
12345678910111213141516<script setup lang="ts">import { onMounted, ref, proxyRefs } from "vue";const user = { name: "James", age: ref(18),};const _user = proxyRefs(user);onMounted(() => { console.log(_user.name); console.log(_user.age); console ...
工程化之.nvmrc 文件使用详解
前言
当开发多个项目时，每个项目运行环境要求的 node 版本不一样，那么我们就需要给每个项目指定 node 版本，也就是通过终端执行 nvm install 和 nvm use 命令去安装并切换版本。
但是每次都要在终端手动执行命令就很麻烦，特别是项目越来越多的时候，容易忘记切换版本或切换错版本，会导致项目启动不了或运行中有一些错误。
这就需要一个管理 node 版本的方法，自动切换 node 版本，这时 .nvmrc 就该上场了
.nvmrc 是什么
.nvmrc 的作用：便于切换 node 版本，保证多人开发环境的一致性
.nvmrc 是一个文件，文件内容非常简单，只有一个 nvm 可识别的 node 版本文本内容，比如: v12.18.2，这个文件应该放在项目根目录下，并且不应被 git 忽略
创建 .nvmrc 文件
打开终端，进入项目根目录执行以下命令，使用 nvm 可识别的版本号格式即可：
以下命令会将字符串填入指向的文件中并创建，当文件存在时，则会对文件进行重写
echo "12.18.2" > .nvm ...
Mac电脑安装nvm(node包版本管理工具)
方法一：通过Homebrew安装（推荐）
安装 Homebrew： 如果您还没有安装Homebrew，首先需要安装它。打开终端（Terminal.app）并运行以下命令：（官网地址：https://brew.sh/zh-cn/）
12341.官网提供的链接（没有vpn的话执行不成功）/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2.国内下载地址/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
按照步骤安装完成就可以了.
使用Homebrew安装 NVM： 安装完 Homebrew 后，接着使用以下命令来安装 NVM：
打开终端zsh，执行：
1brew install nvm # 执行完成就代表nvm已经安装了，但是还需要配置环境变量
配置环境变量：
...
Monorepo与pnpm
一、什么是pnpmpnpm又称 performant npm，翻译过来就是高性能的npm。
1.节省磁盘空间提高安装效率pnpm通过使用硬链接和符号链接（又称软链接）的方式来避免重复安装以及提高安装效率。 **硬链接**：和原文件共用一个磁盘地址，相当于别名的作用，如果更改其中一个内容，另一个也会跟着改变 符号链接（软链接）：是一个新的文件，指向原文件路径地址，类似于快捷方式 官网原话：
当使用 npm 时，如果你有 100 个项目，并且所有项目都有一个相同的依赖包，那么，你在硬盘上就需要保存 100 份该相同依赖包的副本。然而，如果是使用 pnpm，依赖包将被存放在一个统一的位置，因此： 1.如果你对同一依赖包需要使用不同的版本，则仅有 版本之间不同的文件会被存储起来。例如，如果某个依赖包包含 100 个文件，其发布了一个新 版本，并且新版本中只有一个文件有修改，则pnpm update 只需要添加一个新文件到存储中，而不会因为一个文件的修改而保存依赖包的所有文件。 2.所有文件都保存在硬盘上的统一的位置。当安装软件包时，其包含的所有文件都会硬链接自此位置，而不会占用额外的硬盘空间 ...
使用sequelize-cli管理数据库
安装
sequelize-cli 的依赖是 sequelize sequelize的依赖是mysql2 需要自己手动安装
123npm i sequelize-cli --save-devnpm i sequelizenpm i mysql2
查看版本
12npx sequelize-cli --versionnpx sequelize --version
查看所有命令
1npx sequelize --help
123456789101112131415161718192021222324252627282930313233Sequelize CLI [Node: 10.21.0, CLI: 6.0.0, ORM: 6.1.0]sequelize <指令>指令： 带db的都是操作数据库的指令 sequelize db:migrate 运行待处理的迁移 sequelize db:migrate:schema:timestamps:add 更新迁移表以包含时间戳 sequelize ...
使用 Docker 运行 MySQL
使用 Docker +Mysql使用Docker来运行MySQL。这样在 Windows 与 macOS 上，甚至在 Linux 服务器上，它们的运行环境都是一致的。
1.进入Docker官网后，https://www.docker.com/get-started/，直接下载安装。
2.配置中国镜像
123"registry-mirrors": [ "https://xelrug2w.mirror.aliyuncs.com"]
3.使用 docker compose
接着进入项目根目录中，新建一个文件，叫做docker-compose.yml。千万要注意，一定要在项目根目录中，放在其他地方会找不到的。然后将下面的配置复制进去，这就是MySQL的一个简单配置了。
123456789101112131415services: mysql: image: mysql:8.3.0 command: --default-authentication-plugin=mysql_native_password ...
在抖音小程序中实现类似 Pinia 的全局响应式数据状态管理
在微信小程序中实现类似 Pinia 的全局响应式数据状态管理抖音小程序作为一种轻量级的应用程序开发框架，具有自身的特点和限制。其中，全局状态管理是开发者常常需要面对的问题之一。在这篇博客中，我们将介绍如何在抖音小程序中实现类似 Vue.js 生态系统中的 Pinia 的全局响应式数据状态管理。
简介Pinia 是一个为 Vue.js 设计的全新状态管理库，通过利用 Vue 3 提供的响应式 API，提供了简洁而强大的全局状态管理解决方案。虽然抖音小程序并不直接支持 Vue.js，但我们可以借鉴 Pinia 的设计思想，在抖音小程序中实现类似的全局状态管理系统。
实现步骤1. 创建全局状态管理器首先，我们创建一个 store 文件夹，新建 index.js文件， 定义一个名为 Store 的类作为全局状态管理器。在该类中，我们可以定义状态、mutations、actions 等相关方法。
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253cla ...
vite性能优化之CDN加速
CDN 加速内容分发网络（Content Delivery Network，简称 CDN）就是让用户从最近的服务器请求资源，提升网络请求的响应速度。同时减少应用打包出来的包体积，利用浏览器缓存，不会变动的文件长期缓存。(不建议使用第三方cdn，这里做学习讨论使用)
采用CDN引入的弊端：1、可靠性：使用CDN引入外部模块意味着依赖于第三方服务商的可用性和稳定性。如果CDN服务商发生故障或者网络问题，可能会导致外部模块无法加载，影响网站的正常运行
2、安全性：使用CDN引入外部模块需要信任第三方服务商，因为模块实际上是从服务商的服务器上加载的。如果服务商被黑客攻击或者恶意篡改了模块的内容，可能会导致安全问题
3、性能：CDN服务通常会根据用户的地理位置选择最近的节点进行内容分发，这样可以减少网络延迟和提高访问速度。但是如果用户所在地区的CDN节点发生故障或者网络拥堵，可能会导致加载速度变慢甚至加载失败
4、版本控制：使用CDN引入外部模块可能会导致版本控制的问题。如果模块的版本发生变化，CDN服务商可能会立即更新节点上的内容，这样可能会导致网站出现兼容性问题或者功能异常
代码实现安装插件 ...
vue-cli4之手撸webpack骨架屏插件
一、实现webpack骨架屏 书接上文，由于在vue-cli4里面直接使用 vue-skeleton-webpack-plugin插件失败 （插件基于vue2开发），而项目是vue3开发，这就导致了不兼容，于是乎就开始了手撸…
二、骨架屏的由来：123单页面应用在现在的前端页面开发是越来越常见了。它的好处很多，坏处也很明显：就是首屏加载往往很慢，呈现一片空白的页面，这给用户的体验感是很差的。可资源的加载我们除了尽量地优化，也没有其他很好的办法了。为了解决这个体验感的问题，骨架屏应运而生。
三、骨架屏原理：12345678<html lang="en"><head> <meta charset="UTF-8"></head><body> <div id="app"></div></body></html>
单页面应用其实就是一个html文件，html结构里面有一个div#app，当js加载完毕并且执行完成 ...