Vue Component 创建组件

在目录下创建 .vue 结尾的文件就是一个vue组件，在其中写入：

<script>  
export default {  
  name: 'app',  
  data() {  
    return {  
      message: 'hello world'  
    }  
  }}  
</script>  
  
<template>  
  <div>  
    <p>{{message}}</p>  
  </div>  
</template>  
  
<style scoped>  
  
</style>

然后在其他vue文件通过直接创建对应的标签来插入该组件：

<script setup>  
import HelloWorld from '@/components/HelloWorld.vue'  
</script>  
  
<template>  
  <HelloWorld />  
</template>  
  
<style scoped>  
  
</style>

其中，style的 scoped 属性标志着该组件的style设置仅作用于该组件内。