Vue页面结构

Vue页面结构

App.vue

<!--html标签-->
<template>
  <div>
    <h1>饿了么？</h1>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<!--js代码 vue3的语法-->
<script setup>
import HelloWorld from './components/HelloWorld.vue'

</script>
<!--css样式 美化-->
<style scoped>

</style>

HelloWorld.vue

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <h1>吃的什么啊？</h1>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>