项目运行
首先要安装npm或者cnpm和node.js环境
在终端建立vue-cli项目，命令行cnpm install vue-cli -g//全局安装 vue-cli
查看vue-cli是否成功，不能检查vue-cli,需要检查vue 命令行vue list
下面建立项目名为webmusic新建vue项目vue init webpack “项目名称”
创建好了，那就让项目先安装下依赖再运行一下，会出现下面的页面，操作指令是：cnpm install cnpm run dev
注意 这里要在webmusic下进行安装和运行!!!
最后打开终端npm run serve就可以获得本地端口号啦
项目结构
dist文件夹是存放最终发布版本的代码，这就是dist文件夹的用处
1、build：构建脚本目录
1）build.js==> 生产环境构建脚本；
2）utils.js==> 构建相关工具方法；
3）webpack.base.conf.js==> webpack基本配置；
4）webpack.dev.conf.js==> webpack开发环境配置；
2、config：项目配置
1）dev.env.js==> 开发环境变量；
2）index.js==> 项目配置文件；
3、node_modules：npm 加载的项目依赖模块
4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
1）assets：资源目录，放置一些图片或者公共js、公共css。这里的资源会被webpack构建；
2）components：组件目录，我们写的组件就放在这个目录里面；
3）router：前端路由，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；
5）main.js：入口js文件；
5、static：静态资源目录，如图片、字体等。不会被webpack构建
6、index.html：首页入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息
8、README.md：项目的说明文档，markdown 格式
9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等
主页面文件里导入vue相关插件
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><!-- 导入 iconfont的字体图标 --><link rel="stylesheet" href="///t/font_1654044_7fb6pz0mo1.css"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"></div>if ( NODE_ENV === 'production' ) {<script src="/npm/vue@2.6.10/dist/vue.runtime.min.js"></script><script src="/npm/vue-router@3.0.6/dist/vue-router.min.js"></script><script src="/npm/vuex@3.1.1/dist/vuex.min.js"></script><script src="/npm/axios@0.19.0/dist/axios.min.js"></script></body></html>
制作网页头部和左边菜单栏
在第一步先创建top.vue 和 index.vue两个组件，然后在App.vue根组件上引入这两个组件 。下面这个是index.vue组件
<template><div class="index-container"><div class="nav" ><ul><li><router-link to="/discovery"><span class="iconfont icon-find-music"></span>发现音乐</router-link></li><li><router-link to="/playlists"><span class="iconfont icon-music-list"></span>推荐歌单</router-link></li><li><router-link to="/songs"><span class="iconfont icon-music"></span>最新音乐</router-link></li><li><router-link to="/mvs"><span class="iconfont icon-mv"></span>最新MV</router-link></li><li><router-link to="/result"><span class="iconfont el-icon-search"></span>搜索音乐</router-link></li></ul></div><div class="main"><router-view></router-view></div><div class="player"><audio controls autoplay :src="url" loop></audio></div></div></template><script>export default {name: 'index',data() {return {activeIndex: 0,url:""};}};</script><style lang="scss"></style>
下面是top.vue组件代码
<template><div class="top-container"><div class="left-box"><div class="history-wrapper"><span @click="$router.go(-1)" class="iconfont icon-arrow-lift"></span><span @click="$router.go(1)" class="iconfont icon-arrow-right"></span></div></div><div class="right-box"><el-input size="small" @keyup.enter.native="toResult" placeholder="搜索" v-model.trim="query"><i slot="prefix" class="el-input__icon el-icon-search" style="width=100%"></i></el-input></div></div></template><script>export default {name: 'top',data(){return {query:''}},methods:{toResult(){if(!this.query){this.$message.warning('请输入查询内容')}else{this.$router.push(`/result?keywords=${this.query}`)}}},};</script><style lang="scss" scoped></style>
上面的top.vue组成了头部页面，index.vue是页面左边的导航菜单，是利用vue的路由来进行页面的切换。路由配置在main.js文件里。
import Vue from 'vue';import App from './App.vue';// 导入Element-uiimport element from '@/utils/element'Vue.use(element)// 导入全局初始化样式import '@/style/base.scss';// 路由整合import VueRouter from 'vue-router';Vue.use(VueRouter);// 导入对应的路由import discovery from '@/views/discovery.vue';import playlists from '@/views/playlists.vue';import playlist from '@/views/playlist.vue';import songs from '@/views/songs.vue';import mvs from '@/views/mvs.vue';import mv from '@/views/mv.vue';import result from '@/views/result.vue';const router = new VueRouter({routes: [{// 发现音乐path: '/',redirect: '/discovery'},{// 发现音乐path: '/discovery',component: discovery},{// 推荐歌单path: '/playlists',component: playlists},{// 推荐歌单path: '/playlist',component: playlist},{// 最新音乐path: '/songs',component: songs},{// 最新音乐path: '/mvs',component: mvs},// mv详情{path: '/mv',component: mv},// 搜索结果页{path: '/result',component: result}]});import moment from 'moment';// 全局过滤器Vue.filter('formatDuration',(dt)=>{// 转分let min = Math.ceil(dt / 1000 / 60);min = min < 10 ? '0' + min : min;// 秒let sec = Math.ceil((dt / 1000) % 60);sec = sec < 10 ? '0' + sec : sec;return min + ':' + sec;})Vue.filter('formatTime', (time)=>{return moment(time).format('YYYY-MM-DD hh:mm:ss');})Vue.filter('formatCount',(count)=>{if (count / 10000 > 10) {return parseInt(count / 10000) + '万';} else {return count;}})
在main.js导入了vue-router插件、和elment.-ui组件库，导入组件和配置里左边导航菜单所有路由，其中配置了全局过滤器，把数据中出现的时间数据都过滤成规范的格式，其中用到了moment组件转换格式。还有导入全局初始化样式。
然后设计右边显示区域组件代码，有discovery.vue（发现音乐）、playlists.vue（推荐歌单）、songs.vue（最新音乐）、mvs（最新MV）、mv.vue（MV详情）、result.vue（搜索结果），组件间有用到组件之间的数据传输，用到props和$emit等，路由的数据传输（query、params）。
以上组件的代码就不放出来了，想要源码的可以到文章最后找链接。
想要做好Vue项目基本功必须要踏实，因为大多数都是数据绑定视图，学会用接口中的josn数据，赋值到Vue的data中，再用v-bind或者v-modle绑定input元素当中。像以下代码
<div class="tab-content"><div class="items"><div class="item" v-for="(item,index) in playList" :key="index" @click="toPlayList(item.id)"><div class="img-wrap"><div class="num-wrap">播放量:<span class="num">{{item.playCount | formatCount }}</span></div><img :src="item.coverImgUrl" alt="" /><span class="iconfont icon-play"></span></div><p class="name">{{item.description }}</p></div></div></div>
接下来是接口的调用获取数据，为了代码简洁美观，把所有用axios请求数据的代码全都放到api文件夹，其中在request.js中设置了过滤器过滤掉域名，在axios请求接口的可以省略掉域名，还设置了各种请求状况处理。以下是request.js代码
import axios from 'axios'const request = axios.create({baseURL:process.env.VUE_APP_URL,timeout:30000})//添加请求拦截器request.interceptors.request.use(function(config){// window.console.log(config)if(!config.params){config.params = {}}config.params.t = Date.now()//在发送请求之前做某事return config;},function(error){//请求错误时做些事return Promise.reject(error);})// 注册响应拦截器// Add a response interceptorrequest.interceptors.response.use(function (response) {return response.data;}, function (error) {return Promise.reject(error);});export default request
在request.js中导入和axios，在其他api中只要导入request.js就可以进行域名拦截和免导入axios。下面是discovery.js的轮播图请求图片数据代码，请求方式是“get”
import request from '@/utils/request';// 轮播图export function banner() {return request({url: '/banner',method: 'get'});}
在discovery.vue中导入discovery.js中的banner方法，把banner返回的图片数据赋值给data中的banners：[]数组中，在element-ul的轮播图组件中调用图片数据即可，利用v-for指令遍历banners数组，把数组中的每一项数据赋值给item，再用:key绑定每一项子元素索引
<el-carousel class="" :interval="4000" type="card"><el-carousel-item v-for="(item, index) in banners" :key="index"><img :src="item.imageUrl" alt="" /></el-carousel-item></el-carousel>
因为返回的数据很多，所以使用了element-ui组件库中的分段器组件来进行分页，每页只能浏览限定的数据。
<el-pagination@current-change="handleCurrentChange"backgroundlayout="prev, pager, next":total="total":current-page="page":page-size="5"></el-pagination>
其中歌曲、MV的分类功能用到了class类名的切换和监听器的监听，每当点击不同类型的分类，都会高光显示，然后监听器就会监听到你点击的节点，根据点击的类型的判定来改变type参数，所请求的数据类型会随之改变。
watch: {type() {this.getData();}}
getData（）方法
getData() {topSongs({type: this.type}).then(res => {this.tableData = res.data;});}
request.js中的topSongs()方法
import request from '@/utils/request';// mv地址export function topSongs({type}) {return request({url: '/top/song',method: 'get',params:{type}});}
接着就是把获取接口的数据绑定到节点上。首先得学会获取接口的数据，接口是从胡凌皓老师那里拿到的，举个例子，用axios获取数据，获取方法如下：
export function newsong() {return request({url: '/personalized/newsong',method: 'get'});}
url就是接口地址，method后面的就是请求方式，然后在该方法后面**.then()**请求成功执行函数。
newsong().then(res => {this.newsong = res.result;});
res就是返回的参数，然后把返回的数据赋值给自己定义的数据newsong数组，自己定义的函数前面一定要用this，赋值完成后就把数据绑定到节点中，用v-bind或者v-modle或者v-text或者v-for绑定上去
<div class="items"><div class="item" v-for="(item, index) in newsong" :key="index"><div class="img-wrap"><img :src="item.picUrl" alt="" /><span @click="playMusic(item.id)" class="iconfont icon-play"></span></div><div class="song-wrap"><div class="song-name">{{item.name }}</div><div class="singer">{{item.song.artists[0].name }}</div></div></div></div>
这里用的是v-for遍历数组，然后把数组中的子节点用v-text（也可以用**{{}}**绑定）绑定在节点中。
上图就是从接口中返回的数据，由上图可见接口返回了一个数组，所以this.newsong=res.result就是把接口返回的数组赋值给newsong。
上图是数组中第一个子节点的数据，想使用里面的数据可以用.操作符获取。
明白了以上操作，做这个项目就没什么问题了，想学习Vue项目的同学，拿这个来练手特别适合。源码在最后。
源码
链接：/s/1DRLaooiCNrorR6WkqekuQQ
提取码：18gn
感谢 胡凌皓 老师的视频指导
