src简单的介绍
入口文件main.js
import 'babel-polyfill' //写在第一位
import Vue from 'vue'
import App from './App'
import router from './router'
import fastclick from 'fastclick'
import VueLazyload from 'vue-lazyload'
import store from './store'
import 'common/stylus/index.styl'
/* eslint-disable no-unused-vars */
// import vConsole from 'vconsole'
fastclick.attach(document.body)
Vue.use(VueLazyload, {
loading: require('common/image/default.png') //传一个默认参数
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
babel-polyfill是es6底层铺垫即支持一些API,比如promise,balbel-runtime为es6语法转义,fastclick解决移动端点击300毫秒的延迟
devDependencies 里面的插件(比如各种loader,babel全家桶及各种webpack的插件等)只用于开发环境,不用于生产环境,因此不需要打包;而 dependencies 是需要发布到生产环境的,是要打包的。
dependencies:应用能够正常运行所依赖的包。这种 dependencies 是最常见的,用户在使用 npm install 安装你的包时会自动安装这些依赖。
devDependencies:开发应用时所依赖的工具包。通常是一些开发、测试、打包工具,例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包,用户在使用 npm install 安装你的包时也不会安装这些依赖。
css-loader (opens new window): 处理 CSS 中的 url 与 @import,并将其视为模块引入,style-loader 用以将 CSS 注入到 DOM 中,原理为使用 DOM API 手动构建 style 标签,并将 CSS 内容注入到 style 中。
{
"name": "vue-music",
"version": "1.0.0",
"description": "音乐播放器",
"author": "songhao",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"
},
"dependencies": {
"babel-runtime": "^6.0.0",
"vue": "^2.3.3",
"vue-router": "^2.5.3",
"vuex": "^2.3.1",
"fastclick": "^1.0.6",
"vue-lazyload": "1.0.3",
"axios": "^0.16.1",
"jsonp": "0.2.1",
"better-scroll": "^0.1.15",
"create-keyframe-animation": "^0.1.0",
"js-base64": "^2.1.9",
"lyric-parser": "^1.0.1",
"good-storage": "^1.0.1"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"babel-polyfill": "^6.2.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-config-standard": "^6.2.1",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^11.3.4",
"vue-style-loader": "^2.0.5",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.3.3",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0",
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"vconsole": "^2.5.2"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>vue-music</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
APP.vue
<template>
<div id="app" @touchmove.prevent>
<m-header></m-header>
<tab></tab>
<keep-alive>
<router-view></router-view>
</keep-alive>
//全局的播放器组件
<player></player>
</div>
</template>
<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header'
import Player from 'components/player/player'
import Tab from 'components/tab/tab'
export default {
components: {
MHeader,
Tab,
Player
}
}
</script>
jsonp原理
它发送的不是一个ajax请求,是创建了一个script标签不受同源策略的影响,通过src指向服务器的地址,在地址后面加一个callback=a,服务器解析这个URL发现有一个callback=a的参数,返回数据的时候调用这个a方法,前端定义的a方法就能直接拿到数据
最后返回的时候从1开始截取,是因为上面的方法已经添加了&符号,所有返回&符之后的内容
jsonp的封装 这个js放置于静态文件夹下
import originJsonp from 'jsonp' //jsonp 结合promise 封装
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)
//新型写法 es6写法
//url += `&${k}=${encodeURIComponent(value)}` es6语法
}
return url ? url.substring(1) : ''
}
推荐页面 recommend.js 使用jsonp 调取轮播图的数据
用到了es6对象的合并方法Object.assign,浅拷贝的方法
import jsonp from 'common/js/jsonp'
import {
commonParams, options} from './config'
export function getRecommend() {
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'
const data = Object.assign({
}, commonParams, {
//assign es6语法
platform: 'h5',
uin: 0,
needNewCode: 1
})
return jsonp(url, data, options)
}
config.js 因为数据是爬的,所以定义了通用的参数对象,私有的参数通过assign方法添加
export const commonParams = {
g_tk: 1928093487,
inCharset: 'utf-8',
outCharset: 'utf-8',
notice: 0,
format: 'jsonp'
}
export const options = {
param: 'jsonpCallback'
}
export const ERR_OK = 0
components/recommend.vue 在组件中调用接口
export default {
data() {
return {
recommends: []
}
},
created() {
this._getRecommend()
},
methods: {
_getRecommend() {
getRecommend().then((res) => {
if (res.code === ERR_OK) {
this.recommends = res.data.slider
}
})
}
},
components: {
Slider
}
}
<div v-if="recommends.length" class="slider-wrapper" ref="sliderWrapper">
<slider>
<div v-for="item in recommends">
<a :href="item.linkUrl">
<img class="needsclick" @load="loadImage" :src="item.picUrl">
<!-- 如果fastclick监听到有class为needsclick就不会拦截 -->
</a>
</div>
</slider>
</div>
这里用到了slider组件以及slot的知识,也遇到了一个坑,因为数据响应 必须确定有数据v-if="recommends.length"才能保证插槽的正确显示
dom.js ,比较重要
操作dom的文件,位于通用静态文件
//是否有指定class存在
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}
//如果存在什么都不做,否则就设置添加
export function addClass(el, className) {
if (hasClass(el, className)) {
return
}
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
}
//展现了方法的设置技巧,一个getter、一个setter
export function getData(el, name, val) {
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}
//下面的方法,在歌手详情页的自组件music-list用到,用于控制属性的兼容性
let elementStyle = document.createElement('div').style
let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
//数据的拼接,首字母大写加上剩余的部分
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
从下面开始开始编写项目
首先是推荐页面,由轮播图和热门歌单组成
轮播图的数据通过jsonp可以得到,但是热门歌单因为有referer、host的认证,所以需要在dev-server.js设置代理,(欺骗服务器)用到axios而不是jsonp
bulid目录下dev-server.js处理代理
require('./check-versions')()
var config = require('../config')
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware')
var webpackConfig = require('./webpack.dev.conf')
var axios = require('axios') //第一步
// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable
var app = express()
var apiRoutes = express.Router() //以下是后端代理接口 第二步
apiRoutes.get('/getDiscList', function (req, res) {
var url = 'https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
res.json(response.data) //输出到浏览器的res
}).catch((e) => {
console.log(e)
})
})
apiRoutes.get('/lyric', function (req, res) {
//这是另一个接口下节将用到
var url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'
axios.get(url, {
headers: {
referer: 'https://c.y.qq.com/',
host: 'c.y.qq.com'
},
params: req.query
}).then((response) => {
var ret = response.data
if (typeof ret === 'string') {
var reg = /^\w+\(({
[^()]+})\)$/
var matches = ret.match(reg)
if (matches) {
ret = JSON.parse(matches[1])
}
}
res.json(ret)
}).catch((e) => {
console.log(e)
})
})
app.use('/api', apiRoutes) //最后一步
var compiler = webpack(webpackConfig)
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {
}
})
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({
action: 'reload' })
cb()
})
})
// proxy api requests
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
if (typeof options === 'string') {
options = {
target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
app.use(hotMiddleware)
// serve pure static assets
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))
var uri = 'http://localhost:' + port
var _resolve
var readyPromise = new Promise(resolve => {
_resolve = resolve
})
console.log('> Starting dev server...')
devMiddleware.waitUntilValid(() => {
console.log('> Listening at ' + uri + '\n')
// when env is testing, don't need open it
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
_resolve()
})
var server = app.listen(port)
module.exports = {
ready: readyPromise,
close: () => {
server.close()
}
}
recommend.js 使用axios 调取热门歌单的数据
export function getDiscList() {
const url = '/api/getDiscList'
const data = Object.assign({
}, commonParams, {
platform: 'yqq',
hostUin: 0,
sin: 0,
ein: 29,
sortId: 5,
needNewCode: 0,
categoryId: 10000000,
rnd: Math.random(),
format: 'json'
})
return axios.get(url, {
params: data
}).then((res) => {
return Promise.resolve(res.data)
})
}
slider轮播图组件用到了dom.js中的addclass方法,引入了better-scroll,注意一下window.addEventListener,初始化的时候这个方法this._setSliderWidth(true)传入true,来控制2倍的dom复制,特别注意初始化dots的方法
<template>
<div class="slider" ref="slider">
<div class="slider-group" ref="sliderGroup">
<slot></slot>
</div>
<div class="dots">
<span
class="dot"
:class="{active: currentPageIndex === index }"
v-for="(item, index) in dots"
></span>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import {
addClass } from "common/js/dom";
import BScroll from "better-scroll";
export default {
name: "slider",
props: {
loop: {
type: Boolean,
default: true
},
autoPlay: {
type: Boolean,
default: true
},
interval: {
type: Number,
default: 4000
}
},
data() {
return {
dots: [],
currentPageIndex: 0
};
},
mounted() {
setTimeout(() => {
this._setSliderWidth();
this._initDots();
this._initSlider();
if (this.autoPlay) {
this._play();
}
}, 20);
window.addEventListener("resize", () => {
if (!this.slider) {
return;
}
this._setSliderWidth(true);
this.slider.refresh();
});
},
//keep-active下的声明周期,相当于小程序的onshow
activated() {
if (this.autoPlay) {
this._play();
}
},
//组件销毁后清除定时器,有利于内存释放
deactivated() {
clearTimeout(this.timer);
},
beforeDestroy() {
clearTimeout(this.timer);
},
methods: {
//计算轮播的宽度
_setSliderWidth(isResize) {
this.children = this.$refs.sliderGroup.children;
let width = 0;
let sliderWidth = this.$refs.slider.clientWidth;
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i];
addClass(child, "slider-item");
child.style.width = sliderWidth + "px";
width += sliderWidth;
}
if (this.loop && !isResize) {
width += 2 * sliderWidth;
}
this.$refs.sliderGroup.style.width = width + "px";
},
//初始化BScroll
_initSlider() {
this.slider = new BScroll(this.$refs.slider, {
scrollX: true,
scrollY: false,
momentum: false,
snap: true,
snapLoop: this.loop,
snapThreshold: 0.3,
snapSpeed: 400
});
// 设置currentPageIndex
this.slider.on("scrollEnd", () => {
let pageIndex = this.slider.getCurrentPage().pageX;
if (this.loop) {
pageIndex -= 1;
}
this.currentPageIndex = pageIndex;
if (this.autoPlay) {
this._play();
}
});
//手动出发的时候清楚定时器
this.slider.on("beforeScrollStart", () => {
if (this.autoPlay) {
clearTimeout(this.timer);
}
});
},
//初始化dots
_initDots() {
this.dots = new Array(this.children.length);
},
//轮播关键实现
_play() {
let pageIndex = this.currentPageIndex + 1;
if (this.loop) {
pageIndex += 1;
}
this.timer = setTimeout(() => {
this.slider.goToPage(pageIndex, 0, 400);
}, this.interval);
}
}
};
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
.slider {
min-height: 1px;
.slider-group {
position: relative;
overflow: hidden;
white-space: nowrap;
.slider-item {
float: left;
box-sizing: border-box;
overflow: hidden;
text-align: center;
a {
display: block;
width: 100%;
overflow: hidden;
text-decoration: none;
}
img {
display: block;
width: 100%;
}
}
}
.dots {
position: absolute;
right: 0;
left: 0;
bottom: 12px;
text-align: center;
font-size: 0;
.dot {
display: inline-block;
margin: 0 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: $color-text-l;
&.active {
width: 20px;
border-radius: 5px;
background: $color-text-ll;
}