摘要： Vue 模板的编译过程是 Vue 中非常核心的一部分，它将你在模板中写的 HTML 代码转换成 JavaScript 代码，使得 Vue 能够高效地在页面上渲染和更新数据。Vue 的模板编译过程可以分为几个重要步骤，具体的过程是： Vue 模板编译的过程： 模板解析（Parsing） 抽象语法树生成 阅读全文

摘要： 在 Webpack 的打包流程中，模块构建阶段和编译阶段的确是两个不同的概念，它们有各自的独立任务和作用。让我重新整理并澄清每个阶段的职责，特别是它们与 loader 和模块依赖图的关系。 Webpack 打包流程的澄清： 初始化阶段（Initialization） 编译阶段（Compilation 阅读全文

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

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

摘要： <template> <div>{{prop.dataProp}}</div> {{ a }}{{ b }} <div v-for="item in prop.dataProp" :key="String(item)"> {{ item }} <slot :item="item"></slot> < 阅读全文

摘要： import { createApp } from 'vue' import './style.css' import App from './App.vue' // import SelfComponent from './study/selfComponent/component.vue' // 阅读全文

摘要： <template> <div @click="[store.count++,store.increment()]"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> <div @click="reset">恢复</div> </templ 阅读全文

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

摘要： <template> <div @click="change"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> {{ count }} </template> <script setup lang='ts'> import { useSt 阅读全文

摘要： <template> <div @click="change"> 直接通过实例.就可以获取 {{ store.count }} {{ store.sex }} </div> </template> <script setup lang='ts'> import { useStore } from ' 阅读全文