Vue3编写简单的App组件(二)

一、Vue3页面渲染基本流程

1、入口文件

2、main.ts

//引入CreateApp用于创建应用
import { createApp } from "vue";
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

3、App.vue

一个Vue文件包含三部分:template(用来写html,搭建网页结构)、script(用来写js或ts,实现动态交互)和style(用来写css,实现网页样式)

4、启动项目

二、实现一个复杂点的效果

1、Person.vue

 2、App.vue

3、main.js

//引入CreateApp用于创建应用
import { createApp } from "vue";
// 引入App根组件
import App from './App.vue'

createApp(App).mount('#app')

4、index.html

5、页面效果

>>点击修改姓名,姓名由Maple修改为Kelly:

>>点击修改年龄,年龄会加1:

>>点击查看电话,会弹窗显示电话号码: