Vue实现音乐播放器(四):页面入口+header组件的编写
首先下载三个包
babel-runtime对es语法进行转义
fastclick解决移动端点击300毫秒延迟的问题
babel-polyfill对es6 api进行转义
下载了包之后要在main.js中引入 注意babel-polyfill要引在最前面
在main.js中引入stylus文件夹下的index.styl文件
完成m-header组件
MHeader组件
<template> <div class="m-header"> <div class="icon"></div> <h1 class="text">Chicken Music</h1> <router-link tag="div" class="mine" to="/user"> <i class="icon-mine"></i> </router-link> </div> </template> <script type="text/ecmascript-6"> export default {} </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "../../common/stylus/variable" @import "../../common/stylus/mixin" .m-header position: relative height: 44px text-align: center color: $color-theme font-size: 0 .icon display: inline-block vertical-align: top margin-top: 6px width: 30px height: 32px margin-right: 9px background: url('./logo@2x.png') //因为这里如果引入stylus语法不知道为什么一直报错 所以就直接写了 background-size: 30px 32px .text display: inline-block vertical-align: top line-height: 44px font-size: $font-size-large .mine position: absolute top: 0 right: 0 .icon-mine display: block padding: 12px font-size: 20px color: $color-theme </style>
在App.vue中使用该组件
注意:解析图片的时候要下载url-loader包和file-loader包
<template> <div id="app"> //第三步:使用该组件 <m-header></m-header> </div> </template> <script type="text/ecmascript-6"> //第一步:引入该组件 import MHeader from './components/m-header/m-header.vue' export default { components: { //第二步:注册该组件 MHeader } } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> </style>