用vue写一个音乐项目
时间: 2023-08-04 19:11:02 浏览: 44
好的,下面是一个简单的音乐项目示例:
首先,在命令行中输入以下命令来创建一个新的Vue项目:
```
vue create music-app
```
然后,安装一些必要的依赖项:
```
npm install axios vuex vue-router vue-lazyload --save
```
接下来,进入项目文件夹并编辑`src/main.js`文件:
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入样式文件
import './assets/css/reset.css'
import './assets/css/common.css'
// 引入懒加载插件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```
在上面的代码中,我们引入了Vue、App组件、路由和状态管理等必要的依赖项。我们也引入了样式文件和懒加载插件。
接下来,我们需要在`src/router/index.js`文件中配置路由:
```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Detail from '../views/Detail.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
```
在上面的代码中,我们定义了两个路由,一个是首页(Home),另一个是音乐详情页(Detail)。我们还使用了Vue Router插件来管理路由。
接下来,我们需要在`src/store/index.js`文件中配置状态管理:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentMusic: null,
musicList: []
},
mutations: {
setCurrentMusic(state, payload) {
state.currentMusic = payload
},
setMusicList(state, payload) {
state.musicList = payload
}
},
actions: {
setCurrentMusic({ commit }, payload) {
commit('setCurrentMusic', payload)
},
setMusicList({ commit }, payload) {
commit('setMusicList', payload)
}
},
modules: {
}
})
```
在上面的代码中,我们定义了一个状态管理器,其中包含当前播放音乐和音乐列表等信息。我们还定义了一些Mutation和Action,用于更新状态。
接下来,我们需要创建一些Vue组件,用于显示音乐列表和音乐详情。在`src/views/Home.vue`文件中,我们可以创建一个组件来显示音乐列表:
```vue
<template>
<div class="music-list">
<div class="music-item" v-for="music in musicList" :key="music.id" @click="goToDetail(music.id)">
<div class="music-cover">
<img v-lazy="music.cover" alt="">
</div>
<div class="music-info">
<div class="music-name">{{ music.name }}</div>
<div class="music-artist">{{ music.artist }}</div>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: {
...mapState(['musicList'])
},
methods: {
...mapActions(['setCurrentMusic']),
goToDetail(id) {
this.setCurrentMusic(id)
this.$router.push({ name: 'Detail', params: { id } })
}
}
}
</script>
<style scoped>
.music-list {
display: flex;
flex-wrap: wrap;
}
.music-item {
width: 160px;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.music-cover {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.music-cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.music-info {
margin-top: 10px;
font-size: 14px;
text-align: center;
}
.music-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music-artist {
color: #999;
}
</style>
```
在上面的代码中,我们使用了懒加载插件来加载音乐封面图像。我们还使用了Vuex状态管理器来获取音乐列表,并将点击事件绑定到每个音乐条目上。
接下来,在`src/views/Detail.vue`文件中,我们可以创建一个组件来显示音乐详情:
```vue
<template>
<div class="music-detail">
<div class="music-cover">
<img v-lazy="currentMusic.cover" alt="">
</div>
<div class="music-info">
<div class="music-name">{{ currentMusic.name }}</div>
<div class="music-artist">{{ currentMusic.artist }}</div>
<audio src="" ref="audio"></audio>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['currentMusic'])
},
mounted() {
this.$refs.audio.src = this.currentMusic.src
this.$refs.audio.play()
}
}
</script>
<style scoped>
.music-detail {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.music-cover {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.music-cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.music-info {
margin-top: 20px;
text-align: center;
font-size: 20px;
}
.music-name {
margin-bottom: 10px;
}
.music-artist {
color: #999;
}
</style>
```
在上面的代码中,我们使用了懒加载插件来加载音乐封面图像。我们还使用了Vuex状态管理器来获取当前播放音乐,并在组件挂载后自动播放音乐。
最后,我们需要在`src/App.vue`文件中组合上面的组件:
```vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
```
在上面的代码中,我们在根组件中使用了Vue Router来渲染具体的组件。
好了,现在你已经完成了一个简单的音乐项目。你可以在`src/assets/music`文件夹中存储你自己的音乐文件,并在`src/store/index.js`文件中添加你的音乐列表。