pinia 简单实现1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980import { computed, reactive } from "vue";let piniaInstance;function setActivePinia(pinia) { piniaInstance = pinia;}function getActivePinia(pinia) { return piniaInstance;}const piniaSymbol = Symbol('pinia')/** * pinia 是一个插件， 所以要返回一个带install的对象 * @returns */export const createPinia = ...

yjs 自定义 同步yjs 自带的 y-websocket 不能自定义数据格式。 简单的实现了一下用 socket.io 传输 yjs 的数据 先看一下客户端provider的代码 Yjs学习-CSDN博客 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051import { ObservableV2 } from "lib0/observable.js";import * as encoding from 'lib0/encoding'import * as decoding from 'lib0/decoding'import * as Y from 'yjs';import io, { Socket } from 'socket.io-client'import * as syncProtocol from & ...

Compodoc 的常用命令最近在学习 nestjs，用到了 Compodoc。发现配置文件里面的可配置项挺多的，记录一下自己用到的配置项 官网：https://compodoc.app/guides/installation.html 首先安装 compodoc。 然后在 package.json 里面写一条 script 启动 compodoc。 新建一个compodoc配置文件，文件名可以随便取，要和package.json 里面的命令路径对的上。 compodoc配置文件要写上一个 $schema .这样写 json 的时候才有语法提示。 12345678910{ "$schema": "./node_modules/@compodoc/compodoc/src/config/schema.json", "port": 8888, "theme": "gitbook", "language": "zh-CN& ...

使用 alist 实现手机访问电脑文件 初衷是想手机直接观看电脑的视频，而不需要下载到手机里面 smb 访问电脑都会有自带文件共享功能，是 smb 协议，这是我的 mac 电脑打开的样子，但是使用手机访问，可以连接上服务，但是看不到任何内容，有时候一个nobody的文件夹，里面也不会有任何内容。 构建一个本地服务器访问电脑文件我使用的是 node 安装serve ,这样可以直接访问文件夹，可以手动获取目标文件的 url 然后放到播放器里面播放。只能一个个手动去处理， 没有播放列表。 使用 alist首先在电脑上安装一下 alist,mac intel 芯片要用alist-darwin-amd64.tar.gz这个文件. 手动安装 | AList文档 (nn.ci) 安装好后， 输入./alist serve 启动服务。这个时候 webdav 服务是自动打开的， 成功启动在5244 端口。 进入 web 端后台， 配置存储，驱动里面选择本机存储。然后填写对应的表单。 按照这个文档配置播放器的 webdav。大功告成。 WebDAV | AList文档 (nn.ci)

Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 zyronon/douyin: Vue3 + Pinia 仿抖音，Vue 在移动端的最佳实践 . Imitate TikTok ，Vue Best practices on Mobile (github.com) 页面跳转的动画在App.vue 里面有监听路由的路径，通过判断路由定义的顺序来判断路由是前进还是后退， 然后添加对应的动画。 123<transition :name="transitionName"> // 这里修改动画名</transition> 路由过渡的时候会出现白屏这是由于每个页面都是 block 元素。使用动画过渡的时候， 上一个页面和下一个页面都是 block 元素。默认的文档流是垂直排列。 所以下一个元素会排列在上一个元素的下面。 解决办法就是将页面元素作为非 block 元素。 一般的防暑是页面根元素脱离文档流， 利用absolute 或者 fixed 等。我比较倾向于在 router-view 外面套一层 flex 元素。 这样子页面就 ...

宝塔部署react项目（vue也适用）1. 服务器编译好项目文件记住编译后的目录，比如www/project/build/ 2. 宝塔创建项目网站 –》 创建站点 –》根目录（你编译好的文件位置）www/project/build/.点击提交就创建好了。 3. 配置后端代理打开宝塔里面的这个项目， 点击反向代理。 添加代理。那个代理目录就是你代码里面写的。比如我用的axios。 baseUrl是/api/admin。 所以就填的/api/admin 配置history模式打开ngnix文件。我是直接在第三步的文件里面操作的。这个文件按理只写proxy。 但是为了方便就没注意了。 宝塔 ngnix 存放目录 https://www.vpsss.net/24691.html

搭建code server简单的介绍一下code server吧 Run VS Code on any machine anywhere and access it in the browser. 在你的服务器或者机器上安装code server，可以在浏览器上使用vscode。简单点来说就是一个web版的vscode。 这是项目地址 github地址 在github中介绍了三种安装方式 - 使用安装脚本进行安装 手动安装 使用一键部署 宝塔 + docker这种方式比较简单，安装前提是你已经安装宝塔并在宝塔面板里面安装了docker管理器，首先是在docker管理器里面添加镜像codercom/code-server:latest。点击获取，（TIP：文件较大） 下载完成后，点击docker管理器的容器列表里面的添加容器，选择下载好的镜像，选择下载好的codeserver镜像，选择自己喜欢的端口（官方是8080端口）一定要选择环境变量，也可以在容器中重新配置环境 使用安装包的方式比较麻烦， 不推荐先在服务器里面下载github上面的relase文件，然后解压到随意一个目录 ...

ElForm 里的 ElTree 校验流程123<el-form-item prop="permissionIds"> <el-tree ref="treeRef" show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="detail.permissionIds" :data="permissionList" :props="treeProps" @check="onPermissionCheck" ></el-tree></el-form-item> img图片1 点击 tree 组件。触发了这些事件。 从 ElCheckBox 开始看起 Che ...

JS Date操作1const weekDay = new Date(date.setDate(1)).getDay() // 这个月的第一天是星期几const monthLen = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() // 本月一共多少天 获取一周的日期123getDate(offset: number) { const current = new Date(); const weekDay = current.getDay(); const dayMilliseconds = 24 * 60 * 60 * 1000; // 一天多少毫秒 const flagTimestamp = current.setHours(0, 0, 0, 0) + offset * 7 * dayMilliseconds; const dateAry = [...new Array(7).keys()] .map((i: number) => new Date(flagTimestamp ...