vue-aplayer

入门

注意

请确保你的 Vue.js 版本 >= 2.2.0

安装

使用 npm

npm install @moefe/vue-aplayer --save

使用 yarn 推荐

yarn add @moefe/vue-aplayer

推荐使用 yarn 安装并提交 yarn.lock 锁定版本号

快速开始

传统方式

📝 index.html

<html>
  <body>
    <!-- prettier-ignore -->
    <div id="app">
      <a-player :audio="audio" :lrc-type="3"></a-player>
    </div>
  </body>
  <!-- 你必须在引入 vue-aplayer 之前引入 vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/@moefe/vue-aplayer"></script>
  <script>
    Vue.use(VueAPlayer, {
      defaultCover: 'https://github.com/u3u.png',
      productionTip: true,
    });

    new Vue({
      el: '#app',
      data: {
        audio: {
          name: '东西（Cover：林俊呈）',
          artist: '纳豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
      },
    });
  </script>
</html>

单文件组件

📝 main.js

import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer, {
  defaultCover: 'https://github.com/u3u.png',
  productionTip: true,
});

📝 app.vue

<!-- prettier-ignore -->
<template>
  <div id="app">
    <aplayer :audio="audio" :lrcType="3" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      audio: {
        name: '东西（Cover：林俊呈）',
        artist: '纳豆',
        url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
        cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
        lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
      },
    };
  },
};
</script>

提示

这种方式是官方推荐的，也是大家熟知的使用最多、上手最快的。但是开发体验不是很友好。
虽然官方提供了 Vetur 扩展来强化开发体验，但依然无法做到以下几点：

  1. 目前 Prettier 还不支持格式化模版部分（正在进行中）
  2. 模版部分没有强大的智能感知功能
  3. 对 TypeScript 不友好
  4. 无法批量传递 props
  5. 不能使用 HTML 内置标签名

vue-class-component 推荐

如果你熟悉 React，或是 JSX 爱好者，那么我推荐你使用这种方式。
你依然可以使用 @Component 装饰器以传统方式传递组件的属性，但我不推荐这么做。

JavaScript

提示

@vue/cli 3.0 默认配置了 JSX 预设，所以你无需做任何额外的配置。
安装 vue-tsx-support 并配置 jsconfig.json 和 vue-jsx-hot-loader 获得最佳开发体验。

📝 main.js

import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use(APlayer, {
  defaultCover: 'https://github.com/u3u.png',
  productionTip: true,
});

📝 app.js

import Vue from 'vue';
import Component from 'vue-class-component';
import { APlayer } from '@moefe/vue-aplayer';

@Component
export default class App extends Vue {
  audio = {
    name: '东西（Cover：林俊呈）',
    artist: '纳豆',
    url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
    cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
    lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
  };

  render() {
    return (
      <div id="app">
        <APlayer audio={this.audio} lrcType={3} />
      </div>
    );
  }
}

TypeScript 推荐

注意

TypeScript 用户必须安装 vue-tsx-support 并配置 tsconfig.json
同样，你也可以配置 vue-jsx-hot-loader 获得最佳开发体验。

📝 main.ts

import Vue from 'vue';
import APlayer from '@moefe/vue-aplayer';

Vue.use<APlayer.InstallOptions>(APlayer, {
  defaultCover: 'https://github.com/u3u.png',
  productionTip: true,
});

📝 app.tsx

import Vue from 'vue';
import Comopnent from 'vue-class-component';
import { APlayer } from '@moefe/vue-aplayer';

@Comopnent
export default class App extends Vue {
  private audio: APlayer.Audio | APlayer.Audio[] = {
    name: '东西（Cover：林俊呈）',
    artist: '纳豆',
    url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
    cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
    lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
  };

  render() {
    return (
      <div id="app">
        <APlayer audio={this.audio} lrcType={3} />
      </div>
    );
  }
}