Vue实战：网易云音乐（初始化项目(1)）

提示：本文源码已上传gitee，可以作为参考文件使用。

---

前言

vue3：vue3可以使用vue2内容，是向下兼容的（除了弃用部分）

本次实战需要查询网址：

• 网易云API官网

https://github.com/Binaryify/NeteaseCloudMusicApi

• Vue3官网

https://cn.vuejs.org/

---

提示：以下是本篇文章正文内容

一、项目后台部署

1. 找网易云API官网

https://github.com/Binaryify/NeteaseCloudMusicApi

2. 按文档要求运行

安装：

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

下载依赖
npm install

进入运行：

node app.js

看见以下内容，则表示运行成功。

进入查看，后端部署成功

http://localhost:3000

---

二、vue项目创建

1.创建vue项目

vue create wangyiyun-app

2.选择通过脚手架搭建项目

根据自己的需要进行配置，（我之前使用yarn下载的，但是后续下载插件时出现错误，还未找到原因，先跟视频内容使用一样的配置，后续再研究）

最后打n即可。

3.运行项目

cd wangyiyun-app

npm run serve
启动项目成功

4.使用yarn出错

The project seems to require yarn but it’s not installed.
法一：
下载yarn

yarn

法二：
项目中存在 yarn.lock 在控制台中输入 npm install -g yarn 配置完后再运行

npm install -g yarn

然后执行

yarn run serve

法三：
删除yarn.lock,再重新执行，不报错

yarn

yarn serve 

vue 新建项目的时候，
我的项目选择的是 npm，然后又使用了 yarn 装包，在根目录下生成了一个 yarn.lock 的文件
此时执行 npm run serve 不会报错，yarn serve会报错
应该是两个混着用的原因，导致了后续报错。

---

三、创建rem布局

1.移动端的适配

1.在public下面创建js/rem.js

2.设置rem

当窗口发生改变时，进行适配。
js/rem.js

function remSize(){
 //设置rem
 //1.获取设备宽度
 var deviceWidth = document.documentElement.clientWidth ||window.innerWidth
 //设计稿750，设置宽度范围：不能过大也不能过小
 if(deviceWidth >= 750){
 deviceWidth = 750
 }
 if(deviceWidth <= 320){
 deviceWidth = 320
 }
 //2.根据设备宽度，调整html的fontSize
 //750px--> 1rem=100px ,375px-->1rem=50px
 // 设置html
   document.documentElement.style.fontSize=(deviceWidth/7.5)+'px'
// 设置字体大小15px  这里是设置body
   document.querySelector('body').style.fontSize=0.3+"rem"
}

字体大小随rem改变
默认为16px，这里设置在375px下字体大小为15px->0.3rem

3.rem的调用

js/rem.js

// 调用一下这个函数
remSize()

// 当窗口发生变化的时候，就调用此事件
window.onresize = function () {
  // 窗口变化是，也要调用一下这个函数
  remSize()

}

4.index.html中引入rem.js

index.html

<!-- <%= BASE_URL %>基础路径public -->

<!-- 它是在js中的rem.js-->
 <script src="<%= BASE_URL %>js/rem.js"></script>

5.检验是否设置成功

在iphone6/7/8的调试窗口下，可以看见设置的font-size，则设置成功

---

四、字体图标的使用

1.字体图标项目的建立

通过点击加入购物车，把所需要的图标导入到指定项目去

2.字体图标引入到项目中

1.选择象征Symbol部分，复制代码

2.引入到项目中

js/index.js

<script src="//at.alicdn.com/t/font_3436416_7sm71rf3csc.js">
</script>

3.点击Usage查找帮助

将图标的代码复制到页面中

<svg class="icon" aria-hidden="true">
   <!--把icon图标拿过来复制代码-->
  <use xlink:href="#icon-31liebiao"></use>
 </svg>

3.初始化代码

App.vue

<template>
  <router-view />
</template>

<style lang="less">

</style>

view/Home.vue

<template>
  <div class="home">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-31liebiao"></use>
    </svg>
  </div>
</template>

<script>

export default {
  name: 'Home',
  components: {
  }
}
</script>

4.图标大小设置

下载插件，px转换rem

找到扩展设置Root Font Size：50（默认为16）
初始化home和about后，把总体设置，图标大小设置一下

*{
  margin:0;
  padding:0;
  // 怪异盒子，设置内边距的话，不会撑开盒子
  box-sizing: border-box;
}
.icon{
  // Symbol的形式，要用宽高设置图标的大小
  // 另外：font-class的形式，只用fontsize即可
  width: .5rem;
  height: .5rem;
}

---

总结

视频学习地址

使用脚手架搭建项目
解决yarn和npm冲突问题
适配移动端项目
引入字体图标