Vue2使用vant实现_网易云音乐案例(可跟做练手项目)（一）

vue create music-demo

yarn add axios vant vue-router

yarn add babel-plugin-import  -D

plugins: [
    ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
    }, 'vant']
]

/* 中间内容区域 - 容器样式(留好上下导航所占位置) */
.main {
  padding-top: 46px;
  padding-bottom: 50px;
}

/* 标题 */
.title {
  padding: 0.266667rem 0.24rem;
  margin: 0 0 0.24rem 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
}
/* 推荐歌单 - 歌名 */
.song_name {
  font-size: 0.346667rem;
  padding: 0 0.08rem;
  margin-bottom: 0.266667rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}

/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}
/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}
/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}

// 路由-相关模块
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout'
import Home from '@/views/Home'
import Search from '@/views/Search'
import Play from '@/views/Play'
Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        redirect: '/layout'
    },
    {
        path: '/layout',
        component: Layout,
        redirect: '/layout/home',
        children: [
            {
                path: 'home',
                component: Home,
                meta: { // meta保存路由对象额外信息的
                    title: "首页"
                }
            },
            {
                path: 'search',
                component: Search,
                meta: {
                    title: "搜索"
                }
            }
        ]
    },
    {
        path: '/play',
        component: Play
    }
]
const router = new VueRouter({
    routes
})
export default router

import router from '@/router'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

import { Tabbar, TabbarItem  } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);

<template>
  <div>
    <div class="main">
      <!-- 二级路由-挂载点 -->
      <router-view></router-view>
    </div>
    <van-tabbar route>
      <van-tabbar-item replace to="/layout/home" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item replace to="/layout/search" icon="search"
        >搜索</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped>
/* 中间内容区域 - 容器样式(留好上下导航所占位置) */
.main {
  padding-top: 46px;
  padding-bottom: 50px;
}
</style>

<van-tabbar route>
    <van-tabbar-item icon="home-o" to="/layout/home"
                     >首页</van-tabbar-item
        >
    <van-tabbar-item icon="search" to="/layout/search"
                     >搜索</van-tabbar-item
        >
</van-tabbar>

import { NavBar } from 'vant';
Vue.use(NavBar);

<van-nav-bar :title="activeTitle" fixed />
<script>
    export default {
        activeTitle: "首页"
    }
</script>

{
        path: '/layout',
        component: Layout,
        redirect: '/layout/home',
        children: [
            {
                path: 'home',
                component: Home,
                meta: { // meta保存路由对象额外信息的
                    title: "首页"
                }
            },
            {
                path: 'search',
                component: Search,
                meta: {
                    title: "搜索"
                }
            }
        ]
    },

export default {
  data() {
    return {
      activeTitle: this.$route.meta.title, // "默认"顶部导航要显示的标题 (默认获取当前路由对象里的meta中title值)
    };
  },
  // 路由切换 - 侦听$route对象改变
  watch: {
    $route() {
      this.activeTitle = this.$route.meta.title; // 提取切换后路由信息对象里的title显示
    },
  },
};

// 网络请求 - 二次封装
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000"
export default axios

// 文件名-尽量和模块页面文件名统一(方便查找)
import request from '@/utils/request'
// 首页 - 推荐歌单
export const recommendMusic = params => request({
    url: '/personalized',
    params
    // 将来外面可能传入params的值 {limit: 20}
})

// api文件夹下 各个请求模块js, 都统一来到index.js再向外导出
import {recommendMusic} from './Home'
export const recommendMusicAPI = recommendMusic // 请求推荐歌单的方法导出

import { recommendMusicAPI } from '@/api/index'
async function myFn(){
  const res = await recommendMusicAPI({limit: 6});
  console.log(res);
}
myFn();

// 首页 - 推荐歌单
export const recommendMusic = params => request({
    url: '/personalized',
    params
    // 将来外面可能传入params的值 {limit: 20}
})

<template>
  <div>
   <p class="title">推荐歌单</p>
    <van-row gutter="6">
      <van-col span="8" v-for="obj in reList" :key="obj.id">
        <van-image width="100%" height="3rem" fit="cover" :src="obj.picUrl" />
        <p class="song_name">{{ obj.name }}</p>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { recommendMusicAPI } from "@/api";
export default {
  data() {
    return {
       reList: [], // 推荐歌单数据
    };
  },
  async created() {
    const res = await recommendMusicAPI({
      limit: 6,
    });
    console.log(res);
    this.reList = res.data.result;
  },
};
</script>

import {Cell} from 'vant';
Vue.use(Cell);

<template>
  <div>
    <p class="title">推荐歌单</p>
    <div>
      <van-row gutter="5">
        <van-col span="8" v-for="obj in recommendList" :key="obj.id">
          <van-image fit="cover" :src="obj.picUrl" />
          <p class="song_name">{{ obj.name }}</p>
        </van-col>
      </van-row>
    </div>
    <p class="title">最新音乐</p>
    <van-cell center v-for="obj in songList" :key="obj.id" :title="obj.name" :label="obj.song.artists[0].name + ' - ' + obj.name">
        <template #right-icon>
          <van-icon name="play-circle-o" size="0.6rem"/>
        </template>
    </van-cell>
  </div>
</template>
<script>
import { recommendMusicAPI, newMusicAPI } from "@/api";
export default {
   data() {
    return {
      reList: [], // 推荐歌单数据
      songList: [], // 最新音乐数据
    };
  },
  async created() {
    const res = await recommendMusicAPI({
      limit: 6,
    });
    console.log(res);
    this.reList = res.data.result;
    const res2 = await newMusicAPI({
      limit: 20
    })
    console.log(res2);
    this.songList = res2.data.result
  },
};
</script>