页面构建以及图标选用

1、前端页面构建
- 1.1、创建Vue项目
- 2.2、自适应REM布局
- 2.3、字体图标的引用
2、链接

1、前端页面构建

1.1、创建Vue项目

为了方便我就在后端接口项目的同级目录下创建一个Vue项目

#创建一个项目
vue create music_app

然后就是等待项目的创建，然后启动项目

2.2、自适应REM布局

我们写的是移动端的项目，所以我们首先要实现的是REM布局，使得比例根据屏幕的变化而变化

首先我们在public下创建一个js文件夹，文件夹中创建一个rem.js文件

rem.js内容

function remSize(){// 获取当前设备的宽度，由于IE和谷歌不一样所以我们俩种都要考虑var deviceWidth  = document.documentElement.clientWidth || window.innerWidth;// 这里我们按照Iphone的宽度750px // 识别屏幕宽度，不能让它太大或太小，导致项目样式变形if(deviceWidth >=750){deviceWidth = 750}if(deviceWidth <=320){deviceWidth = 320}// 通过屏幕大小设置字体大小// 这里让 1rem = 100px   document.documentElement.style.fontSize = (deviceWidth / 7.5) + 'px';// 默认的字体大小document.querySelector('body').style.fontSize = 0.3 + 'rem'
}remSize()// 窗口发生变化时调用
window.onresize = function(){remSize()
}

引入rem.js文件

在index.html文件中引入我们写好的rem.js文件

把引入的js文件写在div的后面的原因是因为，我们设置默认字体大小的时候需要获取一个body

看看效果
添加一个Div盒子看看自适应效果

我们在src文件下的views文件夹下修改HomeView.vue，新建一个div盒子

并给div添加样式，使他等于屏幕的一半 375px，也就是3.75rem

我们看看效果

2.3、字体图标的引用

我们先看一下页面，需要用到很多的图标，这些图标我们都是没有的，我们去阿里的图标库去下载一些，供我们使用。

阿里图标库：https://www.iconfont.cn/

我们根据上面的图找相似的图标，把它下载下来，就比如说这个右上角的列表和网易云的比较相似，那我们就把它添加入库.

然后我们在去搜索其他需要的，选择好所需要的图标后，点击下载

下载完成后，你会得到一个zip文件把它解压到你的项目之下，这里我把它放在public文件夹下，改名为iconfont

然后在你的index.html中引用它，这里有两种引用

Font class
- font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
Symbol
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。

这两种的区别引用官方的话

简单来说就是font class 没有颜色，symbol有颜色

注意这下面的class名字都要参考你下载文件里面的demo_index.html内的名字

Font class 引用

在index.html引入inconfont.js

然后我们随便在一个页面引用一下

看一下页面效果

Symbol 引用

在index.html引入iconfont.css

在页面中加入一个通用是css代码，也就是在你的App.vue下加入这一行代码

  .icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}

我们同样在Home.vue中使用

      <svg class="icon" aria-hidden="true"><use xlink:href="#icon-riqi"></use></svg>

看看效果对比

2、链接

Vue3+node.js网易云音乐实战项目(一)： https://blog.csdn.net/NITIQ/article/details/125358363?spm=1001.2014.3001.5501
Vue3+node.js实战项目网易云音乐APP（二）: https://blog.csdn.net/NITIQ/article/details/125358401?spm=1001.2014.3001.5502
Vue3+node.js网易云音乐实战项目(三): https://blog.csdn.net/NITIQ/article/details/125358446?spm=1001.2014.3001.5502
Vue3+node.js网易云音乐实战项目(四)： https://blog.csdn.net/NITIQ/article/details/125358476?spm=1001.2014.3001.5502

未完…

Vue3+node.js实战项目网易云音乐APP（二）相关推荐

vue+elementUI实战之网易云音乐--半月总结！！！
vue+elementUI实战之网易云音乐--半月总结!!! 模仿网易云音乐pc端项目搭建基本项目引入项目中使用的东西------axios,element-Ul 遇到的问题播放音乐路由跳转 ...
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器
vue3 + TypeScript + vant +pinia 实现网易云音乐播放器实现功能每日推荐私人FM 歌单广场排行榜歌手歌曲播放 mv播放上下滑动切换云盘上传用户登录歌单创 ...
Vue3.0 + typescript 高仿网易云音乐 WebApp
Vue3.0 + typescript 高仿网易云音乐 WebApp 前言 Vue3.0 的正式发布,让我心动不已,于是尝试用 vue3 实现一个完整的项目,整个项目全部使用了 composition ...
牛X，网易开源了这个项目后，结果被山寨出了无数个网易云音乐 APP，网友炸锅了！...
" 阅读本文大概需要 3 分钟. " 大家印象中的国产开源,也许更多关注的是BAT.京东.美团之类,其实还有一些大厂的开源,人们平时没太留意,比如小米.网易等等,他们的开源库里其实 ...
牛X，网易开源了这个项目后，结果被山寨出了无数个网易云音乐APP，网友炸锅了！...
个点击上方"Github中文社区",关注看遍Github好玩的项目第023期原创分享作者:huber 大家好,我是hub哥大家印象中的国产开源,也许更多关注的是BAT.京东 ...
【开源项目学习】源码剖析，学习仿网易云音乐app代码
[前言] 这篇文字不全是讲app代码,而是博主怎么根据代码系统学习梳理的过程,非专业,如有不对,欢迎指出仿网易云音乐app源码地址:https://github.com/aa112901/remus ...
Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示注:因为视频太模糊,每日 ...
音乐类产品——“网易云音乐”app交互原型模板（免费使用）
网易云音乐虽是一款音乐app,但有人说它也是社交界的一股清流以及一匹黑马.音乐带给人的感染,激发着很多人在这里表达着他们的情绪和心声.网易云音乐上的真实用户点评,不仅被印在地铁的广告牌上,还在朋友圈频 ...
vue3实战项目——网易云App【01-项目准备】
项目准备一.准备提供数据的API 1.网易云音乐 NodeJS 版 API的安装这里我使用的是一个github上面的项目文档地址为:网易云音乐 NodeJS 版 API文档下载地址为: git ...
使用React和Node.js制作网易云音乐App的一次总结【实现全部基本核心功能】
一.技术选型语言选择: JavaScript TypeScript 最终选择了JavaScript作为开发语言,一开始尝试使用TypeScript,但是由于是移动端,antd-mobile的库与TS ...

Vue3+node.js实战项目网易云音乐APP（二）