随笔分类 -  Vue3专题精讲

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

levels of contents
点击右上角即可分享
微信分享提示