测试圈相亲平台开发流程（7）：详情页基础信息部分-前端开发

本平台并非真实运营和使用，仅在于学习研究平台前后端研发技术使用。

今天继续开始做这个平台的三大页之一：详情页的基本信息部分

Part1清理出中间页面的战场：

结果如下：

Part2创建组件

然后我们去src/components文件夹下新建一个组件，为什么要新建组件呢？因为这里的内容太多了，直接都写到Home.vue中并不好，正好也带大家先熟悉下vue-cli的组件化结构开发：

名字就叫Detail.vue ，注意首字母大写。

里面的具体内容，很简单，就是一堆输入框：

Part3引入组件

我们创造了组件后，自然要去Home.vue中引入才能看到它：打开Home.vue,在底部的script中改成如下：

如上图所示，就是给弄进来了，并且取名为Deatil

然后去dom层去使用，即可在指定位置显示我们组件的全部内容：

效果如下：

好了，本节课到此了，下节课我们搞定择偶标准组件，规则和这个几乎一样。