性能优化：浏览器lighthouse
摘要：1.lighthouse监测项目性能 FCP：首次内容绘制时间，浏览器第一次绘制DOM相关的内容，用户第一次看到页面内容的时间(首次加载白屏时间) Speed Indxe：页面各个可见部分的显示平均时间，页面有轮播图或需要从后端获取内容加载时，这个数据会被影响到 LCP：页面中最大的内容需要绘制的时
阅读全文
posted @ 2025-02-23 16:07
随笔分类 - vue3 / learn
环境变量env
摘要：1.查看环境变量 <template> <div></div> </template> <script setup lang='ts'> // 获取环境变量 console.log(import.meta.env); // 不可直接修改值，因为线上环境是硬编码，是写死的，动态修改无效 const B
阅读全文
posted @ 2025-02-23 01:10
编译宏 definedProps、definedEmits、definedOptions、definedSlot
摘要：<template> <div>{{prop.dataProp}}</div> {{ a }}{{ b }} <div v-for="item in prop.dataProp" :key="String(item)"> {{ item }} <slot :item="item"></slot> <
阅读全文
posted @ 2025-02-22 22:23
pinia 持久化插件
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' // import SelfComponent from './study/selfComponent/component.vue' //
阅读全文
posted @ 2025-02-22 19:05
pinia $reset、$subscribe、$onAction
摘要：<template> <div @click="[store.count++,store.increment()]"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> <div @click="reset">恢复</div> </templ
阅读全文
posted @ 2025-02-22 16:46
pinia action和getter
摘要：import {defineStore} from 'pinia' import {StoreName} from './store-name' // StoreName是id，用于区分不同的store，自定义即可 export const useStore = defineStore(StoreN
阅读全文
posted @ 2025-02-22 15:31
pinia 修改state
摘要：<template> <div @click="change"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> </template> <script setup lang='ts'> import { useStore } from '
阅读全文
posted @ 2025-02-22 12:29
pinia基础使用
摘要：import {defineStore} from 'pinia' import {StoreName} from './store-name' // StoreName是id，用于区分不同的store，自定义即可 export const useStore = defineStore(StoreN
阅读全文
posted @ 2025-02-22 11:40
pinia安装介绍
摘要：1.介绍 2.安装 npm i pinia -S import {createPinia} from 'pinia' const store = createPinia() app.use(store)
阅读全文
posted @ 2025-02-22 11:18
unocss原子化
摘要：https://xiaoman.blog.csdn.net/article/details/125650172
阅读全文
posted @ 2025-02-22 00:02
h5 编写postcsstoviewport插件 px->vw和全局修改文字大小
摘要：1.index.html设置meta和清除默认样式 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <
阅读全文
posted @ 2025-02-21 23:36
nextTick
摘要：<template> <div style="height: 300px;width: 200px;border: 1px solid #000;overflow-y: auto;" ref="box"> <div v-for="item in chatList" :key="item" style
阅读全文
posted @ 2025-02-11 15:56
event Loop
摘要：<template> <div></div> </template> <script setup lang='ts'> // setTimeout是宏任务，promise是微任务，宏任务和微任务都是队列数据结构，为先进先出 // 事件循环的机制:同步代码先执行，然后处理微任务队列，接着是宏任务队列中
阅读全文
posted @ 2025-02-11 13:27
slotted()、style module、global、style v-bind
摘要：<template> <slotComponent> <template v-slot><div class="demo">789</div></template> </slotComponent> <h1 class="colorBlue">ref变量直接在style中通过v-bind使用</h1
阅读全文
posted @ 2025-02-10 19:19
scope、:deep()
摘要：<script setup lang="ts"> import HelloWorld from './components/HelloWorld.vue' </script> <template> <div> <a href="https://vite.dev" target="_blank"> <
阅读全文
posted @ 2025-02-10 18:22
插件编写
摘要：// 使用页面 <template> <div></div> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' const app = getCurrentInstance() app?.proxy?.$
阅读全文
posted @ 2025-02-10 14:47
全局变量和函数定义和使用
摘要：import { createApp } from 'vue' import './style.css' import App from './App.vue' import SelfComponent from './study/selfComponent/component.vue' impor
阅读全文
posted @ 2025-02-10 12:19
hook封装成库上传到npm库中，下载自己用
摘要：https://www.bilibili.com/video/BV1dS4y1y7vd?spm_id_from=333.788.videopod.episodes&vd_source=ce8f93194a63c57cca08d7e9eb10d3e5&p=41
阅读全文
posted @ 2025-02-10 11:46
hook:toBase64
摘要：<template> <img src="/src/assets/img/demo.png" alt="" width="500" height="600" id="image"> </template> <script setup lang='ts'> import usebase64 from
阅读全文
posted @ 2025-02-09 02:02
手写v-lazy指令
摘要：<template> <div v-for="item in arr" :key="item"> <img v-lazy="item" alt="" width="400" height="800"> </div> </template> <script setup lang='ts'> impor
阅读全文
posted @ 2025-02-09 01:09
