以 runoob-vue3-test2 为例，打开目录下的 src/APP.vue 文件，代码如下（解释在注释中）：

 

src/APP.vue 文件代码

<!-- 展示模板 -->

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="Hello Vue 3.0 + Vite" />

</template>

<!-- Vue 代码 -->

<script>

/* 从 src/components/HelloWorld.vue 中引入 HelloWorld 组件 */

import HelloWorld from './components/HelloWorld.vue'

 

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>

接下来我们可以尝试修改下初始化的项目，将 src/APP.vue 修改为以下代码：

 

src/APP.vue 文件代码

<template>

  <img alt="Vue logo" src="./assets/logo.png" />

  <HelloWorld msg="欢迎来到菜鸟教程！" />

</template>

 

<script>

import HelloWorld from './components/HelloWorld.vue'

 

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>