新版网易云音乐正在制作,可以访问https://github.com/Linkontoask/radishes查看最新进展
首先,你需要具备以下知识,不然阅读起来可能会有一些阻碍。
1,vue-cli 脚手架 基础
2,javascript 基础
3,html css 基础 (其中涉及到 html5,css3)
ok,话不多说,先看一下效果图
这时候我想可以插入一个预览地址了:点击预览
github地址:github地址
小提示:思维导图被我在打扫卫生的时候弄丢了
没关系,我徒手用键盘撸文字导图。其实,这里的思维导图就是一个逻辑,告诉我们应该从哪里下手,代码架构,与组件开发。需要说明的是我这里用的是酷狗api,用后台做了代理,后面会详细介绍怎么用后台代理实现跨域。
话不多说,撸思维导图
一、go、go、go。vue 有一个特点就是渐进式框架,我们要利用这个特性(组件)将网易云音乐分成四大板块(组件),顶部导航栏 、侧边栏、歌曲信息栏、歌曲控制栏
二、顶部导航栏可以分成以下几个功能区,Logo、搜索框、用户区、窗口控制区
三、侧边导航栏可以分成以下几个功能区,推荐、我的音乐、歌单
四、歌曲信息栏为动态生成,所以就撸一个组件放在那里,到时候将动态信息压入进去配合html、css显示出来
五、歌曲控制栏有固定的布局,功能都是围绕歌曲,也就是audio(html5)标签,用一个组件实现与信息栏的交互。我这里是最后实现这个功能的(大概因为我是一个美术生)
可能文字导图看起来很难受,我现在用 XMind8 做一个思维导图,没有那么详细请谅解。
前期准备工作已经差不多,现在用 vue-cli 脚手架生成vue的helloword(不会使用请百度关键词 "vue-cli" 教程)
成功项目截图
没有安装vue-cli框架的同学可以使用npm来安装,win+r 打开cmd窗口 。
输入 :npm install -g vue-cli
创建项目框架 : vue init webpack HelloWord (HelloWord 为项目名称)
安装项目依赖:npm install (前提是进入项目根目录下使用 cmd)
测试项目是否成功:npm run dev (前提是进入项目根目录下使用 cmd,成功会显示vue Logo)