- 博客(33)
- 收藏
- 关注
RSS订阅原创 vue3中使用ts
ref方式指定自定义组件类型import { ElForm } from 'element-plus'// InstanceType是无需显示引入的type FormInstance = InstanceType<typeof ElForm>const elFormRef = ref<FormInstance>()某种类型可以是自定义的多种类型type RouteLocationRaw = string | (RouteQueryAndHash & Locat
2022-03-09 10:42:32
4219
原创 禁用eslint / ts相关检查
通过注释方式禁用当前行的eslintalert('foo'); // eslint-disable-line禁用下一行的eslint// eslint-disable-next-line alert('foo');禁用多行的eslint/* eslint-disable */alert('foo');/* eslint-enable */禁用整个文件的eslint检查在文件最顶部添加如下注释/* eslint-disable */通过eslint配置文件禁用对应规则r
2022-03-09 09:38:36
8621
原创 git flow的介绍和使用
作用git flow 定义了一套项目的分支管理模式，让分支的管理不再混乱git flow定义的几个分支介绍master: (只允许存在一个) 当前生产代码所在分支，除项目创建之初提交一次代码之外，不能再对该分支主动提交代码，后续只能通过合并release分支的方式，获取代码的变更develop: (只允许存在一个) 主开发分支，基于master分支创建，不能直接向该分支提交代码，只能通过合并feature分支的方式得到最新的代码变更feature: (可以多个)新功能分支. feature分支都
2022-03-02 18:06:35
1465
1
原创 vite中element plus按需引入最优雅的用法
解决element-plus的ElMessage,ElNotification样式缺失问题使用unplugin-auto-import插件解决该问题特别注意import { ElNotification } from 'element-plus' 这类段代码不要手动去写， 而是要交给unplugin-auto-import插件隐士的自动加入，如果你自己手动去写的话，依然会导致样式缺失如果，unplugin-auto-import 气作用了，那么auto-imports.d.ts文件，应该会有相应
2022-02-26 23:13:48
1142
原创 js错误类型与错误信息统一收集
错误类型Error代码运行时的错误，除了 Error 这个对象，一些内置 错误类 在异常时返回，如SyntaxError、 EvalError 、 RangeError 、 ReferenceError 、 TypeError 等，具体信息ErrorScript error跨域脚本，为了防止信息泄露，不会展示语法错误具体信息，只会展示 Script error.可以先解决跨域：客户端script标签添加 crossorigin=“anonymous”服务端响应header添加 Access-
2022-02-26 22:08:59
3014
原创 vue3 watch与watchEffect
watch单个变量监听监听ref属性const theName = ref('张三')watch(theName, newVal => { console.log('newVal', newVal)})监听reactive属性监听单个属性const obj = reactive({ name: '张三', hobby: [ { title: '你好', }, ],})watch( () => obj.name, newV
2022-02-26 10:29:43
103
原创 父元素设置了min-height, 子元素设置height:100%无效
参考文章关于父元素设置min-height，子元素设置 height 100% 不生效的问题css 父元素设置了min-height：100%, 子元素设置height:100%无效
2022-02-21 16:52:53
1666
原创 前端动效资源
网站Ant motionhttps://motion.ant.design/exhibition-cn/通用小动画https://webkul.github.io/micron/按钮小动画https://bttn.surge.sh/https://varin6.github.io/Hover-Buttons/实现颜色渐变动画https://sarcadass.github.io/granim.js/examples.html实现颜色渐变动画实现线条的动画https://kim
2022-02-21 07:30:36
266
原创 白屏时间(FP), 首屏时间(FCP)与最大内容绘制时间（LCP）
怎么获取到这两个数据通过chrome开发者工具Performance选项卡通过chrome开发者工具Lighthouse选项卡通过JS计算web-vitalsFP & FCP & LCPFP:（First Paint / 首次绘制） 页面第一次绘制像素的时间，实际也是白屏时间FCP: (First Content Paint / 首次内容绘制) 这个指标用于记录页面首次绘制文本、图片、非空白 Canvas 或 SVG 的时间。这个就是实际有意义的首屏时间，也就是我们通常要优
2022-02-19 16:07:07
5135
原创 chrome开发者工具network选项卡最下面的状态栏数据说明
你这到底指的是哪里？以下图数据为例，逐个说明72 requests是指本次总共监听到了72个请求35.8 kB transferred通过网络加载的资源有35.8 kB2.1 MB resources本次监听到的所有请求加载的所有资源经过解压之后的原始大小Finish: 1.38 s页面上所有 http 请求发送到响应完成的时间， HTTP1.0/1.1 协议限定，单个域名的请求并发量是 6 个，即 Finish 是所有请求（不只是XHR请求，还包括DOC，img，js，css等资源的
2022-02-19 14:54:51
3914
原创 vite首次打开界面加载慢问题/解决
写在前面网上都说vite要比webpack快，但个人感受，vite项目的启动确实比webpack快，但如果某个界面是首次进入，且依赖比较多的话，那就会比较慢了。这篇文章就是用来记录，关于vite慢的相关问题与可能的解决方案为什么说vite快？为什么说vite慢？只说vite快那太过笼统，但vite项目的启动确实是快（注意这里的启动是指命令行启动完毕，不是指启动完之后首页加载完毕）启动完之后，你打开首页，你可能就不一定觉得vite快了（我之前就时常在自我怀疑，是不是我vite的打开方式不对，怎么这么
2022-02-19 14:12:52
27455
21
原创 本地开发https解决方案
情景说明有时候开发需要通过https来进行，那么这个问题怎么解决呢？通过npm安装mkcert工具npm安装mkcert创建自签名 SSL 证书mkcert 使用指南：如何快速创建自签名 SSL 证书vue项目本地开发使用刚刚的证书vue开启https，加载本地证书vite-plugin-mkcert使用Vite 使用 https 凭证服务方法(搭 mkcert )局域网内测试https应用局域网内测试https应用...
2022-02-19 13:32:56
3873
原创 在发布npm包之前，通过yalc调试
如何优雅地在本地测试 npm 包yalc： 开发前端插件&组件比npm link 更好用本地调试npm私有包使用yalc + nodemon
2022-02-19 10:08:39
1904
原创 keep-alive使用
相关文章vue组件缓存之keep-alive正确使用姿势vue中keep-alive的作用vue项目使用keep-alive的作用vue中keep-alive的使用及详解Vue / keep-alivevue实现前进刷新，后退不刷新vue-router 之 keep-alive
2022-02-17 16:06:42
224
原创 yarn包管理工具
安装安装yarn: npm install -g yarn安装yarn的registry切换工具: npm install -g yrm使用查看可用的源： yrm ls切换源: yrm use 源名称增加源: yrm add testResource https://testResource.com删除源: yrm del testResource初始化项目： yarn init安装所有依赖： yarn添加依赖：yarn add [package]yarn add [package]
2022-02-16 23:12:39
390
原创 vite使用相关文章收集
vite的项目，使用rollup打包的方法 该文章详细讲解了vite的库模式使用rollup的manualChunks手动配置DEMO 该文章详细介绍了如何拆包vite + vue3 + setup + pinia + ts 项目实战 该文章就一段内容讲拆包， 貌似和上一个文章的不一样，需要实际取配置, 对比下...
2022-02-16 16:07:43
398
原创 vue3实现动态组件加载写法
代码示例<script lang="ts" setup>import { defineAsyncComponent, ref } from 'vue'// 需要加载的组件集合const components = ref(new Map<string, any>())components.value.set( 'MyTag', defineAsyncComponent(() => import('./MyTag.vue')))components.valu
2022-02-16 11:57:06
12655
1
原创 配置stylelint
文章目录安装依赖新建配置文件`package.json`加入stylelint相关配置webstorm配置stylelint忽略stylelint对css的检验参考安装依赖npm install -D stylelint stylelint-config-standard stylelint-config-rational-order stylelint-prettier stylelint-config-prettier postcss-less postcss-scss postcss-html s
2022-02-13 23:53:08
1865
原创 vue2/vue3 render函数和h函数以及table封装相关文章
VUE封装Table组件拒绝！封装el-table，请别再用JSON数组来配置列了vue3-pro-tableel-table-ts函数式组件
2022-02-13 18:41:12
1100
原创 vite项目开发常用插件
@vitejs/plugin-vue作用： 用于编辑vue文件注意： 该插件适用于vue3npm官方仓库gitee镜像plugin-vue-jsx作用： 添加vue3对tsx和jsx的支持npm官方仓库vite-plugin-svg-icons作用： 统一引入svg文件资源，作为图标使用npm官方仓库vite-plugin-eslint作用： 给vite加入运行时的eslint支持npm官方镜像vite-plugin-mock作用： 用于模拟后端的服务
2022-02-13 18:31:33
3301
原创 z-index 无效问题
情景说明今天有个弹窗组件，弹窗中有个下拉组件，但这个下拉组件下拉开之后，多出的部分，被弹窗组件盖住了z-index无效的几种情况和解决方案父元素设置了 overflow:hidden|auto /display:none/如果父元素设置了 overflow:hidden /display:none/ 等，那么子元素如果在父元素外部绝对定位，那么调节子元素 z-index 可能不会显示。.father { display: none; opacity: 0; overflow: hidd
2022-02-11 19:16:15
972
1
原创 js通过url链接下载文件
情景说明ajax请求后, 后端的导出接口, 返回的是导出文件的url链接实现const elt = document.createElement('a');elt.setAttribute('href', url);elt.setAttribute('download', 'file.png');elt.style.display = 'none';document.body.appendChild(elt);elt.click();document.body.removeChild(el
2022-02-10 18:14:09
2435
原创 常用mixin
修复浮动导致的高度坍塌问题@mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } *height: 1%;}单行文本超长显示省略号@mixin textOverflow($width:100%,$display:block) { max-width
2022-02-10 14:27:23
337
原创 css同时满足两个类名才有效果的写法
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><style type="text/css"> .item-1.red{color: red;}</style></hea
2022-02-10 14:24:27
5353
原创 vite项目调试
就这?貌似没有记录博客的必要, 但按照以往webpack的方式进行debugger调试, 无法停在正确的代码位置暂时的解决方式源代码 > 向工作去添加文件夹 在这里,将项目所在文件夹添加进来, 此时debugger就能停在正确的位置了, 但是这个调试界面貌似有点不一样, 没有以前那种方便, 如果你知道如何解决这个问题,可以在文章下发留言,非常感谢...
2022-02-08 18:35:07
4938
2
原创 移动端适配相关文章收集
2022 年移动端适配方案指南 — 全网最新最全移动端开发-高清适配方案canvas 绘制图片模糊问题解决关于@2x，@3x的区别及图片的绘制前端移动端|二倍图看这就够了面试官：你了解过移动端适配吗？...
2022-02-08 08:07:31
257
原创 移动端1px问题
问题css最低只支持1px大小，不足1px就以1px显示，所以在移动端，根据UI设计稿，适配各种屏幕分辨率时，宽高在这个峰值时，就会出现实际结果比设计稿要粗的感觉。常体现为：多倍的设计图设计了1px的边框，在手机上缩小呈现时，由于css最低只支持显示1px大小，导致边框太粗的效果。解决方案通过transform: scale()缩放单边如：下边框.div::after { content: ''; box-sizing: border-box; position: absol
2022-02-08 07:20:04
455
原创 jquery通过live绑定事件的原理
jquery live()函数原理将事件绑定到父节点,由于事件冒泡，所有事件最终会冒泡到document节点当有事件触发时，则判断事件类型和触发事件的元素是否一致，如果相同则执行函数实例<!doctype html><html> <head> <title>jquery live()函数原理及实现</title> <style type="text/css">
2022-02-07 17:56:15
244
原创 sessionStorage, localStorage,Cookie的异同
类型数据有效范围存储大小存储位置sessionStorage当前标签页未关闭时都有效(注意：chrome89之后, 正常情况下多个标签页是无法共享数据)最大5M仅存储在客户端localStorage一直有效,除非手动清除5M仅存储在客户端Cookie如果未设置失效时间，那么只要浏览器未关闭都有效,如果设置了失效时间，则在失效时间之前都是有效的4KB每次请求都会携带, 如果存储的数据太多，可能会导致性能问题简化操作的工具库js-cookie相关文...
2022-02-07 11:09:12
424
原创 vue2的9种性能优化方式
文章目录零、不要过早优化一. 使用函数式组件适用情况原理官网说明实例与分析二. 组件拆分适用情况原理实例与分析三. 本地变量而非响应式变量适用情况原理实例与分析四. 适当考虑v-show替代v-if适用情况原理实例与分析五. 使用KeepAlive六. 使用`Deferred`延迟分批渲染适用情况原理实例与分析七. 分批次提交八. 使用非响应式数据九. 使用虚拟滚动相关文章与源码主相关拓展相关总原则减少界面渲染的节点/组件数量，如果不能减少节点/组件数量，则考虑是否能够分批次渲染减少更新节点/组件的
2022-02-05 18:36:45
3115
echarts文档-分卷1
2024-06-14
LogicFlow文档
2024-06-14
ant design vue 4.x文档
2024-06-13
vxe-table文档(4.x)
2024-06-13
tailwindcss文档(3.4.4版本)
2024-06-13
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人