目录
4.优化-数据库中无搜索歌曲,以及数据库数据中没有limit设置的请求条数多时的情况进行优化
一、移动适配
下载插件:yarn add postcss postcss-pxtorem -D
设置移动适配文件
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
在main.js中引入
注:移动适配样式宽高不显示rem,postcss.config.js文件有问题
二、按需导入vant组件
下载组件 yarn add vant@latest-v2 -S
下载组件 yarn add babel-plugin-import -D
配置babel.config.js
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
根据自己需要引入组件,这里引入button
在main.js中引入vant
根据需要写入合适的按钮样式
三、配置路由
1.下载vue-router
yarn add vue-router@3
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/",
component: () => import("@/views/Layout"),
redirect: "/home",
children: [
{
path: "home",
component: () => import("@/views/Home"),
meta: {
title: "首页",
},
},
{
path: "search",
component: () => import("@/views/Search"),
meta: {
title: "搜索",
},
},
],
},
{
path: "/play",
component: () => import("@/views/Play"),
},
];
const router = new VueRouter({
routes,
});
export default router;
2.在main.js中引入
3.设置路由出口
四、头部标题设置
公共头部-NavBar 导航栏
公共底部-Tabbar 标签栏
五、首页
1.推荐歌单设置
(1)推荐歌单数据请求
(2) 推荐歌单数据请求
(3)推荐歌单数据渲染
2.最新歌单
六、热门搜索
1.样式铺设
2.请求数据
3.点击输入框显示热门关键字
七、搜索歌曲
1.请求数据
2.渲染数据,实现最佳匹配和热门关键词模块切换
3.歌曲列表,下拉刷新
list列表,下拉刷新使用