从0到1 搭建H5版网易云音乐（1）-一一网

本项目纯属练习需要优化的地方很多，希望大佬们多提意见

技术栈

插件： postcss-pxtorem 、 sass、vconsole

项目初始化

Vite需要Node.js版本 >= 12.0.0

# npm 6.x
npm init @vitejs/app my-vue-app --template vue-ts

# npm 7+, 需要额外的双横线
npm init @vitejs/app my-vue-app -- --template vue-ts

cd my-vue-app

npm install

npm run dev

复制代码

网易云音乐服务

安装

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git 

npm install
复制代码

或者

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

npm install
复制代码

运行

node app.js
复制代码

服务器启动默认端口为 3000,若不想使用 3000 端口,可使用以下命令: Mac/Linux

PORT=4000 node app.js
复制代码

windows 下使用 git-bash 或者 cmder 等终端执行以下命令:

set PORT=4000 && node app.js
复制代码

更详情的内容请移步网易云API

首页实现

项目中涉及到的相关API ，在本文中就不在详细的赘述了，不太明白的同学可取官方查阅相关的信息。

先来分析下网易云首页如图：

顶部搜索功能(暂未实现)
banner
页面中的导航
推荐歌单
精选视频（由于接口未及时更新目前暂无法调用）
播放器
底部导航

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Router from "./router/index"
import "./utils/rem"
import ant from "vant"
import 'vant/lib/index.css'
import store from "./state/index"
import vConsole from "vconsole"
 new vConsole();
createApp(App).use(Router).use(store).use(ant).mount('#app')

复制代码

// 基准大小
const baseSize = 37.5 
// 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

复制代码

//新建一个banner的组件 
<template>
  <div class='banner'>
    //这里我使用的van框架的swipe，相关的API可异步官网查阅
    		<van-swipe class="swipe" :autoplay="3000" indicator-color="white">
					<van-swipe-item>
          	<img src='' />
          </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script lang='ts' setup>
  //这里的setup  是Vue3.0的新语法糖
  //导入Vue
	import { reactive } from "vue"
  //声明一个变量保存banner数组
	const banner = reactive({
    lists:[]
  })
</script>

复制代码

//新建页中导航
<template>
  <div class='nav'>
    <div class='nav-items'>
    	<div class='nav-icon'></div>  
			<div class='nav-name'></div>  
    </div>
  </div>
</template
<script lang='ts' setup>
	import { reactive } from "vue"
	const nav = reactive({
    lists:[]
  })
</script>
复制代码