使用vue-cli创建手机通讯录demo(1)

初学vue，在网络上看到的视频觉得甚是不错，视频来源于千峰，现整理成文章，方便查阅。

---

1.搭建vue脚手架，步骤网上很多，我在此就不赘述。

2.新建一个index.vue当做入口组件

3.在main.js里将刚才创建的index.vue设为默认页面，也就是index.html里默认展示的内容

4.在components文件夹下创建头部组件Header

5.在main.js里全局引入Header.vue，

import Header from './components/Header' ;   // 引入Header.vue

Vue.component(Header.name,Header); //定义成全局组件，注意组件的name不能和html标签重名，否则会报错。

6.在index.vue里使用:

在Header.vue里的一些设置，使得在index.vue里可以自己决定标题内容，自由增删按钮和控制是否固定头部，非常方便和灵活

7.现在效果如下:

头部已经出来啦！

css部分比较简单，都是在每个组件里的<style></style>写的，就不贴代码了，

这里顺便说一下公共css的引用：

先在main.js里引入：import '@/assets/common.css';  

然后就可以在index.html里引用：<link rel="stylesheet" href="src/assets/common.css"/>

---

本节暂到此处，下节会讲通讯录列表的制作和axios的用法。