vue pc端 输入验证码_VUE模仿PC端网易云音乐

新版网易云音乐正在制作，可以访问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）

说了一大堆废话，下一篇文章将带我们一起进入代码代码世界！！！