VUE项目实现音乐播放器(一)-------准备阶段

趁着疫情期间不上班，在Github上找了几个开源Vue项目，亲自实践了一下，学习到了不少VUE以及CSS前端布局的技巧，这次的小项目是用VUE实现一款音乐播放器。我会把整个项目分为几部分，争取做到通俗易懂得介绍给大家。

先来几张项目截图：

项目主页音乐排行榜界面推荐界面播放控制界面

项目目录：

我们一起来看看这个项目用到的技术栈：

1.Vue

毫无疑问用的最多的就是Vue的语法，教程在Vue的官网可以找到，主要用到的有条件渲染、列表渲染、组件基础、过渡&动画。Vue的教程写的很好，通俗易懂，并且每节都有很好的小demo。

2.Vue-CLI

主要用于初始化项目标准目录，用它可以生成统一的项目目录，方便管理。注：新版本的CLI省掉了build文件夹，若你想自定义项目端口、是否开启ESLint语法提醒（新手建议开启，有助于学习标准的语法，等遇到一些莫名的坑时可以再关闭）等需要在项目根目录下，新建vue.config.js文件：

const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack: config => {
        //路径配置
        config.resolve.alias
            .set('assets', resolve('src/assets'))
            .set('styles', resolve('src/assets/styles'))
    },
    lintOnSave: false,  //false:关闭ESLint
    // webpack-dev-server 相关配置  
    devServer: {
        // 调试端口
        // port: 8989
    }
    //其他配置....
}

3.Vue-Router

4.Vuex

查阅官网教程，教程很详细易懂，主要用于状态管理，可以简单理解为对全局变量的管理，很有用。

5.qm-player

npm install qm-player  //安装

const QMplayer = require(‘qm-player’);  //实例化引用
const player = new QMplayer()

6.vue-resource

vue的类似于ajax功能插件，项目中用于同QQmusic接口发送返回数据。

在main.js中引入：

import VueResource from 'vue-resource'

Vue.use(VueResource)

7.vue-lazyload

项目中主要用于设置加载状态图片、error图片、默认图片。

在main.js中引入：

import VueLazyLoad from 'vue-lazyload'

Vue.use(VueLazyLoad, {
  loading: require('./loading.svg'),
  error: require('./error.svg'),
  attempt: 1
})

在组件中，加载图片时：

<img v-lazy="...">

8.vue-awesome-swiper 3.1.3

经典滚动插件，用于处理播放器主页，“排行榜”和“推荐”的页面滑动效果。

import { swiper, swiperSlide } from "vue-awesome-swiper"; //在组件中引入即可

组件中使用：

<swiper-slide>排行榜</swiper-slide>
<swiper-slide>推荐</swiper-slide>
<div class="swiper-pagination" solt="pagination"></div> //分页器的小圆点

9.weui 2.3.0

微信团队开发的前端css插件，项目用主要用于点击按钮的ActionSheet实现。

在main.js中引用：

import 'weui';

VUE项目实现音乐播放器(一)-------准备阶段

猜你喜欢