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