Vue脚手架搭建音乐播放器流程

以下是使用Vue脚手架搭建音乐播放器的流程：

1. 创建Vue项目：在终端中进入你想要创建项目的目录，然后运行以下命令：

   vue create music-player

这将会创建一个名为 `music-player` 的新Vue项目。

2. 安装所需依赖：为了实现音乐播放器的功能，我们需要安装一些第三方依赖。在终端中进入项目根目录，然后运行以下命令：

   npm install axios vuex vue-router element-ui howler --save

以上依赖分别是：

- `axios`：用于发起HTTP请求。
- `vuex`：用于状态管理。
- `vue-router`：用于路由管理。
- `element-ui`：用于UI组件。
- `howler`：用于音频播放。

3. 创建Vue组件：在 `src` 目录下创建 `components` 目录，并在其中创建所需的Vue组件。例如，可以创建一个名为 `Player.vue` 的组件，在其中实现音乐播放器的功能。

   <template>
     <div class="player">
       <!-- 音乐播放界面 -->
     </div>
   </template>

   <script>
   export default {
     name: 'Player',
     data () {
       return {
         // 状态数据
       }
     },
     methods: {
       // 方法
     }
   }
   </script>

   <style scoped>
   /* 样式 */
   </style>

4. 配置路由：在 `src` 目录下创建 `router` 目录，并在其中创建 `index.js` 文件，配置路由。

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Player from '@/components/Player.vue'

   Vue.use(VueRouter)

   const routes = [
     {
       path: '/',
       name: 'Player',
       component: Player
     }
   ]

   const router = new VueRouter({
     routes
   })

   export default router

5. 配置Vuex：在 `src` 目录下创建 `store` 目录，并在其中创建 `index.js` 文件，配置Vuex。

   import Vue from 'vue'
   import Vuex from 'vuex'

   Vue.use(Vuex)

   export default new Vuex.Store({
     state: {
       // 状态数据
     },
     mutations: {
       // 状态修改方法
     },
     actions: {
       // 异步操作方法
     },
     modules: {
       // 子模块
     }
   })

6. 编写业务逻辑：在 `Player.vue` 中编写业务逻辑，例如发起HTTP请求获取音乐列表，实现音乐播放和暂停等功能。

7. 编译和运行项目：在终端中进入项目根目录，然后运行以下命令：

   npm run serve

这将会编译并启动项目。在浏览器中访问 `http://localhost:8080` 就可以看到音乐播放器了。

以上就是使用Vue脚手架搭建音乐播放器的流程。