文章目录

  • 1 基于vite创建
    • 1.1 对比webpack和vite
    • 1.2 创建工程
    • 1.3 启动项目
  • 2 调试工具Vue.js Devtools
  • 3 src结构
    • 3.1 index.html
    • 3.2 main.ts
    • 3.3 App.vue(根组件)
  • 4 示例(Vue2的语法)
    • 4.1 Person.vue
    • 4.2 App.vue
    • 4.3 选项式API对比组合式API
    • 4.4 程序流程
  • 5 示例(Vue3的语法)
    • 5.1 setup概述
    • 5.2 App.vue
    • 5.3 Person.vue
      • 5.3.1 setup的常规写法
      • 5.3.2 setup的语法糖
      • 5.3.3 插件vite-plugin-vue-setup-extend
  • 6 参考附录

基于vite创建工程,安装调试工具Vue.js Devtools,分析src结构,举例对比vue2语法和vue3语法,介绍vue3的setup语法糖,引入插件用于为组件命名。

1 基于vite创建

在这里插入图片描述
在这里插入图片描述

1.1 对比webpack和vite

前端构建工具webpack和vite。
在这里插入图片描述

1.2 创建工程

CMD>d:
CMD>cd CODEVue

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/87846.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/87846.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/87846.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上线iOSApp前抓包工具协作保障接口行为一致性(iOS抓包)

项目上线前,你是否总会担心“接口是不是在某个边缘条件下表现不一致”?哪怕单元测试通过、接口文档齐全,真到线上用户手上,总还是可能出现一些环境相关的异常。 最近参与某App大版本上线前的质量验证流程,我们特别安排…

Java可变参数:灵活编程的秘密武器

Java可变参数的理解与应用 Java中的可变参数(Varargs)允许方法接受数量不定的同类型参数,简化了方法调用时的参数传递。可变参数通过在参数类型后添加...实现,本质上是一个数组,但在调用时可以传入多个单独的参数。 …

汽车 CDC威胁分析与风险评估

汽车 CDC(连续阻尼控制系统)的威胁分析与风险评估需结合其技术特性、应用场景及行业标准展开。以下是详细解析及实例说明: 一、CDC 系统技术原理与结构 CDC(Continuous Damping Control)通过实时调节悬挂阻尼力提升驾…

TensorFlow 安装与 GPU 驱动兼容(h800)

环境说明TensorFlow 安装与 GPU 驱动兼容CUDA/H800 特殊注意事项PyCharm 和终端环境变量设置方法测试 GPU 是否可用的 Python 脚本 # 使用 TensorFlow 2.13 在 NVIDIA H800 上启用 GPU 加速完整指南在使用 TensorFlow 进行深度学习训练时,充分利用 GPU 能力至关重要…

Laravel 项目中图片上传后无法访问的问题

情况: Laravel 提供了 php artisan storage:link 命令,用于创建符号链接(Symbolic Link),将 storage/app/public 映射到 public/storage。但是上传图片之后 文件目录确实有 但是无法访问。 1. 删除已经创建的 rm -rf…

Tesollo携人形机器人手进军国内市场

Tesollo灵巧手是Tesollo公司研发的一系列机器人灵巧手产品,涵盖两指到五指的设计 产品型号与特点 Delto-5F五指灵巧手:具备20个自由度,每个手指配备4个独立关节,抓握力达到7公斤,每个关节空载可达75转/分钟&#xff0…

Python文件操作的“保险箱”:with语句深度实战指南

目录 一、with语句的底层运作原理 资源获取阶段 资源释放阶段 二、文件操作实战场景解析 场景1:基础文件读写 场景2:异常处理进阶 场景3:复合资源管理 三、自定义上下文管理器 四、with语句的性能考量 五、实战经验总结 在Python编程中,文件操作是日常开发的高频…

openKylin高校沙龙 | 走进成都高校,推动开源技术交流与人才培养

openKylin高校沙龙 | 成都高校 4月25日,CCF开源发展委员会“开源高校行”暨红山开源openKylin高校行成都站圆满举办,这场连接两所大学的开源知识盛会,为成都信息工程大学与电子科技大学的300余名与会师生带来了前沿的行业思考与技术实践。Op…

即梦3.0更新后市面上的的评价如何?

设计师紧握数位板缩在墙角,全息投影中的AI正在生成同风格设计图,地面倒影显示“人类设计师生涯倒计时”。当最新一代AI绘图工具悄然开启测试时,设计圈陷入集体震动——有人惊叹“以后还干XX,都回家卖煎饼吧”,也有人彻…

haproxy搭建nginx网站访问

文章目录 一.案例概述2.1 HTTP请求2.2 负载均衡常用调度算法①RR(Round robin)②LC(least connections)③SH(source hashing) 2.3 常见的web群集调度器3.实验环境 二.实验步骤1.两台web网站步骤相同 安装we…

进程间通信之socketpair

进程间通信之socketpair 源代码 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #include <sys/wait.h>int main() {//父子通讯管道int m_pipe[2];//创建管道if(socketpa…

跟着AI学习C# Day29

&#x1f4c5; Day 29&#xff1a;C# 综合进阶知识回顾与职业发展建议 ✅ 学习目标&#xff1a; 回顾 C# 进阶学习路径&#xff1b;总结核心知识点&#xff0c;构建完整的技能体系&#xff1b;理解 C# 高级开发者应具备的核心能力&#xff1b;探索 C# 在不同技术领域的应用场…

茶席布置实训室:传承与创新的茶文化空间

一、茶席布置实训室的重要意义 茶席布置实训室是茶文化传承与创新的重要载体。在现代社会&#xff0c;茶文化的弘扬不仅是对传统的尊重&#xff0c;更是对生活品质和精神境界的追求。茶席布置实训室为人们提供了一个专业、系统地学习和实践茶文化的场所。它将理论知识与实际操…

jar is missing

在父POM中通过dependencyManagement统一管理版本&#xff0c;然后在子模块中省略版本号。

Linux 内核中 TCP 协议栈的输出实现:tcp_output.c 文件解析

在网络通信领域,TCP(传输控制协议)作为核心的传输层协议,确保了数据在网络中的可靠传输。Linux 内核中的 TCP 协议栈实现复杂而高效,其中 net/ipv4/tcp_output.c 文件是整个 TCP 协议栈的关键组成部分,负责处理数据包的发送、重传、连接管理等核心功能。本文将深入解析该…

MySQL分页原理与慢SQL优化实战

分页查询的本质 在Web应用中&#xff0c;分页是处理大量数据的常见需求。MySQL中的分页通常使用LIMIT offset, size语法实现&#xff0c;例如&#xff1a; SELECT * FROM users ORDER BY id LIMIT 10000, 20; 这条语句看似简单&#xff0c;但隐藏着性能陷阱。让我们深入理解…

Taro:跨端开发的终极解决方案

在当今多终端并存的互联网时代&#xff0c;开发者经常面临一个难题&#xff1a;如何高效地为不同平台&#xff08;如微信小程序、H5、React Native 等&#xff09;开发功能一致的应用&#xff1f;传统的开发方式需要针对每个平台单独编写代码&#xff0c;不仅效率低下&#xff…

STM32F103C8T6 学习笔记摘要(三)

第一节 跑马灯实验 1. 了解电路 结构图 说明一下&#xff1a; 那几个LED的引脚线和数码管的是一样的&#xff0c;如果不想让LED亮&#xff0c;就可以把J11的接线帽拔了这里的引脚是PA0-PA7 原理图 说明一下&#xff1a; 当J11接线帽盖上时&#xff0c;VCC3.3_LED就会有一个正…

GitHub Copilot 配置快捷键

GitHub Copilot 常用快捷键&#xff08;VS Code&#xff09; 功能快捷键&#xff08;Windows/Linux&#xff09;快捷键&#xff08;macOS&#xff09;接受建议&#xff08;选中的&#xff09;TabTab下一个建议Alt ]Option ]上一个建议Alt [Option [手动触发建议Ctrl Ente…

C++异常处理:深入理解与实践指南

C异常处理&#xff1a;深入理解与实践指南 在现代编程中&#xff0c;异常处理是确保程序健壮性和可靠性的重要机制。C作为一种功能强大的编程语言&#xff0c;提供了丰富的异常处理机制&#xff0c;帮助开发者应对程序运行时可能出现的各种意外情况。本文将深入探讨C异常处理的…