zoukankan      html  css  js  c++  java
  • [个人项目] 使用 Vuejs 完成的音乐播放器

    Foreword

    虽然音乐播放这类的项目的静态展示居多,业务逻辑并不复杂,但是对于我这种后端出身的前端萌新来说,能使用vuejs完成大部分功能, 也会有许多收获。

    api:我使用的是一个开源的 nodejs 封装的网易云音乐 api,名叫NeteaseCloudMusicApi
    文档地址
    github地址
    感谢大佬提供的学习资源.
    我的项目地址

    Project Preview

    loginmainplayer

    Build Setup

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    
    # build for production and view the bundle analyzer report
    npm run build --report
    

    Technology stack

    1. Vuejs - The Progressive JavaScript Framework
    2. axios - Promise based HTTP client for the browser and node.js
    3. Vuex - Vuex is a state management pattern + library for Vue.js applications.
    4. scss - Syntactically Awesome Style Sheets
    5. flexible - Alibaba Mobile adaptation scheme
    6. px2remLoader - Change 'px' to 'rem'
    7. better-scroll - It's a plugin which is aimed at solving scrolling circumstances on the mobile side
    8. Vue-Lazyload: Vue module for lazyloading images in applications
    9. iconfont - 阿里巴巴矢量图标库

    预计完成的功能

    • [x] 首页歌单推荐
    • [x] 歌单详情
    • [x] 播放器 50%
    • [x] 播放暂停
    • [x] 播放模式切歌(顺序和随机)
    • [ ] 歌词滚动(待修改)
    • [ ] 歌曲拖动-
    • [x] 播放底栏
    • [ ] 底栏歌词同步
    • [x] 播放列表
    • [ ] 歌曲评论
    • [ ] 搜索推荐
    • [ ] 搜索分类
  • 相关阅读:
    vue--一些预设属性
    vue--vux框架的使用
    vue--vConsole
    vue--音乐播放器
    vue--使用vue-cli构建项目
    vue--实例化对象
    vue--数据显示模版上
    CSS--交互效果
    Git SSH公钥配置
    gradle配置国内镜像
  • 原文地址:https://www.cnblogs.com/liuyishi/p/9735498.html
Copyright © 2011-2022 走看看