【Vue3网易云音乐项目实战教程】一、环境搭建及项目初始化持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

hello，大家好，我是怀旧的文学小青年。今天我为大家带来Vue3全家桶项目实战的教程，本教程主要是使用 vite 来创建一个vue3项目，结合 componsition API 的使用，目的是让从未接触过vue3的同学上手体验一下。希望大家能够喜欢！

关于网易云音乐我以前分别用vue2.x以及vue3.x各写过一版，大致上实现了网易云音乐的一些基础功能，目前代码都已开源，参考《基于网易云音乐API实现PC端音乐网站》、《Vue3.x 网易云音乐_PC音乐播放器》。我不是大佬，整个项目写的有可能会比较臃肿、抑或有不对的地方，有问题可以随时留言一起探讨！如果觉得对您有帮助，您可以给个三连击，抑或给个 star 支持一下，十分感谢！

项目介绍

适宜人群

因为该教程是项目的实战，所以我就不在这个教程中去讲解vue相关的基础知识，默认大家都是有一定的vue及JS基础。如果不懂的，可以事先去补习一下基础理论，然后再回头看本实战教程。

项目目录

├── node_modules      // npm依赖包
├── dist              // 项目build后的文件
├── public            // 
├── src               // 静态资源文件
│   ├── apis          // axios 封装及接口请求地址
│   ├── assets        // 公共资源静态文件
│   ├── components    // 公共组件
│   ├── router        // 路由
│   ├── store         // vue的状态管理
│   ├── utils         // 封装的工具
│   ├── views         // 项目的主要页面
│   ├── App.vue       // vue项目的主组件
│   └── main.js       // vue项目的主JS文件
├── .gitignore       // gitignore忽略文件
├── index.html       // vite入口文件
├── package.json     // node包管理文件
├── README.md        // 描述文件
└── vite.config.js   // vite的配置文件

技术栈

vite + vue3.x + vue-router4.x + Pinia + element-plus + axio + less + swiper

项目效果预览及源码

页面效果我就不展示出来了，在git上都有展出，可以下载下来运行。注意一下，以下2.x及3.x代码只是以前所写的，然而本次项目所写的代码还在持续更新中，我会在边开发边完善，最终效果以实际结束为准。

环境搭建

项目API service搭建

感谢感谢网易云音乐 NodeJS 版 API提供的接口支持。

搭建方法:

1、clone下网易云音乐 Node.js API service代码到本地，然后安装依赖，运行服务。此服务需要clone到本地，启动。

$ git https://github.com/Binaryify/NeteaseCloudMusicApi.git
$ npm install
$ npm run start

2、部署在Vercel，提供在线地址，不需在本地运行。(部署完成后生成的DOMAINS，就是服务端域名)

Fork项目Node.js API service

在 Vercel 官网点击 New Project

点击 Import Git Repository 并选择你 fork 的此项目并点击import

PROJECT NAME自己填,FRAMEWORK PRESET 选 Other 然后直接点 Deploy 接着等部署完成即可

前端环境准备及项目搭建

nvm的安装

首先建议安装一个Node.js的版本管理器nvm，可在同一台主机上安裝多个版本的 Node.js环境，因为不同项目可能会使用不同的 Node.js 版本，那就需要通过一个版本管理器来切换不同的 Node.js 版本。

建议直接安装最新的，安装教程就不贴出来，可自行搜索。

node的安装

可通过nvm安装最新版本的node，虽然官方推荐使用的 Node.js 版本是 12+，但是我们若是安装最新版本的vue，也会出现因node版本低，导致启动运行不了，有小伙伴遇到过此情况，所以也建议安装最新版本的node。

以上就是前期新手有可能遇到的问题，至于开发工具就可以自行选择了。

项目搭建

使用 Vite 快速构建 Vue 项目：

$ npm create vite@latest

$ cd project-name
$ npm install
$ npm run dev

选择vue框架，然后回车，等待安装完成。框架安装完成后，我们就要安装项目依赖。可以通过npm命令安装，也可以通过vue提供的可视化页面点击安装。

项目开始，我们需要安装项目运行依赖axios、element-plus、vue-router、Pinia以及开发依赖Less(Sass)。

打开终端，运行$ vue ui，我们会看到该项目的一些依赖及任务，安装上述依赖，看到以下后，代表安装成功。

课后总结

看到这里，代表项目的环境与初始化搭建成功，下一节我们就开始对项目进行规划，根据产品原型，总结分析需求。

第一节课，我们只是简单地介绍了一下项目，并进行了环境的搭建与项目初始化。还是比较基础的，并没有复杂的问题。学习本身就是一个不断积累的过程，从浅入深，~~从入门到放弃~~，随着不断地学习会越来越熟练。

一键三连，努力变得更强！！！