初学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的用法。
网友评论