随笔分类 -  vue3 / learn

eletron开发
摘要:1.安装 npm i electron electron-builder -D 2.编写electron主进程文件 // 主进程文件 import { app, BrowserWindow } from 'electron' app.whenReady().then(() => { const wi 阅读全文

posted @ 2025-03-13 23:16 ChoZ 阅读(59) 评论(0) 推荐(0)

router
摘要:1.创建router文件 import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' const routes: Array<RouteRec 阅读全文

posted @ 2025-03-11 00:57 ChoZ 阅读(27) 评论(0) 推荐(0)

router初始化
摘要:import { createRouter, createWebHistory } from 'vue-router' import type { RouteRecordRaw } from 'vue-router' const routes: Array<RouteRecordRaw> = [ { 阅读全文

posted @ 2025-03-10 15:57 ChoZ 阅读(21) 评论(0) 推荐(0)

浏览器lighthouse、性能优化
摘要:1.lighthouse监测项目性能 FCP:首次内容绘制时间,浏览器第一次绘制DOM相关的内容,用户第一次看到页面内容的时间(首次加载白屏时间) Speed Indxe:页面各个可见部分的显示平均时间,页面有轮播图或需要从后端获取内容加载时,这个数据会被影响到 LCP:页面中最大的内容需要绘制的时 阅读全文

posted @ 2025-02-23 16:08 ChoZ 阅读(104) 评论(0) 推荐(0)

环境变量env
摘要:1.查看环境变量 <template> <div></div> </template> <script setup lang='ts'> // 获取环境变量 console.log(import.meta.env); // 不可直接修改值,因为线上环境是硬编码,是写死的,动态修改无效 const B 阅读全文

posted @ 2025-02-23 01:10 ChoZ 阅读(46) 评论(0) 推荐(0)

编译宏 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 ChoZ 阅读(113) 评论(0) 推荐(0)

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 ChoZ 阅读(66) 评论(0) 推荐(0)

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 ChoZ 阅读(229) 评论(0) 推荐(0)

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 ChoZ 阅读(41) 评论(0) 推荐(0)

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 ChoZ 阅读(86) 评论(0) 推荐(0)

pinia基础使用
摘要:import {defineStore} from 'pinia' import {StoreName} from './store-name' // StoreName是id,用于区分不同的store,自定义即可 export const useStore = defineStore(StoreN 阅读全文

posted @ 2025-02-22 11:40 ChoZ 阅读(20) 评论(0) 推荐(0)

pinia安装介绍
摘要:1.介绍 2.安装 npm i pinia -S import {createPinia} from 'pinia' const store = createPinia() app.use(store) 阅读全文

posted @ 2025-02-22 11:18 ChoZ 阅读(36) 评论(0) 推荐(0)

unocss原子化
摘要:https://xiaoman.blog.csdn.net/article/details/125650172 阅读全文

posted @ 2025-02-22 00:02 ChoZ 阅读(26) 评论(0) 推荐(0)

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 ChoZ 阅读(71) 评论(0) 推荐(0)

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 ChoZ 阅读(26) 评论(0) 推荐(0)

event Loop
摘要:<template> <div></div> </template> <script setup lang='ts'> // setTimeout是宏任务,promise是微任务,宏任务和微任务都是队列数据结构,为先进先出 // 事件循环的机制:同步代码先执行,然后处理微任务队列,接着是宏任务队列中 阅读全文

posted @ 2025-02-11 13:27 ChoZ 阅读(40) 评论(0) 推荐(0)

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 ChoZ 阅读(16) 评论(0) 推荐(0)

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 ChoZ 阅读(30) 评论(0) 推荐(0)

插件编写
摘要:// 使用页面 <template> <div></div> </template> <script setup lang='ts'> import { ref, reactive } from 'vue' const app = getCurrentInstance() app?.proxy?.$ 阅读全文

posted @ 2025-02-10 14:47 ChoZ 阅读(27) 评论(0) 推荐(0)

全局变量和函数定义和使用
摘要: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 ChoZ 阅读(29) 评论(0) 推荐(0)

导航