仿ChatGPT光标跟随效果
实现效果
实现代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial ...
手写Vue2源码
使用rollup搭建开发环境使用rollup打包第三方库会比webpack更轻量，速度更快
首先安装依赖
123npm init -ynpm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev
然后添加 rollup 的配置文件 rollup.config.js
12345678910111213141516import babel from "rollup-plugin-babel"export default { input:"./src/index.js", // 配置入口文件 output:{ file:"./desc/vue.js", // 配置打包文件存放位置以及打包后生成的文件名 name:"Vue",// 全局挂载一个Vue变量 format:"umd", // 兼容esm es6模块 ...
网络请求
node编写接口这里用到的几个包的作用
express：基于 Node.js 平台，快速、开放、极简的 Web 开发框架，官网：https://www.expressjs.com.cn/
cors：用来解决跨域问题
body-parser：可以通过 req.body 获取post请求传递过来的json数据
multer：用于文件上传
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576const express = require('express');const fs = require("fs");const path = require("path")const app = express()const multer = require("multer");const ...
pm2和nginx
pm2pm2是一个用于管理node项目的工具
前言有如下两个文件
index.js
1234567891011121314const express = require("express");const app = express();const port = 9999;app.get("/index", (req, res) => { res.json({ code:200, msg:"songzx001" })});app.listen(port, () => { console.log(`Example app listening on http://localhost:9999/index`);});
index2.js
1234567891011121314const express = require("express");const app = express();const port = 8888;a ...
点击产生水波纹效果,vue自定义指令20行代码搞定～
点击产生水波纹效果，vue自定义指令20行代码搞定～转载 林三心不学挖掘机 前端之神
前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
最近在看一些组件库的时候，发现他们有一种效果还挺好看的，就是点击会有水波效果~
所以就想写一个 Vue 的自定义指令指令来实现这个效果：v-ripple
使用方式是这样的：
1<Button v-ripple>我是一个按钮</Button>
实现思路思路就是，点击了按钮某一处时，往按钮dom中插入一个圆dom，这个圆dom是相对于按钮去定位的，坐标就是(x1,y1)，至于(x1,y1)要怎么去算呢？其实很简单啊
1、先算出鼠标点击相对于按钮的坐标(x,y)
2、(x-半径,y-半径) -> (x1,y1)
至于(x,y)要怎么算？也很简单啊（用到getBoundingClientRect）
1、算出鼠标点击的全局坐标
2、算出按钮的全局坐标
3、鼠标按钮坐标减去按钮坐标，就能得到(x,y)
开始实现首先我们准备好基础的样式
12345678910111 ...
讯飞星火大模型V3.0 WebApi使用
讯飞星火大模型V3.0 WebApi使用文档说明：星火认知大模型Web文档 | 讯飞开放平台文档中心 (xfyun.cn)
实现效果
初始化首先构建一个基础脚手架项目
1npm init vue@latest
用到如下依赖
123456789"dependencies": { "crypto-js": "^4.2.0", "highlight.js": "^11.9.0", "marked": "^9.1.3", "pinia": "^2.1.7", "pinia-plugin-persistedstate": "^3.2.0", "vue": "^3.3.4", "vue-router": "^4.2.5" }
修改 ma ...
Vue3 + vite + Ts + pinia + 实战 + 源码 +electron
Vue3 + vite + Ts + pinia + 实战 + 源码 +electron
仓库地址：https://gitee.com/szxio/vue3-vite-ts-pinia
视频地址：小满Vue3（课程导读）_哔哩哔哩_bilibili
课件地址：Vue3_小满zs的博客-CSDN博客
初始化Vue3项目方式一1npm init vite@latest
生成的目录结构
1234567891011121314151617181920vite-demo├── .vscode│ └── extensions.json├── public│ └── vite.svg├── src│ ├── assets│ │ └── vue.svg│ ├── components│ │ └── HelloWorld.vue│ ├── App.vue│ ├── main.ts│ ├── style.css│ └── vite-env.d.ts├── README.md├── index.html├── package.json├── tscon ...
Vue3 + Echarts(5.x) 实现中国地图
Echarts展示地图效果图
安装1npm install echarts
默认安装的是 5.x 版本
在这个版本中的引入方式必须是下面这种方法
1import * as echarts from 'echarts'
源码在echarts5.x版本中，已经不再提供地图数据，所以需要我们自己手动下载，我这里已经提供好了下载地址
提前准备好地图数据 china.js
下载地址：https://szx-bucket1.oss-cn-hangzhou.aliyuncs.com/picgo/china.js打开这个地址，然后 ctrl + s 保存就可以了，在浏览器中看到的是乱码，不要担心，不影响使用
然后下面是地图实现源码
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929 ...
自定义插件之全局Loading
自定义插件之全局LoadingElementPlus的默认全局Loading如果完整引入了 Element Plus，那么 app.config.globalProperties 上会有一个全局方法$loading，同样会返回一个 Loading 实例。
名称
说明
类型
默认
target
Loading 需要覆盖的 DOM 节点。 可传入一个 DOM 对象或字符串； 若传入字符串，则会将其作为参数传入 document.querySelector以获取到对应 DOM 节点
string / HTMLElement
document.body
body
同 v-loading 指令中的 body 修饰符
boolean
false
fullscreen
同 v-loading 指令中的 fullscreen 修饰符
boolean
true
lock
同 v-loading 指令中的 lock 修饰符
boolean
false
text
显示在加载图标下方的加载文案
string
—
spinner
自定义加载图标类名
string
—
back ...
封装v-resize并发布到NPM
自定义Vite库并发布到NPM封装useResize用于监听绑定元素的宽高变化，当元素宽高发生变化时触发回调并获取最新的宽高
新建项目结合上面学到的 Hook 和 自定义指令封装一个监听元素宽高变化的指令，并发布到 npm
项目结构
123456789useResize ├── src │ └── index.ts ├── README.md ├── index.d.ts ├── package-lock.json├── package.json ├── tsconfig.json └── vite.config.ts
src/index.ts
1234567891011121314151617181920212223242526272829303132333435363738import type {App} from "vue";/** * 自定义Hook * @param el * @param callback */const weakM ...
