随笔分类 - 前端 web 开发
摘要：Vue3 项目开发专题精讲【左扬精讲】—— 基于 Vue3+TypeScript+Vite 的在线教育平台前端系统设计与实现文档 模仿 https://www.xuetangx.com 学堂在线 学堂在线 是由清华大学研发出的中文MOOC平台，是教育部在线教育研究中心的研究交流和成果应用平台，面向全
阅读全文
摘要：vuejs3.0 从入门到精通【左扬精讲】—— 从原生到原子化：一文梳理现代 CSS 技术体系（2025 版） 作为前端开发的核心技术之一，CSS（层叠样式表）早已不是 “写几行样式” 那么简单。 随着项目规模扩大和工程化需求升级，CSS 技术栈也衍生出众多分支 —— 从解决复用性的预处理器，到隔离
阅读全文
摘要：商城网站系统（基于 Vue3+TypeScript+Vite 的天天新鲜商城网站系统设计与实现） https://vue3-fresh-mall.zuoyang.tech/ 在前端技术高速迭代的当下，用户对 web 应用的性能、稳定性与开发效率提出了更高要求。Vue3 凭借 Composition
阅读全文
摘要：企业网站系统（从 Vite 搭建 Vue3 与 TypeScript 企业网站系统开发实战） https://github.com/zuoyangs/vue3-enterprise-website https://vue3-enterprise-website.zuoyang.tech/ 在企业数字
阅读全文
摘要：解决 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
阅读全文
浙公网安备 33010602011771号