Vue3【三】 使用TS自己編寫APP組件

Vue3【三】 使用TS自己編寫APP組件

運行截圖

在這里插入圖片描述

目錄結構

注意目錄層級

在這里插入圖片描述

文件源碼

APP.vue
<template><div class="app"><h1>你好世界!</h1></div>
</template><script lang="ts">
export default {name:'App' //組件名字
}</script><style>.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
main.ts
// 引入createApp用于創建應用
import {createApp} from 'vue'
// 引入APP根組件
import App from './App.vue'createApp(App).mount('#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>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/23953.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/23953.shtml
英文地址,請注明出處:http://en.pswp.cn/web/23953.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JavaScript的核心語法

JavaScript JavaScript&#xff1a;JavaScript的組成&#xff1a;核心語法&#xff1a;Hello&#xff1a;變量&#xff1a;JS的基本數據類型&#xff1a;特殊點&#xff1a; 數組&#xff1a;流程控制語句&#xff1a;函數&#xff1a;函數的重載&#xff1a;函數的遞歸:預定義…

在 VSCode 中搭建 Flutter 開發環境并運行項目

要在 Visual Studio Code (VSCode) 中運行 Flutter 項目并啟動虛擬機&#xff08;例如 Android Emulator&#xff09;&#xff0c;可以按照以下步驟進行設置和操作&#xff1a; 一、安裝 Flutter 和 Dart 插件 安裝 Flutter SDK&#xff1a; 前往 Flutter 官網 下載并安裝 Flu…

離散數學答疑 3

&#xff5e;A&#xff1a;A的補集 有時候空集是元素&#xff0c;有時候就是純粹的空集 A-B的定義&#xff1a; 笛卡爾積&#xff1a; 求等價關系&#xff1a;先求劃分再一一列舉 不同劃分&#xff1a;分幾塊。一塊&#xff1a;兩塊&#xff1a;三塊&#xff1a;分別計算 Ix是…

自然語言處理(NLP)—— 主題建模

1. 主題建模的概念 主題建模&#xff08;Topic Modeling&#xff09;是一種用于發現文檔集合&#xff08;語料庫&#xff09;中的主題&#xff08;或稱為主題、議題、概念&#xff09;的統計模型。在自然語言處理和文本挖掘領域&#xff0c;主題建模是理解和提取大量文本數據隱…

【常用工具系列】Git 教程——從入門到大師

目錄 前言一、Git 基礎1-1、Git 簡介與安裝安裝 Git 1-2、 Git 工作流程1-3、 Git 配置與管理用戶配置查看配置 1-4、 Git 倉庫操作克隆倉庫推送更改拉取更新 1-5 Git 分支管理創建分支切換分支刪除分支解決沖突 二、 Git 進階2-0、 Git 標簽使用創建標簽查看標簽檢出標簽推送標…

「動態規劃」如何求最小路徑和?

64. 最小路徑和https://leetcode.cn/problems/minimum-path-sum/description/ 給定一個包含非負整數的m x n網格grid&#xff0c;請找出一條從左上角到右下角的路徑&#xff0c;使得路徑上的數字總和為最小。說明&#xff1a;每次只能向下或者向右移動一步。 輸入&#xff1a;…

《嵌入式系統導論》

計算題 已知位帶別名基地址為0x220000000,計算位于位帶區的0x200FFFFF地址的數據位7,計算它對應的位帶別名區地址。 別名地址=位帶別名基地址+字節偏移量x32+位號x4 別名地址=0x22000000+(0x200FFFFF -0x20000000)*32+7*4=0x220000807 分析如下基本定時器配置語句。 { ………

ctfshow-web入門-命令執行(web37-web40)

目錄 1、web37 2、web38 3、web39 4、web40 命令執行&#xff0c;需要嚴格的過濾 1、web37 使用 php 偽協議&#xff1a; ?cphp://input post 寫入我們希望執行的 php 代碼&#xff1a; <?php system(tac f*);?> 拿到 flag&#xff1a;ctfshow{5c555d9a-6f55…

Mongodb數組元素更新之使用$定位數組第一個元素

學習mongodb&#xff0c;體會mongodb的每一個使用細節&#xff0c;歡迎閱讀威贊的文章。這是威贊發布的第63篇mongodb技術文章&#xff0c;歡迎瀏覽本專欄威贊發布的其他文章。 閱讀了不少Mongodb的文章&#xff0c;也和同事交流過。Mongodb數組更新是比較難理解的地方&#x…

EXCEL多sheet添加目錄跳轉

EXCEL多sheet添加目錄跳轉 背景 excel中有幾十個sheet&#xff0c;點下方左右切換sheet太耗時&#xff0c;希望可以有根據sheet名超鏈接跳轉相應sheet&#xff0c;處理完后再跳回原sheet。 方案一 新建目錄sheet&#xff0c;在A1寫sheet名&#xff0c;右鍵選擇最下方超鏈接…

問題:材料題請點擊右側查看材料問題 查看材料 #學習方法#經驗分享#學習方法

問題&#xff1a;材料題請點擊右側查看材料問題 查看材料 A.Colleges may reduce their enrollment. B.Top universities become increasingly competitive. C.Universities become selective in student admission. D.Colleges invest less in academy and infrastructure…

Go 文件壓縮解壓

在Go語言中&#xff0c;archive/zip包提供了創建、讀取和解壓縮ZIP格式文件的功能。 一、創建ZIP文件并添加內容----壓縮 package mainimport ("archive/zip""bytes""fmt""io""log""os" )func main() {// 創建一…

el-input中change事件造成的坑

el-input中change事件造成的坑 一、change事件定義二、如果僅回車時候觸發 一、change事件定義 僅在輸入框失去焦點或用戶按下回車時觸發 二、如果僅回車時候觸發 <el-inputv-model.trim"questionInput"placeholder"請輸入你的問題&#xff0c;按回車發送&…

智慧視覺怎么識別視頻?智慧機器視覺是通過什么步驟識別視頻的?

智慧視覺功能怎么識別視頻&#xff1f;智慧視覺是搭載在智能設備比如手機、AI盒子、機器視覺系統上的一個應用程序或特性&#xff0c;采用計算機視覺和人工智能的技術來識別圖像或視頻中的內容。如果想了解視頻識別&#xff0c;就要明白智慧視覺功能會涉及的以下幾個關鍵步驟和…

pxe自動裝機

概念 pxe是c/s模式。允許客戶端通過網絡從遠程服務器&#xff08;服務端&#xff09;下載引導鏡像&#xff0c;加載安裝文件&#xff0c;實現自動化安裝操作系統。 無人值守&#xff1a;安裝選項不需要人為干預&#xff0c;可以自動化實現。 pxe的優點&#xff1a;1.規模化&…

機器人阻抗控制中的機械阻抗模型

機器人阻抗控制中的機械阻抗模型主要涉及到通過修改機器人與環境接觸作業的動力學模型&#xff0c;使其等效為一個期望的阻抗&#xff08;彈簧-質量-阻尼&#xff09;模型。以下是對機械阻抗模型在機器人阻抗控制中的詳細解釋&#xff1a; 阻抗控制原理&#xff1a; 機器人阻抗…

Python——泰坦尼克號數據分析

目錄 ??1.數據集(部分數據) ?? 2、導入數據集與必要模塊 ?? 3.數據預處理 1?? isnull函數查看有無缺失值 2??fillna函數填充缺失值 ?? Age字段使用平均值填充缺失值 ?? Embarked字段填充缺失值 3?? 刪除缺失值較多的字段 ?? 4.數據可視化 1?? di…

流媒體服務器SMS-語音對講(二)

1.簡介 上篇文件介紹了流媒體與設備之間可能的交互場景&#xff0c;本文將介紹客戶端或者web端與攝像頭對講的總體流程。 老規矩&#xff0c;介紹一下本人的開源流媒體&#xff0c;點個star&#xff0c;有興趣一起開發的朋友也可以聯系本人&#xff1a;https://gitee.com/inyem…

PostgreSQL的發布和訂閱功能

發布和訂閱功能在 PostgreSQL 9.0 版本中首次引入,并進一步改進和增強了后續版本中。所以,從 PostgreSQL 9.0 版本開始,就可以使用發布和訂閱功能來實現數據復制和同步 發布和訂閱功能在 PostgreSQL 中提供了一種靈活、可靠的數據復制和同步機制,具有許多優點和一些缺點:…

[數據集][目標檢測]醫療防護服檢測數據集VOC+YOLO格式649張7類別

數據集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路徑的txt文件&#xff0c;僅僅包含jpg圖片以及對應的VOC格式xml文件和yolo格式txt文件) 圖片數量(jpg文件個數)&#xff1a;649 標注數量(xml文件個數)&#xff1a;649 標注數量(txt文件個數)&#xff1a;649 標注類別…