Vue3+node.js实战项目网易云音乐APP（二）
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网易云音乐实战项目(一)： Vue3+node.js实战项目网易云音乐APP（二）: Vue3+node.js网易云音乐实战项目(三): Vue3+node.js网易云音乐实战项目(四)：
未完…
未完…
