1.初始化vue，vue-cli，webpack:
$ vue init webpack vue-music? Project name (vue-music)? Project description (A Vue.js project) 音乐播放器? Author (Spock <372842848@>)? Vue build standalone? Install vue-router? Yes? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Set up unit tests No? Setup e2e tests with Nightwatch? No
然后执行npm install
接着安装两个插件：
$ npm i stylus stylus-loader
2. 修改基础设置
.eslintrc.js: 添加两条eslint规则
rules: {'eol-last': 0,//文件末尾强制换行(就是代码结尾处,要来个空格,相当于加一行,设置为0就可以了'space-before-function-paren': 0//函数定义时括号前面要不要有空格}
安装三个插件
$ npm i babel-runtime fastclick babel-polyfill
"babel-polyfill": "^6.26.0",//es6的API转义"babel-runtime": "^6.26.0",//对es6的语法进行转义"fastclick": "^1.0.6",//解决移动端300ms延迟的问题
main.js中的设置：
fastclick.attach(document.body)//这样就能解决body下按钮点击300ms的延迟
3. jsonp：动态创建script，解决跨域问题
安装插件：
npm i jsonp
文件 js/jsonp引用：
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)}})})}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) : ''}
文件api/commend下数据:
import jsonp from 'common/js/jsonp'import {commonParams, options} from './config'export function getRecommend() {const url = 'https://c./musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'const data = Object.assign({}, commonParams, {platform: 'h5',uin: 0,needNewCode: 1})return jsonp(url, data, options)}
之后在recommend.vue中引用
安装插件，实现图片懒加载:
$ npm i vue-lazyload
如果觉得《音乐播放器--vue项目总结》对你有帮助，请点赞、收藏，并留下你的观点哦！
