标签：fas qq音乐 time rank 搜索 vue mon .config att
下载按转新依赖
先添加，在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>
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 } ] })
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/>‘ })
注册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 } ] })
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>
url重定向
redirect
三：在app.vue导入组件
import MHeader from ‘./components/m-header/m-header‘
import Tab from ‘./components/tab/tab‘
首字母要大写，因为其本质上是class，class书写规范为首字母大写
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) : ‘‘ }
标签：fas qq音乐 time rank 搜索 vue mon .config att
原文地址：https://www.cnblogs.com/jassin-du/p/9431789.html
