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

news2024/9/8 23:35:19

        虽然是号称是小白初学,但本文只是对 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.coloradmin.cn/o/1957851.html

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

相关文章

springboot+vue+mybatis线上选课系统+PPT+论文+讲解+售后

在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对学生选课信息管理的提升&#xff0c;也…

顺序表的代码实现

顺序表的代码实现 1.认识什么是顺序表1.1顺序表的优缺点 2.实现顺序表代码准备3.顺序表的代码实现3.1 顺序表结构体的定义3.2 顺序表的初始化3.3 顺序表的销毁3.4 顺序表的输出打印3.5顺序表的扩容3.6 顺序表的头部插入(头插)3.7 顺序表的头部删除(头删)3.8 顺序表的尾部插入(尾…

会话存储、本地存储,路由导航守卫、web会话跟踪、JWT生成token、axios请求拦截、响应拦截

1、会话存储、本地存储 前端浏览器中存储用户信息&#xff0c;会话存储、本地存储、cookie 会话存储&#xff08;sessionStorage&#xff09;&#xff1a;会话期间存储&#xff0c;关闭浏览器后&#xff0c;数据就会销毁 sessionStorage.setItem("account",resp.d…

Unity Apple Vision Pro 开发:如何把 PolySpatial 和 Play To Device 的版本从 1.2.3 升级为 1.3.1

XR 开发社区&#xff1a; SpatialXR社区&#xff1a;完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 &#x1f4d5;教程说明 本教程将介绍如何把 Unity 的 PolySpatial 和 Play To Device 版本从 1.2.3 升级为 1.3.1。 &#x1f4d5;Play To Device 软件升级 ht…

科学设计程序员面试内容,破解“八股文”之弊

“八股文”在实际工作中是助力、阻力还是空谈&#xff1f; 作为现在各类大中小企业面试程序员时的必问内容&#xff0c;“八股文”似乎是很重要的存在。但“八股文”是否能在实际工作中发挥它“敲门砖”应有的作用呢&#xff1f;有IT人士不禁发出疑问&#xff1a;程序员面试考…

数据结构之线性表(顺序表的实现)

目录 一、线性表的原理 二、线性表的实现&#xff08;顺序表&#xff09; 1.定义顺序表 2.初始化顺序表 3.判断顺序表是否为空 4.获取顺序表的长度 5.向顺序表中插入元素 6.删除指定位置的元素 7.遍历顺序表 8.得到指定位置的元素 三、打印测试功能 1.测试 2.结果…

【Ant Design Vue的更新日志】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共同学习、交流进步! 以下是Ant Design Vue的更新日志 版本1.7.0(发布日期:2023年4月) …

python之代码简化式(列表、字典生成式,递归函数,迭代器(iter)和生成器(yield)、匿名函数(lambda)的使用)(12)

文章目录 前言1、列表、字典生成式2、递归函数2.1 python中代码的递归深度&#xff08;扩展&#xff09; 3、拓展&#xff1a;迭代器和生成器3.1 迭代器&#xff08;iter&#xff09;3.2 生成器&#xff08;yield&#xff09; 4、匿名函数&#xff08;lambda&#xff09;4.1 ma…

康师傅JAVA核心内容

链接&#xff1a;康师傅JAVA核心内容 (qq.com)

LeetCode刷题笔记第682题:棒球比赛

LeetCode刷题笔记第682题&#xff1a;棒球比赛 题目&#xff1a; 想法&#xff1a; 遍历输入的列表&#xff0c;按照规则将分数和操作依次进行&#xff0c;存储在新建的列表中&#xff0c;最终输出列表中的元素和&#xff0c;代码如下&#xff1a; class Solution:def calPo…

Ubuntu、centos、openEuler安装docker

目录 1.在 Ubuntu 上安装 Docker 1. 1 更新软件包 1. 2 安装必要的依赖 1.3 添加 Docker 的 GPG 密钥 1.4 添加 Docker 仓库 1.5 更新软件包 1.6 安装 Docker 1.7 启动并启用 Docker 服务 1.8 验证安装 1.9 运行测试容器 1.10 非 root 用户运行 Docker 2.在 CentOS…

前端基于 axios 实现批量任务调度管理器 demo

一、背景介绍 这是一个基于 axios 实现的批量任务调度管理器的 demo。它使用了axios、promise 等多种技术和原理来实现批量处理多个异步请求&#xff0c;并确保所有请求都能正确处理并报告其状态。 假设有一个场景&#xff1a;有一个任务列表&#xff0c;有单个任务的处理功能…

OpenGL学习 1

一些唠叨&#xff1a; 很多时候&#xff0c;都被Live2d吸引&#xff0c;去年想给网页加个live2d看板娘&#xff0c;结果看不懂live2d官方给的SDK&#xff0c;放弃了。今天又想弄个live2d桌宠&#xff0c;都已经在网上找到Python 的 Live2D 拓展库了&#xff0c;并提供了用QT实现…

领航者-跟随者编队算法 定义+特性+原理+公式+Python示例代码(带详细注释)

文章目录 引言定义特性基本原理和公式推导基本原理公式推导运动模型领航者的控制跟随者的控制 示例推导 实现步骤和代码实现实现步骤Python代码实现&#xff08;带详细注释&#xff09;代码运行结果代码和图表说明 应用案例优化和挑战优化挑战 结论 引言 在现代科技的发展中&a…

PointCLIP: Point Cloud Understanding by CLIP

Abstract 近年来&#xff0c;基于对比视觉语言预训练(CLIP)的零镜头和少镜头学习在二维视觉识别中表现出了令人鼓舞的效果&#xff0c;该方法在开放词汇设置下学习图像与相应文本的匹配。然而&#xff0c;通过大规模二维图像-文本对预训练的CLIP是否可以推广到三维识别&#x…

【状语从句】

框架 概念&#xff0c;特点主将从现连接词时间条件地点结果方式让步原因目的比较省略倒装 解读 1【概念&#xff0c;特点】 一个完整的句子&#xff0c;去修饰另一个完整句子中的动词&#xff0c;称为状语从句&#xff1b;特点&#xff1a;从句完整&#xff0c;只用考虑连接词是…

扩展------正向代理和反向代理怎么理解?

今天看博客园&#xff0c;突然看到正向代理和反向代理&#xff0c;发现自己还不会就稍微研究了一下。 正向代理----(看做是服务员) 当我们进饭店吃饭&#xff0c;我们不可能会直接去后厨叫厨师给我们做菜&#xff0c;而是通过服务员去通知&#xff0c;这个就叫做正向代理。 再…

keras在GPU环境下配置,conda虚拟环境并安装TensorFlow,cudatoolkit,cudann和jupyter等

前言&#xff1a;要有版本意识 在我个人的多次配置环境过程中&#xff0c;很多时候失败或者后序出现问题&#xff0c;往往都是版本不匹配的问题。所以在本次安装中&#xff0c;提前重点了解了下版本匹配情况。各位千万不要跳过这部分&#xff0c;因为这不仅是基础知识了解的过…