随笔分类 - Vue3专题精讲
摘要:解决 TypeScript 配置继承中的‘@tsconfig/node22/tsconfig.json’文件找不到 在最近的一次项目中,我尝试使用npm init vue@latest 命令来创建一个基于Vue 3和TypeScript的新项目。然而,在初始化完成后,我遇到了一个关于TypeScri
阅读全文
摘要:vite+vue3+ts 显示找不到模块“../views/HomeView.vue”或其相应的类型声明。ts(2307) 一、在根目录下的 env.d.ts文件(没有就自己创建) 二、在env.d.ts文件中添加以下代码 /// <reference types="vite/client" />
阅读全文
摘要:CSS 预处理语言:页面导航页 一、实验目标 二、实验任务
阅读全文
摘要:网页图形绘制:登录页面安全升级,JS动态生成图片验证码功能 一、实验目标 掌握 Canvas 的基本用法。 掌握使用 Canvas 绘制文本的方法。 掌握使用 Canvas 绘制线段的方法。 掌握使用 Canvas 导出图片的方法。 掌握 JS 的基本语法和程序结构。 掌握 JS 函数的定义和应用。
阅读全文
摘要:网页图形绘制:图片水印 一、实验目标: 掌握 Canvas 的基本用法。 掌握 Canvas 图片引用的方法。 掌握使用 Canvas 绘制文本的方法。 掌握 Canvas 图形变形的方法。 综合应用 Canvas 绘图技术,开发图片水印。 二、实验任务 使用 <canvas>标签结合 JS 制作带
阅读全文
摘要:项目搭建 一、环境准备 软件名称 软件版本 node v20.9.0 npm 10.1.0 Windows 10 专业版 22H2 vue 3.3.4 vue/cli 5.0.8 vue-router 4.2.5 vite 4.4.11 vitest 0.34.6 pinia 2.1.7 vue-t
阅读全文
摘要:定义Store Store 是用defineStore()定义的,它的第一个参数要求是一个独一无二的名字: import { defineStore } from 'pinia' // 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use`
阅读全文
摘要:Pinia —— Store 是什么? https://pinia.vuejs.org/zh/getting-started.html#what-is-a-store 一、Store 是什么? Store (如 Pinia) 是一个保存状态和业务逻辑的实体,它并不与你的组件树绑定。换句话说,它承载着
阅读全文
摘要:安装 Pinia 用你喜欢的包管理器安装 pinia: yarn add pinia # 或者使用 npm npm install pinia 安装结束。
阅读全文
摘要:介绍 Pinia https://pinia.vuejs.org/zh/introduction.html 一、简介 https://pinia.vuejs.org/zh/introduction.html#introduction Pinia 起始于 2019 年 11 月左右的一次实验,其目的是
阅读全文
摘要:Vuex 4.x —— Getter https://vuex.vuejs.org/zh/guide/getters.html 有时候我们需要从store中的state中派生出一些状态,例如对列表进行过滤并计数: computed: { doneTodosCount () { return this
阅读全文
摘要:Vuex 4.x —— state https://vuex.vuejs.org/zh/guide/state.html 一、单一状态树 https://vuex.vuejs.org/zh/guide/state.html#单一状态树 Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层
阅读全文
摘要:Vuex 4.x https://vuex.vuejs.org/zh/ 一、Vue是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 1.1、什么是 "状态管理模式"? 状态管理模
阅读全文
摘要:provide、inject、mixins、extends 一、provide 用于提供可以被后代组件注入的值。 interface ComponentOptions { provide?: object | ((this: ComponentPublicInstance) => object) }
阅读全文
摘要:异步组件 一、基本用法 在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件。Vue 提供了defineAsyncComponent方法来实现此功能: import { defineAsyncComponent } from 'vue' const AsyncComp =
阅读全文
摘要:动态组件 一、App.vue <template> <ul> <!-- 使用ul标签替代了错误的url标签,用于展示列表 --> <li v-for='(item, index) in tabList' :key='index' @click="() => { currentComponent.co
阅读全文
摘要:Teleport <Teleport>是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 一、基本用法 https://cn.vuejs.org/guide/built-ins/teleport.html#basic-usage 有时我们可能会遇到这样的场
阅读全文
摘要:Element Plus 组件库 一、Element Plus 基于 Vue 3,面向设计师和开发者的组件库。 二、完整导入 https://element-plus.org/zh-CN/guide/quickstart.html#完整引入 如果你对打包后的文件大小不是很在乎,那么使用完整导入会更方
阅读全文
摘要:插槽 一、匿名插槽 App.vue: <script setup> import A from './FancyButton.vue' </script> <template> <A> 这是 XXXX 数据 </A> </template> FancyButton.vue: <template> <
阅读全文
摘要:兄弟组件之间的传值 一、第一种方案 A组件-->父组件-->B组件 1.1、A组件 <template> <div> <h1>A组件</h1> <button @click="changeA">按钮</button> </div> </template> <script setup lang='ts
阅读全文