VUE3——003、VUE 项目中的文件结构(index.html、main.ts、App.vue)

        虽然是号称是小白初学,但本文只是对 VUE 小白,其它的基功还是有一丢丢的,不太懂的同学去看看一下详解,我这里记述的是自己的理解和观点。见谅!

        index.html:入口文件(以创建 vue3 项目的默认文件为例)

        <script type="module" src="/src/main.ts"></script>
        引入 main.ts 文件
        (index.html 中其它内容可以没,绿框中两条必需要有:创建容器、引入 main.ts)    

        src 文件夹中两个文件必不可少:main.ts 和 App.vue

        main.ts:

        import './assets/main.css'
        引入 样式表

        import { createApp } from 'vue'
        引入 createApp 用以 创建应用

        Import App from './App.vue'
        引入 App 根组件

        createApp(App).mout('#app')
        创建应用 App(根组件) 挂载 在 id 为 app 的元素中(以 #app 为容器)

        

        VUE 文件中必需要有的三个标签:
        <tmplate>
                <!-- html 代码(或是叫模板吗?)-->
        </tmplate>

        <script lang="ts">
                // js 或 ts 代码,交互 动效 的代码
                // ts 完全兼容 js,这里面写 js 代码也是可以的
                // ts 是 js 的超集
        </script>

        <style>
                /* css 样式代码 */
        </style>

        Vite 项目中, index.html 是项目的入口文件,在项目最外层。
        加载 index.html 后,Vite 解析 <script type="module" src="xxx"> 指向的 js 或 ts 文件。
        Vue3 中是通过 createApp 函数创建一个应用实例。

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

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

相关文章

ElasticSearch(es)倒排索引

目录 一、ElasticSearch 二、倒排索引 1. 正向索引 2. 倒排索引 具体细节 1. 文档分析 2. 索引构建 3. 索引存储 4. 词条编码 5. 索引优化 6. 查询处理 示例 总结 3. 正向和倒排 三、总结 倒排索引的基本概念 为什么倒排索引快 一、ElasticSearch Elasticsear…

Vue 3 中使用 InMap 绘制热力图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 Vue 3 中使用 InMap 绘制热力图 应用场景介绍 InMap 是一款强大的地图组件库&#xff0c;它提供了一系列丰富的可视化功能&#xff0c;包括热力图。热力图可以将数据点在地图上以颜色编码的方式可视化&#x…

论文阅读_字节的语音生成模型_Seed-TTS

英文名称: Seed-TTS: A Family of High-Quality Versatile Speech Generation Models 中文名称: Seed-TTS&#xff1a;高质量多功能语音生成模型系列 链接: http://arxiv.org/abs/2406.02430v1 代码: https://github.com/BytedanceSpeech/seed-tts-eval (评测工具) 演示网站&am…

找出所有点到一个点的距离的最小值

这个题的看一眼有点像树形dp&#xff0c;但是要怎么去优化我们转移方程呢 这是为什么呢&#xff0c;我们的树形dp很难考虑来之前的答案&#xff0c;那么d[y] 怎么办&#xff0c;我们可以先以1为根计算出以1为根的答案 #define _CRT_SECURE_NO_WARNINGS #include<bits/stdc.…

js 计算小数精度问题 ,引入decimal.js库 解决

安装 npm install --save decimal.js 引入 import Decimal from "decimal.js" 使用 new Decimal function adddDecimals (...decimals) { let sum new Decimal(0) decimals.forEach(decimal > { sum sum.plus(decimal) }) return sum.toNumber() } const res …

【刷题汇总 -- 笨小猴、 主持人调度(一)、分割等和子集】

C日常刷题积累 今日刷题汇总 - day0251、笨小猴1.1、题目1.2、思路1.3、程序实现 2、主持人调度&#xff08;一&#xff09;2.1、题目2.2、思路2.3、程序实现 3、分割等和子集3.1、题目3.2、思路3.3、程序实现 -- 0/1背包问题 4、题目链接 今日刷题汇总 - day025 1、笨小猴 1…

【MIT 6.5840(6.824)学习笔记】Raft

1 脑裂 许多容错系统使用一个单主节点来决定主副本。 MapReduce&#xff1a;由单主节点控制计算复制。GFS&#xff1a;主备复制数据&#xff0c;并由单主节点确定主拷贝的位置。VMware FT&#xff1a;主虚机和备份虚机之间复制指令&#xff0c;需要单点的Test-and-Set服务确认…

【JavaEE】通过Linux部署Web项目到云服务器上

一.配置部署所需的环境. 1.1 什么是部署? 要想知道什么是部署, 就要先了解我们在日常开发的过程中所设计到的几种环境: 开发环境: 软件开发环境指的是开发人员在创建、测试和部署软件应用程序时所需的一系列硬件、软件、工具和流程的集合。它是为了支持软件开发过程而构建的…

[算法]归并排序(C语言实现)

一、归并排序的定义 归并排序&#xff08;Merge sort&#xff09;是建立在归并操作上的一种有效的排序算法。该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。 二、归并排序的算法原理 归并排序的算法可以用递归法和非递归法来实现…

Git基本原理讲解、常见命令、Git版本回退、Git抛弃本地分支拉取仓库最新分支、如何将本地文件推送至github、.gitignore文件的使用

借此机会写篇博客汇总一下自己去公司实习之后遇到的一些常见关于Git的操作。 Git基本认识 Git把数据看作是对小型文件系统的一组快照&#xff0c;每次提交更新&#xff0c;或在Git中保存项目状态时&#xff0c;Git主要对当时的全部文件制作一个快照并保存这个快照的索引。同时…

【ROS 最简单教程 002/300】ROS 环境安装 (虚拟机版): Noetic

&#x1f497; 有遇到安装问题可以留言呀 ~ 当时踩了挺多坑&#xff0c;能帮忙解决的我会尽力 &#xff01; 1. 安装操作系统环境 Linux ❄️ VM / VirtualBox Ubuntu20.04 &#x1f449; 保姆级图文安装教程指路&#xff0c;有经验的话 可以用如下资源自行安装 ITEMREFERENCE…

vue3实战(通用后台管理系统)问题总结

npm install less vue-router element-plus -s elementplus 路由引入组件第二种写法&#xff1a; 使用动态的import( )语法(推荐使用)&#xff08;路由懒加载&#xff09; component:()>import(路径)component:()>import(/views/Main.vue)打包之后的文件将会异常的大&a…

《昇思25天学习打卡营第25天|第28天》

今天是打卡的第二十八天&#xff0c;实践应用篇中的计算机视觉中Vision Transformer图像分类。 从Vision Transformer&#xff08;ViT&#xff09;简介开始了解&#xff0c;模型结构&#xff0c;模型特点&#xff0c;实验的环境准备和数据读取&#xff0c;模型解析&#xff08…

深入探索PHP框架:Symfony框架全面解析

1. 引言 在现代Web开发领域&#xff0c;PHP作为一种广泛使用的服务器端脚本语言&#xff0c;其框架的选择对于项目的成功至关重要。PHP框架不仅能够提高开发效率&#xff0c;还能确保代码的质量和可维护性。本文将深入探讨Symfony框架&#xff0c;这是一个功能强大且灵活的PHP…

Teamcenter RAC开发,创建Item的两种方式

1、如果描述不必填&#xff0c;采用胖客户端的创建方式 newItem itemType.create(newItemId, "", targetTypeComp.getTypeName(), item_name, // "test1", null, null2、如果描述必填&#xff0c;则需要采用SOA的创…

C++11中的右值引用以及移动构造等

目录 一、右值引用 1.左值引用和右值引用 2.左值引用与右值引用比较 3.右值引用使用场景和意义 1️⃣ 传返回值 2️⃣ STL中的应用 4.完美转发 模板中的&& 万能引用&#xff08;引用折叠&#xff09; 二、 新的类功能 1.默认成员函数 2.类成员变量初始化 3.…

线程池学习(一)

1.线程池有什么作用 降低资源消耗&#xff1a;通过池化技术重复利⽤已创建的线程&#xff0c;降低线程创建和销毁造成的损耗。 提⾼响应速度&#xff1a;任务到达时&#xff0c;⽆需等待线程创建即可⽴即执⾏。 提⾼线程的可管理性&#xff1a;线程是稀缺资源&#xff0c;如果…

ProxmoxPVE虚拟化平台--安装PVE虚拟机

Proxmox 虚拟机 Proxmox是一个基于Debian Linux和KVM的虚拟化平台&#xff0c;‌它提供了虚拟化的环境&#xff0c;‌允许用户在同一台物理机上运行多个虚拟机。‌Proxmox虚拟环境&#xff08;‌PVE&#xff09;‌是一个开源项目&#xff0c;‌由Proxmox Server Solutions Gmb…

Power Tower

Problem - D - Codeforces 牛客和codeforce都有 递归处理l,r&#xff0c;终点是lr && mod1 用扩展欧拉定理 // Problem: D. Power Tower // Contest: Codeforces - Codeforces Round 454 (Div. 1, based on Technocup 2018 Elimination Round 4) // URL: https://c…

【Socket 编程】应用层自定义协议与序列化

文章目录 再谈协议序列化和反序列化理解 read、write、recv、send 和 tcp 为什么支持全双工自定义协议网络计算器序列化和反序列化 再谈协议 协议就是约定&#xff0c;协议的内容就是约定好的某种结构化数据。比如&#xff0c;我们要实现一个网络版的计算器&#xff0c;客户端…