Vue2使用vant实现_网易云音乐案例

1本地接口项目部署

下载网易云音乐node接口项目, 在本地启动, 为我们vue项目提供数据支持

项目地址

备用地址

下载后, 安装所有依赖, 在本地启动起来, 测试访问此地址是否有数据

http://localhost:3000, 看到如下页面就成功了

点击 例子：搜索

总结: 前端请求本地的node项目, node服务器伪装请求去拿网易云音乐服务器数据转发回给自己前端

2 前端项目准备

2.1 初始化工程

vue create music-demo

删除欢迎页面

2.2下载需要的所有第三方依赖包

进入项目目录下，进行下载

yarn add axios vant vue-router 

2.3 本次vant使用自动按需引入的方式

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

yarn add babel-plugin-import  -D

在babel.config.js - 添加插件配置

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

2.4 启动项目

2.5引入笔记代码里准备好的reset.css和flexible.js - 实现样式初始化和适配问题 - 引入到main.js

3需求分析

4路由准备

router/index.js - 准备路由 - 以及默认显示Layout, 然后Layout默认显示二级路由的首页

// 路由-相关模块
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',// 重定向到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

main.js - 引入路由对象, 注册到new Vue中

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

App.vue中留好router-view显示路由页面

添加二级路由挂载点

5Tabbar组件

目标: 点击底部导航, 切换路由页面显示

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar

1 注册Tabbar组件, 在main.js中

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

2在Layout.vue中使用

6NavBar导航组件

总结: 点击底部导航和刷新当前网页, 都能保证导航标题的正确显示

文档: https://vant-contrib.gitee.io/vant/#/zh-CN/nav-bar

1main.js - 注册NavBar组件

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

2在router/index.js - 给$route里需要导航标题的添加meta元信息属性

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

3 Layout.vue中监听$route改变:

给导航active的值设置$route里的元信息的标题

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

7网络请求封装

目标: 不想把网络请求散落在各个逻辑页面里, 不然以后找起来改起来很麻烦

1 封装utils/request.js - 基于axios进行二次封装 - 设置基础地址

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

2 封装src/api/Home.js

统一封装网络请求方法

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

3在src/api/index.js - 统一导出接口供外部使用

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

4 在main.js - 测试使用一下.

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

8 首页-推荐歌单

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！