Vue3【三】 使用TS自己编写APP组件

Vue3【三】 使用TS自己编写APP组件

运行截图

目录结构

注意目录层级

文件源码

APP.vue
html 复制代码
<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
html 复制代码
// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入APP根组件
import App from './App.vue'

createApp(App).mount('#app')
index.html
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>
相关推荐
gnip4 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
~无忧花开~5 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
L李什么李7 小时前
HTML——使用表格制作简历
前端·javascript·html
我有一棵树8 小时前
html 滚动条相关开发经验总结
前端·javascript·html
正义的大古8 小时前
OpenLayers的OGC服务 -- 章节一:WMS服务详解
前端·javascript·vue.js·openlayers
Z_Wonderful8 小时前
ReactUse 与ahook对比
前端·javascript·react.js
_Legend_King8 小时前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
java水泥工8 小时前
师生健康信息管理系统|基于SpringBoot和Vue的师生健康信息管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
拜无忧9 小时前
【教程】Vue 3 项目架构终极指南:一份面向新手的、高性能的实战教程
前端·vue.js
一枚前端小能手9 小时前
「周更第5期」实用JS库推荐:RxJS
前端·javascript·rxjs