3.header组件开发

3.header组件开发_第1张图片

新建M-Header组件(注意:请在创建组件的时候不要使用H5自带标签如header arctice等,虽然可以正常使用 但是会有警告)


3.header组件开发_第2张图片

在APP.vue文件中引入并且注册后使用M-Header组件


3.header组件开发_第3张图片
3.header组件开发_第4张图片

上面为M-Header页面代码

通过router-link 来达到页面切换 通过.router-link-activce来确定激活页面的那个router-link的样式,通过tag属性来确定这个路由指向标签

注意 style标签上的scoped的意思为:标签里的CSS只在当前页面有效

页面样式:

3.header组件开发_第5张图片


3.header组件开发_第6张图片



3.header组件开发_第7张图片

下节将讲到如何把图标引入项目中,谢谢大家的支持!

你可能感兴趣的:(3.header组件开发)