1.编写App组件
1.1main.ts文件
下面的这个就是我们的App组件的编写的这个流程，其实就是对于我们的这个src里面的这个内容有一个更加深刻的这个理解罢了；
首先编写的是我们的main.ts文件，这个文件里面的内容和我们最开始的这个初始化的这个内容没有很大的这个区别；
mount相当于指定的就是我们的这个花盆的摆放的这个位置，这个里面的参数和我们的这个index.html里面的这个内容是相互对应的；
1.2App.vue文件
对于初学者而言，可能不知道这个vue文件里面的内容的含义以及我们的这个项目里面的这个具体的不同的文章的目录代表的含义以及他们之间的这个关联关系，这个时候，尚硅谷的这个老师的做法我非常同意，就是使用的自己动手实现的方式去帮助我们理解这个里面的奥秘；
在一个简单的这哦vue文件里面，可以有下面的是3个不同部分的这个内容，分别是我们的这个template杭哥script和我们的这个style标签；
下面的这个就是简单的模版，版喊了我们谈及的这三个组成的部分，这个和我们最开始学习的这个css的相关的语法是非常的类似的，在我们的这个template这个标签里面，包含的这个内容是我们的这个页面想要展示的这个具体的内容；
在这个style这个标签里面，显示的就是我们的我们的这个内容标签的样式，页边距，颜色之类的这个具体的呈现的样式，在我们的这个script标签里面就是这个具体的展示的方法，我们需要把这个组件暴露出去，使用的是下面的这个default也就是默认的这个暴露的方式；
name表示的就是我们想要暴露的这个组件的名字；
1.3组件的运行的效果
2.一个简单的效果
2.1新建文件
上面的这个仅仅是一个非常简单的组件，相当于我们的这个花盆的基本的效果，接下来我们开始进行这个基本的枝叶的开发，这个时候我们就需要在这个原来的src下面去新建这个components文件夹存放我们的这个相关的修饰的部分；
在这个新建的文件夹里面我们新建这个person文件，这个时候我们就是想要编写一个和这个人相关的这个界面，但是之前的这个界面我们也是不需要删除掉的；
之前的那个App组件里面的代码，我们可以直接cv过来，因为这个基本的vue文件里面的这个组成部分，都是style和script和我们的template三个部分，因此这个是没有很大的这个区别的；
我们把这个代码cv之后，直接进行修改即可，这个大的框架是没有发生任何的这个变化的；
可以看看下面的这个代码：
1） 我们在这个name里面进行修改，这个data就是我们想要显示的这个数据的具体的内容；
2）我们的这个div里面定义了这个showTel的这个方法，因此这个需要展示我们的具体的联系方式，我们使用alert进行弹框显示即可；
3）style里面还是我们的这个标签的相关的属性；
2.2具体的效果
因为我们的这个person是在原来的这个基础上面添加的新文件，因此这个原来的样式还是保留的，只不过之前的那个文本消失了，这个也是很容易理解的；
点击这个查看联系方式，这个内容进行弹框进行显示
至于我们的这个具体的信息，在这个页面也是可以显示出来的：
可以明显的看到这个APP下面存在着这个person，这个person里面定义的这个具体的内容这个也是可以显示出来的；
2.3关于这个开发者工具
我们可以在这个浏览器里面添加下面的这个开发者工具的插件，方便我们进行这个开发者工具里面的这个相关的代码的调试的过程；
但是后来我发现这个东西其实没有很大的这个用处，其实这个好像没有我们也是可以查看这个具体的效果的；
下面的这个就是我们浏览器里面的按钮，一个显示页面，一个就是隐藏，这个界面，我们使用这个自带的即可，好像是无需使用这个插件的，也是没有问题的；
3.配置项API和组合式API
下面的这个就是我们的配置项API：
当我们添加新的功能的时候，我们的这个新东西需要添加到每一个模块里面去；
但是我们的组合式API解决了上面的这个弊端：
就是相同的这个东西都放到一起，集中管理，每一个集中的都作为一个函数，一个函数包含了某一个东西的所有的内容，直接集中进行修改即可；