vue music

Posted 2020-12-28 jassin-du

下载按转新依赖

babel-runtime：对es6语法进行转译

fastclick：对移动端进行点击300毫秒延迟 ,,取消掉

babel-polyfill：API

先添加，在npm install

main.js

import ‘babel-polyfill‘
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import fastclick from ‘fastclick‘

import ‘common/stylus/index.styl‘


Vue.config.productionTip = false

// 取消点击300毫秒的延迟
fastclick.attach(document.body) 

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  router,
  components: { App },
  template: ‘<App/>‘
})

头部栏引用header组件

1：

<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
      bg-image(‘logo‘)
      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>

m-header。vue

2：在app.vue

<template>
    <div id="app">
3：显式
        <m-header></m-header>
    </div>
</template>

<script>
1:导入
    import MHeader from ‘./components/m-header/m-header‘
    export default {
      components:{
2：注册
          MHeader
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

二：导入歌手页面，搜索页面，排行榜，推荐页面

1：先在index.js入口注册这4个组件

import Reacommed from ‘components/reacommed/reacommed‘
import Search from ‘components/search/search‘
import Singer from ‘components/singer/singer‘
import Rank from ‘components/rank/rank‘

2：配置url

export default new Router({
  routes: [
    {
      path: ‘/reacommed‘,
      component:Reacommed
    },
    {
        path:‘/singer‘,
        component:Singer
    },
    {
        path:‘/rank‘,
        component:Rank
    },
    {
        path:‘/search‘,
        component:Search
    }
  ]
})

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Reacommed from ‘components/reacommed/reacommed‘
import Search from ‘components/search/search‘
import Singer from ‘components/singer/singer‘
import Rank from ‘components/rank/rank‘
 
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/reacommed‘,
      component:Reacommed
    },
    {
        path:‘/singer‘,
        component:Singer
    },
    {
        path:‘/rank‘,
        component:Rank
    },
    {
        path:‘/search‘,
        component:Search
    }
  ]
})

index。js

3：如何引入router实例

import ‘babel-polyfill‘
import Vue from ‘vue‘
import App from ‘./App‘
// 1这里的router是index。js的实例
import router from ‘./router‘
import fastclick from ‘fastclick‘

import ‘common/stylus/index.styl‘


Vue.config.productionTip = false

// 取消点击300毫秒的延迟
fastclick.attach(document.body) 

/* eslint-disable no-new */
new Vue({
  el: ‘#app‘,
  // 2
  router,
  components: { App },
  template: ‘<App/>‘
})

main.js

注册url

import Vue from ‘vue‘
import Router from ‘vue-router‘
import Recommend from ‘components/recommend/recommend‘
import Search from ‘components/search/search‘
import Singer from ‘components/singer/singer‘
import Rank from ‘components/rank/rank‘
 
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: ‘/recommend‘,
      component:Recommend
    },
    {
        path:‘/singer‘,
        component:Singer
    },
    {
        path:‘/rank‘,
        component:Rank
    },
    {
        path:‘/search‘,
        component:Search
    }
  ]
})

index.js

4：显示在App.vue页面

知识点：

router-linnk

a：里面有一个tag属性，控制其显示的为什么标签

如：tag=“a”，即显示为a标签

b：router-link-active

当前某个router-link被激活的时候，会添加样式

5：将导航条添加进去

a:先在app.vue导入进去tab组件

b:注册

c:渲染

<template>
    <div id="app">
        <m-header></m-header>
        <tab></tab>
        <router-view></router-view>
    </div>
</template>

<script>
    import MHeader from ‘./components/m-header/m-header‘
    import Tab from ‘./components/tab/tab‘
    export default {
      components:{
          MHeader,
          Tab
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

app.vue

url重定向

redirect

三：在app.vue导入组件

    import MHeader from ‘./components/m-header/m-header‘
    import Tab from ‘./components/tab/tab‘

首字母要大写，因为其本质上是class，class书写规范为首字母大写

 

jsonp

jsonp(url, opts, fn)
 url (String) url to fetch
 opts (Object), optional
　　　　param ： 指定回调函数名
　　　　timeout : 超时时间，默认一分钟 
　　　　prefix ： __jp 默认添加前缀
　　　　name
 fn callback (回调函数)

四：抓取qq音乐的数据

XHR:ajax请求

下载安装jsonp

npm install jsonp

1:封装一个jsonp方法

用于拼接url
import originJsonp from ‘jsonp‘

export default function jsonp(url, data, option) {
  url += (url.indexOf(‘?‘) < 0 ? ‘?‘ : ‘&‘) + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ‘‘
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ‘‘
    url += ‘&‘ + k + ‘=‘ + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ‘‘
}