外观
第一个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分为两种:选项式和组合式,具体看下面的两种代码风格。