Vue中目录以及文件内容简单分析

src文件下目录分析:
在这里插入图片描述
App.vue文件中内容:

vue文件中基本的三个结构,template(结构)、script(行为) 、style(样式)。

<template><!-- html结构 --><div class="app"><h1>你好啊</h1></div>
</template><script lang="ts">//  写js代码 或者 ts代码export default{name: 'App' //组件的名字}
</script><style>/* 写样式 */.app{background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>

mian.ts文件中内容

import { createApp } from 'vue'  //创建应用 --- 造花盆 
import App from './App.vue'      //App组件就是根基 --- 花的根createApp(App).mount('#app') //创建一个应用 根组件就是 App---把花已经插在了花盆里面//.mount('#app')挂载到id为app的容器里面---就是把 花盆 摆放在那个位置。

index.html文件中内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

总结:

  • Vite项目中,index.html 是文件的入口文件,在项目的最外层。
  • 加载 index.html后,Vite解析 指向的JavaScript。
  • Vue3 中是通过 createApp 函数创建一个应用实例。

我还发现一个有意思的一点,入口文件是index.html ,这个文件里面去解析main.ts,main.ts里面又导入了App.vue文件,在mian.ts文件中,它又挂载到了index.html文件中的一个容器内。


power by 尚硅谷

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

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

相关文章

linux释放交换空间-Swap

确保剩余内存比swap内存空间大&#xff0c;再执行以下操作&#xff0c;否则会宕机&#xff01; 查看swap分区 swapon -s 会查看到你的swap分区位置 停止swap分区 停止swap分区是将swap内存释放到实际内存中 swapoff /dev/dm-1开启swap分区 swap分区内存成功释放到实际内…

C# 如何读取Excel文件

当处理Excel文件时&#xff0c;从中读取数据是一个常见的需求。通过读取Excel数据&#xff0c;可以获取电子表格中包含的信息&#xff0c;并在其他应用程序或编程环境中使用这些数据进行进一步的处理和分析。本文将分享一个使用免费库来实现C#中读取Excel数据的方法。具体如下&…

2 - 表结构 | MySQL键值

表结构 | MySQL键值 表管理1. 库的操作2. 表的操作表的创建与删除表的修改复制表 3. 管理表记录 数据类型数值类型字符类型&#xff08;汉字或者英文字母&#xff09;日期时间类型 表头存储与日期时间格式的数据枚举类型 数据批量处理 表管理 客户端把数据存储到数据库服务器上…

开始使用MEVN技术栈开发01 概述

开始使用MEVN技术栈开发01 概述 简介 Welcome to Beginning MEVN Stack! This book focuses on the key tasks and concepts to get you started to learn and build MEVN stack applications in a faster pace. 欢迎阅读《MEVN堆栈入门》&#xff01;本书重点介绍关键任务…

Serverless Framework:开发无服务器应用的最佳工具 | 开源日报 No.133

serverless/serverless Stars: 45.6k License: MIT 该项目是 Serverless Framework&#xff0c;它是一个命令行工具&#xff0c;使用简单易懂的 YAML 语法部署代码和云基础设施以满足各种无服务器应用程序需求。支持 Node.js、Typescript、Python、Go 等多种编程语言&#xff…

【AI】人类视觉感知特性与深度学习模型(1/2)

目录 一、关于人类视觉感知 1.1 视觉关注 1.自上而下&#xff08;Top-down&#xff09;的视觉关注 ​编辑 2.自下而上&#xff08;Bottom-up&#xff09;的视觉关注 3.区别和记忆点 1.2 视觉掩盖 1.常见的视觉掩盖效应 2.恰可识别失真&#xff08;Just Noticeable Dif…

概念解析 | Shapley值及其在深度学习中的应用

注1:本文系“概念解析”系列之一,致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是:Shapley值及其在深度学习中的应用。 1 背景介绍 在机器学习和数据分析中,理解模型的预测是非常重要的。尤其是在深度学习黑盒模型中,我们往往难以直观地理解模型的预测行为。为…

软件测试/测试开发丨接口测试之Postman 安装与使用

Postman 安装 官网下载地址 www.postman.com/downloads Postman 使用 发送get请求 新建请求 填写请求方式&#xff1a;GET 填写请求 URL&#xff1a; ceshiren.com/httpbin.ceshiren.com/get 填写请求参数&#xff1a; para_key para_value 发送 POST 请求 请求方式&…

1. Spring概述

概述 Spring 是一个开源框架Spring 为简化企业级开发而生&#xff0c;使用 Spring&#xff0c;JavaBean 就可以实现很多以前要靠 EJB 才能实现的功能。同样的功能&#xff0c;在 EJB 中要通过繁琐的配置和复杂的代码才能够实现&#xff0c;而在 Spring 中却非常的优雅和简洁。…

2023年总结(2023年1月1日至2023年12月31日)

前言 时间过得真快啊&#xff0c;一年又过去了。 从去年11月换了家公司后&#xff0c;工作就稳定多了&#xff0c;做的工作也是我喜欢做的工作——摄像头驱动&#xff0c;平时也挺轻松的&#xff0c;偶尔有事儿的时候会压力大点&#xff0c;加点班&#xff0c;其他都还好&…

4年微博热搜数据,一次拿走

又是新的一年了&#xff0c;从2020年开始&#xff0c;就养成了定时备份各大平台热搜数据的习惯&#xff0c;微博&#xff0c;知乎都在备份&#xff0c;今天给大家看一下从2020年到2023年的微博热搜数据情况 这是2022年的备份数据&#xff0c;每天的热搜数据一个文件&#xff0c…

2.2 设计FMEA步骤二:结构分析

2.2.1 目的 设计结构分析的目的是将设计识别和分解为系统、子系统、组件和零件,以便进行技术风险分析。其主要目标包括: 可视化分析范围结构化表示:方块图、边界图、数字模型、实体零件识别设计接口、交互作用和间隙促进顾客和供应商工程团队之间的协作(接口责任)为功能分…

计算机组成原理——中央处理器cpu21-40

18、某计算机的指令流水线由4个功能段组成&#xff0c;指令流经各功能段的时间&#xff08;忽略各功能段之间的缓存时间&#xff09;分别为90ns、80ns、70ns和60ns&#xff0c;则该计算机的CPU时钟周期至少是多少。A A、 90ns     B、 80ns C、 70ns     D、 60ns …

【日常聊聊】解决深度学习模型挑战:解释性与鲁棒性的平衡

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a; 日常聊聊 ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 1. 数据偏见&#xff1a; 介绍和解释&#xff1a; 解决方法&#xff1a; 2. 复制训练数据&#xff1a; 介绍和解决方法&am…

【形式语言与自动机/编译原理】CFG-->Greibach-->NPDA(2)

本文将详细讲解《形式语言与自动机》&#xff08;研究生课程&#xff09;或《编译原理》&#xff08;本科生课程&#xff09;中的上下文无关文法&#xff08;CFG&#xff09;转换成Greibach范式&#xff0c;再转成下推自动机&#xff08;NPDA&#xff09;识别语言是否可以被接受…

堆的应用:堆排序和TOP-K问题

上次才讲完堆的相关问题&#xff1a;二叉树顺序结构与堆的概念及性质&#xff08;c语言实现堆 那今天就接着来进行堆的主要两方面的应用&#xff1a;堆排序和TOP-K问题 文章目录 1.堆排序1.1概念、思路及代码1.2改良代码&#xff08;最初建立大堆用AdjustDow&#xff09; 2. TO…

【AIGC-图片生成视频系列-5】I2V-Adapter:一种用于视频扩散模型的通用图像生成视频适配器

目录 一. 项目与贡献概述 二. 方法详解 a. 整体框架图 b. 帧相似性先验 三. 一般化图像生成动画结果 四. 基于个性化 T2I 模型的动画结果 五. 结合ControlNet动画结果 六. 项目论文和代码 七. 个人思考与总结 在快速发展的数字内容生成领域&#xff0c;焦点已从文本到…

Feign远程调用丢失请求头问题处理--异步任务执行远程请求线程丢失请求属性问题处理

在关于Feign远程调用丢失请求头问题处理中解决了远程调用发送请求丢失老请求中请求头的问题。A方法接收浏览器中的请求&#xff0c;B方法是A方法中嵌套方法用来发送Feign远程调用。如果B方法是在异步任务CompletableFuture.runAsync(()->{},Executor)中执行并启用线程池分配…

Linux:apache优化(7)—— 日志分割|日志合并

作用&#xff1a;随着网站访问量的增加&#xff0c;访问日志中的信息会越来越多&#xff0c; Apache 默认访问日志access_log单个文件会越来越大&#xff0c;日志文件体积越大&#xff0c;信息都在一个文件中&#xff0c;查看及分析信息会及不方便。 分割 实现方式&#xff1a…

2024.1.1 hive_sql 题目练习,开窗,行列转换

重点知识: 在使用group by时&#xff0c;select之后的字段要么包含在聚合函数里&#xff0c;要么在group by 之后 进行行转列,行转列的核心就是使用concat_ws函数拼接(分隔符,内容), -- 以及collect_list函数进行收集,list不去重, set去重无序 列转行,核心就是使用炸裂函数把东…