vue - 音乐播放器示例源码开箱即用(无任何第三方插件依赖,代码注释详细)

Posted 街尾杂货店&

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue - 音乐播放器示例源码开箱即用(无任何第三方插件依赖,代码注释详细)相关的知识,希望对你有一定的参考价值。

效果图

网上的教程都太乱了,各种乱七八糟的代码很难修改移植到自己的项目中。

本文从 0-1 实现了 纯 vue.js(无任何第三方插件)精美音频播放器,支持前后切歌,带进度条和作者头像 360° 旋转动画效果,

你可以直接一键复制,稍微改改就能应用到你的项目中去。


如下图运行示例所示,流畅且无 BUG,可任意 DIY:

代码干净整洁,超级详细的注释

示例源码

MusicPlayer.vue:

开箱即用 vue-cli4 uniapp Webpack4 移动端框架方案

描述

基于 vue-cli4.0 + Webpack 4 + thorui-uni + less + 请求 封装,构建手机端模板脚手架

项目地址:github

Node 版本要求

本示例 Node.js 14.17.5

编辑器

建议使用vscode 配合 HBuilder

启动项目

git clone https://github.com/wz930206/uniapp-ma-template.git

cd uniapp-ma-template

npm install

npm run serve

目录

  • √ Vue-cli4
  • √配置多环境变量
  • √ thorui 组件按需加载
  • √ Less 全局样式
  • √ Vuex 状态管理
  • √ Webpack 4 vue.config.js 基础配置
  • √ 配置 alias 别名
  • √ 配置 proxy 跨域
  • √ 去掉 console.log
  • √ Eslint+Stylelint+Pettier 统一开发规范

配置多环境变量


在项目根目录中新建 .env.*

- .env.development 本地开发环境配置

NODE_ENV='development'
# must start with VUE_APP_ 
VUE_APP_ENV = 'development'

VUE_CLI_BABEL_TRANSPILE_MODULES = true

# Base api
VUE_APP_BASE_API = '/dev-api'

- .env.staging 测试环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

# Base api
VUE_APP_BASE_API = '/stage-api'

- .env.production 正式环境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

# Base api
VUE_APP_BASE_API = '/prod-api'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV developmentstagingproduction,变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?

修改起来方便,不需 要重启项目,符合开发习惯。

 src/config/index.js

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改

// 本地环境配置
module.exports = {
  title: 'uni-app-template',
  baseApi: 'https://test.xxx.com/rest', // 本地api请求地址,注意:如果你使用了代理,请设置成'/'
  APPID: 'xxx',
}

根据环境不同,变量就会不同了

// 根据环境不同引入不同baseApi地址
import {baseApi} from '@/config'
console.log(baseApi)

thorui 组件按需加载 


项目在 `src/components/thorui` 下统一管理thorui组件 ,已全局注册,thorui文档

Less 全局样式 


每个页面自己对应的样式都写在自己的 .vue 文件之中 `scoped` 它顾名思义给 css 加了一个域的概念。

<style lang="less">

  /* global styles */

</style>

<style lang="less" scoped>

  /* local styles */

</style>

目录结构

uniapp-ma-template 所有全局样式都在 `@/src/styles` 目录下设置

├── styles
│   ├── index.scss               # 全局通用样式
│   ├── _mixin.scss              # 全局mixin
│   └── _variables.scss          # 全局变量

全局变量

vue.config.js 配置使用 style-resources-loader 选项,注入 less 的 _variables、_mixins、_class_template 到全局,不需要手动引入 ,这样就把所有 Less 样式传入共享的全局变量:

pluginOptions: {
	'style-resources-loader': {
		preProcessor: 'less',
		patterns: [
		    path.resolve(__dirname, 'src/styles/_variables.less'),
			path.resolve(__dirname, 'src/styles/_mixins.less'),
			path.resolve(__dirname, 'src/styles/_class_template.less'),
		]
	}
},

 Vuex 状态管理


目录结构

├── store
│   ├── modules
│   │   └── user.js
│   ├── index.js
│   ├── getters.js

`main.js` 引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

 配置 alias 别名


const path = require('path')
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
  }
}

配置 proxy 跨域


如果你的项目需要跨域设置,你需要打来 `vue.config.js` `proxy` 注释 并且配置相应参数

module.exports = {
  devServer: {
    // ....
    proxy: {
      '/rest': {
        target: proxyTarget,       //后端接口测试环境地址  配nginx 时使用
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
          '^/rest': '/rest',      //重写 不配nginx 时使用
        }
      }
    }
  }
}

去掉 console.log


保留了测试环境和本地环境的 `console.log`,在 vue.config.js 中配置

// 获取 VUE_APP_ENV 非 NODE_ENV,测试环境依然 console
const IS_PROD = ['production'].includes(process.env.VUE_APP_ENV)

module.exports = {
  configureWebpack: config => {
  	config.optimization.minimizer[0].options.terserOptions.compress.drop_console = IS_PROD,
  }
}

 Eslint + Stylelint + Pettier  统一开发规范


VScode (版本 1.47.3)安装 `eslint` `prettier` `vetur` 插件 `.vue` 文件使用 vetur 进行格式化,其他使用`prettier`,后面会

专门写个如何使用配合使用这三个玩意,详细配置步骤可查看此博客 csdn

总结

项目github地址

关于我

同名服务号、小程序 ur home,

技术订阅号 ur home D

以上是关于vue - 音乐播放器示例源码开箱即用(无任何第三方插件依赖,代码注释详细)的主要内容,如果未能解决你的问题,请参考以下文章

Spring Boot 揭秘与实战 源码分析 - 开箱即用,内藏玄机

Aplayer搭配Metingjs音乐插件的使用

Vue2仿网易云风格音乐播放器(附源码)

malihu-custom-scrollbar-plugin 开箱即用 vue 动态内容

开箱即用 - jwt 无状态分布式授权

开源Vue后端UI开箱即用解决方案——vuestic-admin