08 2022 档案
摘要:1. 面板封装 提取首页的公用面板进行复用 头部 标题和副标题由props传入 右侧内容由具名插槽right传入 查看更多封装成全局组件 主体 由默认插槽传入 <template> <!-- 封装面板组件 --> <div class="home-panel"> <div class="contai
阅读全文
摘要:1. 骨架效果 目的:为了在加载过程中等待效果更好,封装骨架屏组件 实现步骤: 骨架屏组件需暴露的属性:高、宽、背景颜色,是否启用动画 使用插件的方式进行全局注册 <template> <!-- 骨架屏,就是一个可定制高、宽、背景以及动画的盒子 --> <div class="xtx-skeleto
阅读全文
摘要:1.less自动化导入 安装一个vue-cli插件,自动导入less文件 vue add style-resources-loader 2. 头部分类导航组件渲染 实现头部一级分类和二级分类的渲染 基本步骤: 定义一个常量数据和后台保持一致,这样不请求后台就能展示一级分类,不至于白屏 定义接口函数
阅读全文
摘要:1.pinia基础 store/modules/user.ts import { defineStore } from 'pinia' // 用户模块 const useUserStore = defineStore('user', { state: () => { return { // 用户信息
阅读全文
摘要:最基本的依赖收集系统 // // 假如现在有个counter // let counter = 100; // // 这些是对counter进行操作的函数,对counter有依赖 // function doubleCounter() { // console.log(counter * 2); /
阅读全文
摘要:VUE3源码学习01-了解虚拟DOM及实现渲染器render 真实DOM的渲染流程 大致分为五步: 解析HTML 构建DOM树 DOM树与CSS样式进行结合构造呈现树 布局 绘制 详解渲染过程: DOM Tree:浏览器将 HTML 解析成树形的数据结构 CSS Rule Tree:浏览器将 CSS
阅读全文