第一个Vue文件

上述文件中，删除src/components和src/assets文件夹下的所有文件，保留一个HelloWorld.vue。将HelloWorld.vue的文件内容改成与下面一致。

<template>

</template>
<script>

</script>

然后在App.vue中删掉导入之前已删除的文件的代码，改成和下面一致。

App.vue实际上是一个组件，它一般用于统一引入其他组件，而App这个组件本身是被main.js所使用的，具体知识请查阅【组件】一节。

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

还有main.js，最好检查一下是否有其他导入没有删除。

接下来在HelloWorld.vue中开始写代码。

<script setup>
</script>

<template>
  <p>Hello World!</p>
</template>

执行如下命令，在localhost:5173预览界面。

npm run dev

运行结果为：Hello World！

Vue的API分为两种：选项式和组合式，具体看下面的两种代码风格。