4. 编写app组件

最新推荐文章于 2024-07-16 17:20:09 发布

不听话的小耳朵

最新推荐文章于 2024-07-16 17:20:09 发布

阅读量453

点赞数 5

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43476824/article/details/136438162

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js的基本结构，包括使用`createApp`创建应用实例并将其挂载到DOM，以及在`App.vue`组件中定义HTML模板、TS脚本和CSS样式。

摘要由CSDN通过智能技术生成

1. 代码

main.ts


// 引入createApp用于创建应用
import {createApp} from "vue"

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

createApp(App).mount('#app')

App.vue

<!-- vue文件可以写三种标签
    1. template标签，写html结构
    2. script 脚本标签，写JS/TS代码
    3. style标签，写样式
 -->
<template>
  <div class="app">
    <h1>你好啊</h1>
  </div>
</template>

<script lang="ts">
  // 默认暴露app组件 
  export default {
    name: 'App' // 组件名
  }
</script>
<style>
  .app{
    /* 背景色-浅灰色 */
    background-color: #ddd;

    /* 盒子阴影 */
    box-shadow: 0 0 10px;

    /* 圆角 */
    border-radius: 10px;

    /* 内边距 */
    padding: 20px;
  }
</style>