vue3 + vite自定义封装vue+audio ，并发布到npm

前言

在平时使用工具的时一直想着拥有自己的一套npm库，但是迟迟没有动静，这次项目中使用audio，想着封装一套自定义的audio小工具，下面我会为大家做详细介绍以及在途中遇到的坑

创建项目

可以使用两种方式创建vue3项目
1.第一种方式 vite
2.第二种方式创建 @vue/cli
相比之下我更喜欢使用vite创建(1.开发环境中，无需打包操作，可快速的冷启动2.轻量快速的热重载（HMR）3.真正的按需编译，不再等待整个应用编译完成),此处不过多介绍

  npm init vite@latest

创建步骤

1. 提示我们安装是否需要[email protected]依赖，选择y，可以快速创建一个vite项目
   
2. 起一个组件名称，然后选择vue
   
3. 这里我们选择javaScript,项目中没有使用TS，然后按回车
   
4. 安装成功
   
5. 项目中我们需要使用到element-plus,需要手动下载

npm install element-plus --save

• –save 等同于 -S （常用，可保存在package.json文件中），
  -S, --save 安装包信息将加入到dependencies（生产阶段的依赖,也就是项目运行时的依赖，就是程序上线后仍然需要依赖）
• –save-dev 等同于 -D
  -D, --save-dev 安装包信息将加入到devDependencies（开发阶段的依赖，就是我们在开发过程中需要的依赖，只在开发阶段起作用。）

创建组件

1. 首先在项目中src目录下创建一个package文件夹
   
2. 在package文件夹下创建一个.vue文件(自定义组件名)
   
3. 这里就开始封装我们需要的组件

组件我不做介绍，不懂得爱豆请联系我

<template>
  <div>
    <audio @timeupdate="updateProgress"
           controls
           autoplay
           ref="audioRef"
           id="myaudio"
           style="display: none">
      <source :src="audioUrl"
              type="audio/mpeg" />
      您的浏览器不支持音频播放
    </audio>
    <div class="audio_right"
         :style="{background:GradientBg}">
      <img class="audio_icon"
           src="../assets/images/Fastrewind.png"
           @click="Fastrewind"
           alt="快退" />
      <span class="advanceRetreat">-{
   {
   backSecond}}s</span>
      <img v-if="audioIsPlay"
           @click="playAudio"
           class="audio_icon"
           src="../assets/images/play.png"
           alt="播放" />
      <img v-if="!audioIsPlay"
           @click="playAudio"
           class="audio_icon"
           src="../assets/images/pause.png"
           alt="暂停" />
      <span class="advanceRetreat">+{
   {
   forwardSecond}}s</span>
      <img class="audio_icon"
           src="../assets/images/fastForward.png"
           @click="fastForward"
           alt="快进" />
      <el-slider class="slider_box"
                 v-model="currentProgress"
                 :show-tooltip="false"
                 @input="handleProgressChange" />
      <div class="audio_time">
        <span class="audio_current">{
   {
    audioStart }}</span>
        &nbsp;/&nbsp;
        <span class="audio_total">{
   {
    durationTime }}</span>
      </div>
      <div class="volume">
        <div class="volume_progress"
             v-show="audioHuds">
          <el-slider vertical
                     height="100px"
                     class="volume_bar"
                     v-model="audioVolume"
                     :show-tooltip="false"
                     @change="handleAudioVolume" />
          <span class="Volume_Level"> {
   {
    audioVolume}}%</span>
        </div>
        <img class="volume_icon"
             v-if="audioVolume <= 0"
             @click.stop="audioHuds = !audioHuds"
             src="../assets/images/audio_mute.png"
             alt="" />
        <img class="volume_icon"
             v-if="audioVolume > 0"
             @click.stop="audioHuds = !audioHuds"
             src="../assets/images/audio_high.png"
             alt="" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
   
  //一定要写组件名,切记切记★★★
  name: 'l-vue3-audio'
}
</script>
<script setup name='l-vue3-audio'>
import {
    ref, onMounted, watch, onUnmounted, computed } from "vue";
const props = defineProps({
   
  audioUrl: String,        //试听的链接
  isPauseTtsAudio: Boolean,    //是否暂停播放试听
  color1: {
                   //背景颜色
    type: String,
    default: '#9cafe8'
  },
  color2: {
                   //背景颜色
    type: String,
    default: '#9cebb8'
  },
    isinit: {
        //是否初始化       
    type: Boolean,
    default: false
  },
  backSecond