1、前端页面构建

1.1、创建Vue项目

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

#创建一个项目
vue create music_app
1
2

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

2.2、自适应REM布局

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

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

   

2. 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()
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

3. 引入rem.js文件

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

   

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

   看看效果

   

4. 添加一个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内的名字

1. Font class 引用

   在index.html引入inconfont.js

   

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

​ 看一下页面效果

2. Symbol 引用

​ 在index.html引入iconfont.css

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

  .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  }
1
2
3
4
5
6
7

​ 我们同样在Home.vue中使用

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

​

看看效果对比

​

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

未完…

未完…