新建App.vue,内容如下

<script>export default{//data选项声明响应式状态，必须是返回一个对象的函数data(){return{//声明状态属性，属性名不能以$和_开头，内置使用保留，不让我们声明使用msg:'我是谁',age:18,salary:99.99,staff:{//对象id:1,name: '梦',hobbies:['台球','足球']}}},methods:{say(){this.msg='msg',this.staff.hobbies.push('篮球')}}}
</script><template><div>{{ msg }}=={{ age }}=={{ salary }}=={{ staff.name }} =={{ staff.hobbies }}<button @click="say">说一说</button></div>
</template><style scoped></style>

运行npm run dev

浏览器，打开效果如下：

点击说一说，staff 数组里面hobbies会增加一个篮球，并且改变msg 的值为msg

ps: 如果vite 里面有多个.vue 文件，想运行其中一个，可以通过修改main.ts文件里面import App from './App.vue' ，单引号的值。如下图