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>
相关推荐
快乐非自愿1 小时前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
摸着石头过河的石头1 小时前
错误处理:构建健壮的 JavaScript 应用
前端·javascript
Java陈序员2 小时前
免费高颜值!一款跨平台桌面端视频资源播放器!
vue.js·typescript·electron
Asort2 小时前
JavaScript设计模式(十九)——观察者模式 (Observer)
前端·javascript·设计模式
colorFocus2 小时前
vue在页面退出前别忘记做好这些清理工作
前端·vue.js
前端付豪2 小时前
为啥升Vue3 有啥优势?
前端·javascript·vue.js
举个栗子dhy2 小时前
第四章、路由配置
前端·javascript·react.js
xiguolangzi2 小时前
electron + vue3 项目实战 自动更新
vue.js
用户84298142418102 小时前
Node.js:JavaScript的服务器端革命
javascript
opteOG2 小时前
Vue3设计与实现
vue.js