- 博客(207)
- 收藏
- 关注
RSS订阅
原创 vite创建vue3项目并进行配置及vue3项目结构介绍
创建项目vue3+ts 项目,锁定node版本 与pnpm版本,tsconfig.json和tsconfig.node.json和tsconfig.app.json有什么区别 .npmrc README.md(包含五颜六色的tag标签) 配置vue-router 自动导入ref reactive route等vue的Composition API,减少样板代码和提高开发效率 vue3+ts vite打包结构控制通过rollup进行配置 配置@/开头的路径别名 封装pinia并引入pinia持久化工具(pi
2025-04-28 17:54:30
753
1
原创 字符串方法
字符串方法速查String 对象属性属性描述constructor对创建该对象的函数的引用length字符串的长度prototype允许您向对象添加属性和方法String 对象方法方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接两个或更多字符串，并返回新的字符串。endsWith()判断当前字符串是否是以指定的子字符串结尾
2021-08-22 15:45:30
473
原创 javascript数组常用api 方法
本文总结了javascript常用的数组的方法包括 forEach filter map join concat sort splice indexOf reverse find every push unshift pop shift等
2021-07-11 18:25:38
3372
1
原创 通过css实现正方体效果
摘要：本文展示了使用纯CSS实现3D立方体旋转效果的代码示例。通过HTML结构创建6个面，利用CSS的transform属性设置各面位置，结合preserve-3d保持3D空间，并添加rotate动画使其持续旋转。关键点包括perspective设置、translateZ定位和各面旋转角度调整，最终呈现出一个完整的3D立方体旋转动画。
2025-06-08 20:34:32
369
原创 Dom树相关
本文介绍了DOM节点的基本操作方法及相关概念。主要内容包括：节点的增删改查操作（查、增、插、删、替换）、节点类型（元素、属性、文本等）及其属性（nodeName、nodeValue等）。特别分析了document对象在原型链中的位置，说明其继承关系（HTMLDocument.prototype继承自Document.prototype），以及不同方法（如getElementById、getElementsByName等）在原型链中的定义位置。文章还对比了各类节点的特性，包括HTML文档特有属性和通用DOM方
2025-06-02 08:50:05
592
原创 vue3 vite项目引入原子化css unocss 以及unocss的一些常用写法
使用unocss 生成背景图片 可变修饰 unocss使用hover unocss使用first 选中第一个div元素unocss 使用伪元素after 在文字后面添加*
2025-05-17 10:00:00
437
原创 前端正则学习记录
是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当。一个新的 RegExp 对象，具有指定的模式和标志。含有 “g”、“i” 和 “m” 之外的字符，抛出该异常。不是合法的正则表达式，或。
2025-05-06 18:11:00
634
原创 封装pinia并引入pinia持久化工具(pinia-plugin-persistedstate)
封装pinia并引入pinia持久化工具(pinia-plugin-persistedstate)
2025-05-03 14:02:52
547
原创 自动导入ref reactive route等vue的Composition API,减少样板代码和提高开发效率
unplugin-auto-import是一个用于Vue 3（Composition API）的插件，主要功能是自动导入代码中使用的模块和函数，从而减少样板代码和提高开发效率。该插件支持Vue Composition API函数（如ref、reactive、computed等）以及来自其他库的函数（如Vue Router的useRoute、useRouter，Pinia的defineStore等）unplugin-vue-components：Vue 的按需组件自动导入。
2025-05-03 10:00:00
255
原创 vue3+ts vite打包结构控制通过rollup进行配置
vue3+ts vite打包结构控制通过rollup进行配置 使用output.entryFileNames 配置入口文件的打包输出。导入的/build/vite/build。
2025-05-03 09:00:00
255
原创 vue3+ts项目 配置vue-router以及router-link激活时一些激活类的操作
vue3+ts项目 配置vue-router以及router-link激活时一些激活类的操作
2025-05-02 16:50:53
318
原创 配置代码质量工具（Prettier、ESLint、Stylelint）配置ctrl+s保存后自动修复
在遇到 .js 、 .jsx 、.ts 、.tsx 、.json 、.html 、.md 、 .css 、 .less 、 .scss 为后缀的文件时，都会去使用 Prettier 去格式化代码，而格式化的规则就是我们配置的 .prettierrc 决定的！现配置文件更改为eslint.config.js｜eslint.config.cjs｜eslint.config.mjs。.stylelintrc.json、.stylelintrc.yml 或 .stylelintrc.yaml 文件。
2025-05-02 09:30:00
1778
1
原创 README.md文档如何添加丰富多彩的badge标识,五颜六色的tag标签
依次填完 label，message，color 三个参数之后，点击 Make Badge，此时页面会跳转到一个新页面，你需要的就是复制新页面的地址为自己所用；vuejs/vue: 用户的某个项目的stars数量;如果不带/vue则是用户获取的stars数量。我们在user参数中输入vuejs/vue 输入后点击执行就可以生成了。以下内容以获取github上的vue项目的stars为例。Ritusan：Author对应的值，换成你自己的；Author：可以换成你想展示的label文字；
2025-04-30 16:29:08
316
原创 el-input限制输入只能是数字 限制input只能输入数字
通过对value值进行正则限制：οnkeyup=“value=value.replace(/[^\d]/g,’ ')”，绑定一个onkeyup监听事件，/[^\d]/g 是用来匹配所有非数字内容的正则表达式，将之替换成空字符串，这种方式不会影响任何属性，推荐使用。通过绑定值限制的方式：v-model.number=“aaa”,这种方式会限制一般的数字，但是会影响maxlengt属性，并且e是可以输入的，一般情况可以使用，严格限制的话不建议使用。只允许输入数字(整数：小数点不能输入)允许输入小数(两位小数)
2025-04-27 20:45:00
1365
原创 tsconfig.json和tsconfig.node.json和tsconfig.app.json有什么区别
是三个不同的TypeScript配置文件，它们分别用于不同的场景和目的。其中tsconfig.node.json是专门用来配置vite.config.ts文件的编译规则，tsconfig.app.json则是用来定义项目中其他文件的ts编译规则。这个配置文件适用于整个项目，包括Vue组件、JavaScript文件和其他TypeScript文件。它包含了Node.js特有的配置，如模块解析规则、类型检查规则等。它包含了Vue组件特有的配置，如模块解析规则、类型检查规则等。在Vue 3项目中，
2025-04-27 18:31:22
510
原创 手动实现legend 与 echarts图交互 通过元素和js事件实现图标某项的高亮 显示与隐藏
通过js实现柱形图同一组数据时 隐藏某一个柱子效果图通过js实现柱形图一组数据的显示隐藏 达到legend的效果效果图
2025-04-24 19:20:27
796
1
原创 详解.vscode 下的json .vscode文件夹下各个文件的作用
我们只需要在插件页面点击添加到工作区建议 就可以生成在extensions.json文件 并且把该文件添加到推荐区 反之可以把已添加的从工作区建议删除 删除该插件的推荐通过插件筛选可以看到项目推荐的插件有哪些。
2025-04-21 16:56:13
1201
原创 echarts 折线图 区域填充 指示器 配置 tooltip显示自定义显示
echarts 折线图 区域填充 指示器 自定义tooltip显示 隐藏标记图形 更换指示器的显示
2025-04-21 10:23:51
326
原创 使用el-tooltip封装省略号组件内容超出显示tooltip
在公共组件中封装el-tooltip的显示,当传入的内容超出父元素的大小时,显示tooltip组件。
2025-03-18 20:59:11
222
原创 depcheck 检查项目中依赖的使用情况 避免幽灵依赖的产生
幽灵依赖是指node_modules中存在 而package.json中没有声明过的依赖 但却能够在项目的依赖树中找到并使用的模块。
2024-09-18 10:57:45
1090
原创 关于使用mapbox的一些记录
二、绘制标记 https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/十一、修改鼠标 https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/十四、动态绘制区域 https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/
2024-09-14 13:36:38
2629
1
原创 git 配置多个.ssh 本地电脑可以通过ssh向多个平台提交代码
/.ssh/gitee_id_rsa 是秘钥的生成的地址 ~写绝对路径 例如 C:\Users\admin.ssh/id_rsa_github。同一台电脑配置多个.ssh 执行多个平台例如 gitee github gitlab …出现这样的代表成功了。
2024-08-28 20:22:25
397
1
原创 常用的自适应布局方式
简要介绍CSS中flex布局和grid布局的核心属性表。flex布局通过设置display:flex激活，主要属性包括flex-direction、justify-content、align-items等，用于控制子元素排列和对齐方式。grid布局通过display:grid激活，提供grid-template-columns、grid-gap、grid-area等属性，用于构建二维网格布局系统。两种布局方式都包含详尽的简写属性和子元素控制属性，适用于不同场景的页面布局需求，文末附有相关学习资源链接。
2023-12-06 20:29:50
488
原创 git stash 对当前分支修改的内容进行暂存
我们在开发的时候往往会遇到这种情况, 在一个分支开发,写了不少内容,但是突然来了一个紧急的需求需要切换分支,去做这个需求,但是当前的分支又因为没有开发完成,不想形成一条无效的commit记录,这时我们就到暂存上场了。
2023-12-06 13:07:39
1102
原创 vue3中如何实现事件总线eventBus
由于vue3中 “$ on”，$ off 和 $ once 实例方法已被移除，组件实例不再实现事件触发接口 所以我们可以使用官方推荐的这个第三方库实现同样的效果。全局总线，vue 入口文件 main.js 中挂载全局属性。点击 按钮 b组件中的数值增加。main.ts 初始化。
2023-12-02 13:30:23
1924
原创 bem架构 element css的命名规则
BEM（Block, Element, Modifier）是一种命名约定，用于在编写 CSS 和 HTML 类名时创建可维护和可重用的样式。BEM 是一种常用的 CSS 命名规范，它的目的是减少样式之间的耦合，增加样式的可读性，并提高样式的复用性。
2023-11-28 12:56:08
682
原创 如何定位el-tree中的树节点当父元素滚动时如何定位子元素
如果为 true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。如果为 false，元素的底端将和其所在滚动区的可视区域的底端对齐。Element 接口的 scrollIntoView() 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。定义滚动是立即的还是平滑的动画。auto：滚动行为由 scroll-behavior 的计算值决定。
2023-11-19 11:25:38
718
原创 echarts 中如何添加左右滚动条 数据如何进行堆叠如何配置那些数据使用那个数据轴
此项的具体配置可参考 https://echarts.apache.org/zh/option.html#dataZoom-inside.moveOnMouseWheel。
2023-11-19 10:45:03
790
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人