vue项目--仿网易云音乐(day1)

153 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第21天,点击查看活动详情

%9__XS([WZ4]A}9VFJ78~Q8.jpg

这几天跟了B站一个up主的vue实战项目--仿网易云音乐,借用掘金这个平台想以文章的形式记录以下学习过程中遇见的一些问题以及开发的一个过程。

  1. 创建Musicapp项目
  • 首先我们需要创建这个项目,在指定的文件夹中按住Shift然后点击鼠标右键,找到打开powershell窗口,在终端里面输入vue create Musicapp按下回车即可,然后我峨嵋你需要对该项目进行选择配置。
  • 第一个,我们选择Manually select feature
  • 第二个,我们选择babel, Router,Vuex,CSS Pre-processors
  • 第三个,我们选择vue3.x
  • 第四个,我们选择Y
  • 第五个,我们选择 In dedicated config files
  • 第六个,我们选择N
  • 然后稍等一会,等他配置完成即可,若出现如下图所示就表示配置成功了:

image.png

  1. 引入Vant组件库
  • 在这个项目里我们会用到Vant组件库,视频中的UP主没有使用,但我为了方便还是使用了以下,Vant的组件库官网链接如:vant-contrib.gitee.io/vant/#/zh-C…
  • 点击进去之后点击快速上手,因为我们这个是vue3.0的项目,所以我们需要安装最新版的Vant,安装命令如下所示:
npm i vant
  • 安装完成之后我们需要引入,在vite.config.js文件中进行如下图所示的配置

image.png

并且在main.js入口文件进行全局的引入和使用,如果想要局部引入可以参考官方文档

image.png

这样我们就可以使用Vant组件库了,而且我们的Vue项目就初始化完成了。