搭建项目，启动项目，

项目开发前准备

安装饿了么框架，将main.js改为：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

初始化项目

1、 删除views和components以及assets目录

2、router.js改成这样：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
// component: Home
},
]
})

3、app.vue 改为：

<template>
<div id="app">

</div>
</template>

<style lang="less">
html,body,#app{width:100%;height: 100%;}
*{margin: 0;padding: 0;box-sizing: border-box}
</style>

准备开发，

首先布局

将app.vue 改为：

<template>
<div id="app">
<el-container style="height:100%;">
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>
</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>

<style lang="less">
html,
body,
#app {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
line-height: 200px;
}

.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

效果图：

开始给右边填充内容

在el-aside填充页面的架构，骨架先写出来，再优化样式，这样的话，开发进度会快很多。

<el-aside width="200px">
<!-- 首先大容器包括 -->
<div class="asideContent">
<!-- 首先是头像 -->
<div class="headimg">
<img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
<div>
<p>昵称</p>
<h5>签到</h5>
</div>
</div>
</div>
<!-- 侧边信息栏 -->
<div class="box-router">
<ul>
<!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
<li v-for="(item,index) in ['音乐台','排行榜','MV','个人电台','我喜欢']" :key="index">{{item}}</li>
</ul>
</div>
<!-- 信息栏下面的歌单 -->
<div>我的歌单</div>
<!-- 歌单也用v-for循环 -->
<div>
<ul>
<li
v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
:key="index"
>
<p>{{ziyuansu.name}}</p>
<p>{{ziyuansu.ramk}}</p>
</li>
</ul>
</div>
</el-aside>

效果图

开始调整样式
首先把dom重新调整了以下

<el-aside width="200px">
<!-- 首先大容器包括 -->
<div class="asideContent">
<!-- 首先是头像 -->
<div class="headimg">
<img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
<div>
<p>昵称</p>
<h5>签到</h5>
</div>
</div>
<!-- 侧边信息栏 -->
<div class="box-router">
<ul style="margin:20px 0;">
<!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
<li v-for="(item,index) in [{icon:'el-icon-setting',name:'音乐台'},{icon:'el-icon-phone',name:'排行榜'},{icon:'el-icon-goods',name:'MV'},{icon:'el-icon-error',name:'个人电台'},{icon:'el-icon-message-solid',name:'我喜欢'}]" :key="index" style="line-height:50px;">
<i :class="item.icon" style="margin-right:5px;"></i>{{item.name}}
</li>
</ul>
</div>
<!-- 信息栏下面的歌单 -->
<div style="display:flex;"><span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span><span style="margin:0 5px;">我的歌单</span><span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span></div>
<!-- 歌单也用v-for循环 -->
<div class="songsheet">
<ul>
<li
v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
:key="index"
>
<p>{{ziyuansu.name}}</p>
<p>{{ziyuansu.ramk}}</p>
</li>
</ul>
</div>
</div>
</el-aside>

然后是css

<style lang="less" scoped>
// 给大容器加一个padding
.asideContent{
padding: 20px;
line-height: 30px;
text-align: left;
.headimg{
display: flex;
height: 60px;
img {
width: 60px;
height: 60px;
border-radius: 50%;
flex: 0 0 60px;
}
div{
flex: 1;
padding: 5px 0;
* {
line-height: 25px;
text-align: center;
}
}
}
.box-router{
text-align: left;
}
}
</style>

以此类推，歌单就不写了，开始写主体。

我希望，点击不同的侧边栏展示不同的数据，这个时候就要用到router（路由）了
首先在里面添加<router-view></router-view>
然后将router.js改为

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
},
{
path:'/yinyuetai',
title:'音乐台',
name:'yinyuetai',
// 要展示的vue文件地址
component:() => import(/* webpackChunkName: "about" */ './views/yinyuetai.vue')
},
{
path:'/rank',
title:'排行榜',
name:'rank',
component:() => import(/* webpackChunkName: "about" */ './views/rank.vue')
},
{
path:'/MV',
title:'MV',
name:'MV',
component:() => import(/* webpackChunkName: "about" */ './views/MV.vue')
},
{
path:'/gerendiantai',
title:'个人电台',
name:'gerendiantai',
component:() => import(/* webpackChunkName: "about" */ './views/gerendiantai.vue')
},
{
path:'/Ilove',
title:'我喜欢',
name:'Ilove',
component:() => import(/* webpackChunkName: "about" */ './views/Ilove.vue')
},
]
})

注意import的地址，

然后在和router.js的同级目录下创建一个叫views的目录，里面分别有yinyuetai.vue、rank.vue、MV.vue、gerendiantai.vue、Ilove.vue

然后文件里面的内容分别是
gerendiantai.vue

<template>
<div>
gerendiantai
</div>
</template>

Ilove.vue

<template>
<div>
Ilove
</div>
</template>

MV.vue

<template>
<div>
MV
</div>
</template>

rank.vue

<template>
<div>
rank
</div>
</template>

yinyuetai.vue

<template>
<div>
yinyuetai
</div>
</template>

路由配置完毕，现在只要给右边的侧边栏加个跳转连接就可以了
但是这时候我发现li太长了，不好维护。我想把数据抽出来，然后这里只写一个变量。

首先将变量名改为info

然后到scrpit里面声明，这样子就好了，这样和之前的效果是完全一样的。

<script>
export default {
data() {
return {
info: [
{
icon: "el-icon-setting",
name: "音乐台"
},
{
icon: "el-icon-phone",
name: "排行榜"
},
{
icon: "el-icon-goods",
name: "MV"
},
{
icon: "el-icon-error",
name: "个人电台"
},
{
icon: "el-icon-message-solid",
name: "我喜欢"
}
]
};
}
};
</script>

好了，现在准备给li添加一个跳转的事件，跳转到哪里？没错，就是跳转到router,js里面的path，但是每个连接都是不一样的。所以要在info里面再添加一个值，叫tiaozhuandepath，所以要把script里面的info重新改变成这样子：

<script>
export default {
data() {
return {
info: [
{
tiaozhuandepath: "/yinyuetai",
icon: "el-icon-setting",
name: "音乐台"
},
{
tiaozhuandepath: "/rank",
icon: "el-icon-phone",
name: "排行榜"
},
{
tiaozhuandepath: "/MV",
icon: "el-icon-goods",
name: "MV"
},
{
tiaozhuandepath: "/gerendiantai",
icon: "el-icon-error",
name: "个人电台"
},
{
tiaozhuandepath: "/Ilove",
icon: "el-icon-message-solid",
name: "我喜欢"
}
]
};
}
};
</script>

然后回到li，我们给li添加个点击事件

@click="$router.push(item.tiaozhuandepath)"

解释以下语法，@click就是点击事件，@click=“执行的语句或者函数”
for循环讲解：
v-for是vue的语法，可以直接写在标签上，和普通的for循环一样，
例子：
结果：

也就是说，for循环会拿到每一个子元素，v-for="(item,index) in info"，这里的item就是每个子元素的名字，可以自己随意命名，index就是当前子元素的索引，也就是当前子元素是第几个，实际上跟js语法for(let k in data)相似的，之后item.xxx就是对应的对象里面的值，下面贴上图示讲解：

首先要知道for循环，就是遍历一个数组，拿到里面的每个子元素。
假设有一个数组[1,2,3,4],for循环就是跑四次，第一次拿到1，第二次拿到2，第三次拿到3，第四次拿到4，直到往下执行。

而这里的info等于左边的一个数组，第62行到87行
而item就是每一个子元素，
首先第一次拿到63-67，所以这时的item.name也就是66的name。以此类推，
第二次就拿到68-72.第三次拿到73-77……

通过上面的讲解应该知道item时什么了吧？如果这还没有听懂的话，两个建议，1从此别碰电脑，2从此别碰电脑。

$router.push(item.tiaozhuandepath)跳转到item.tiaozhuandepath。
@click=“dada” 点击时执行dada的函数，
@click="dada(e)"点击时执行dada的函数，并且把e传过去。

最后贴上整个页面的代码：

<template>
<div id="app">
<el-container style="height:100%;">
<el-container>
<!-- 侧边栏 -->
<el-aside width="200px">
<!-- 首先大容器包括 -->
<div class="asideContent">
<!-- 首先是头像 -->
<div class="headimg">
<img src="http://img2.imgtn.bdimg.com/it/u=2880081924,493605320&fm=26&gp=0.jpg" alt />
<div>
<p>昵称</p>
<h5>签到</h5>
</div>
</div>
<!-- 侧边信息栏 -->
<div class="box-router">
<ul>
<!-- 用一个v-for,遍历一下 这样就有六条数据了。-->
<router-link v-for="(item,index) in info" :key="index" tag="li" :to="item.tiaozhuandepath" active-class="liactive">
<i :class="item.icon" style="margin-right:5px;"></i>
{{item.name}}
</router-link>
</ul>
</div>
<!-- 信息栏下面的歌单 -->
<div style="display:flex;">
<span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span>
<span style="margin:0 5px;">我的歌单</span>
<span style="flex:1;border-top: 1px solid #000;position: relative;top: 15px;"></span>
</div>
<!-- 歌单也用v-for循环 -->
<div class="songsheet">
<ul>
<li
v-for="(ziyuansu,index) in [{name:'歌单1',ramk:'歌单1备注'},{name:'歌单2',ramk:'歌单2备注'},{name:'歌单3',ramk:'歌单3备注'}]"
:key="index"
>
<p>{{ziyuansu.name}}</p>
<p>{{ziyuansu.ramk}}</p>
</li>
</ul>
</div>
</div>
</el-aside>
<!-- 主体内容 -->
<el-main>
<router-view></router-view>
</el-main>
</el-container>
<!-- 底部内容 -->
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
info: [
{
tiaozhuandepath: "/yinyuetai",
icon: "el-icon-setting",
name: "音乐台"
},
{
tiaozhuandepath: "/rank",
icon: "el-icon-phone",
name: "排行榜"
},
{
tiaozhuandepath: "/MV",
icon: "el-icon-goods",
name: "MV"
},
{
tiaozhuandepath: "/gerendiantai",
icon: "el-icon-error",
name: "个人电台"
},
{
tiaozhuandepath: "/Ilove",
icon: "el-icon-message-solid",
name: "我喜欢"
}
]
};
}
};
</script>
<style lang="less">
ul,
li {
list-style: none;
}
html,
body,
#app {
width: 100%;
height: 100%;
font-size: 14px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.el-header,
.el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
}

.el-aside {
background-color: #d3dce6;
color: #333;
text-align: center;
}

.el-main {
background-color: #e9eef3;
color: #333;
text-align: center;
line-height: 160px;
}

body > .el-container {
margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>

<style lang="less" scoped>
// lang表示用什么语法，我用的是less语法，下面两个例子
// 普通语法：
// .baba{xxx;}
// .baba .erzi{xxx;}
// less语法：
// .baba{xxx;.erzi{xxx}}
// .baba{xxx;.erzi{xxx}} 等同于 .baba{xxx;}和.baba .erzi{xxx;}
// 通俗点也就是说子级是可以写在父级的{}里面的。

// 给大容器加一个padding
.asideContent {
padding: 20px;
line-height: 30px;
text-align: left;
.headimg {
display: flex;
height: 60px;
img {
width: 60px;
height: 60px;
border-radius: 50%;
flex: 0 0 60px;
}
div {
flex: 1;
padding: 5px 0;
* {
line-height: 25px;
text-align: center;
}
}
}
.box-router {
text-align: left;
ul {
margin:20px 0;
li{
line-height:50px;cursor: pointer;
}
.liactive{
color: red;
}
}
}
}
</style>

<style>

</style>