Vue-cli-webpack搭建斗鱼直播步骤详解

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

git clone https://github.com/YexChen/douyu_assets.git

npm i -S lib-flexible
npm i -S axios
npm i -S vue-axios

assets 放静态内容的地方，但是支持预编译
components 放组件的地方，当然也可以别具一格随便创个文件夹代替之
router/index.js router文件夹是放路由的地方，index.js是我们的根路由 
app.vue vue-cli帮我们生成好的一个组件(根组件)，没什么好稀奇的
main.js webpack的入口文件，聚合vue应用里面的东西

<template lang="html">
 <div class="side-menu" @click = "hideSide">
 <ul>
 <router-link v-for = "(item,index) in list" :to="item.url" :key = "index">
 {{item.title}}
 <i class = "icon-chevron-right"></i>
 </router-link>
 </ul>
 </div>
</template>
<script>
export default {
 data(){
 return {
 list : [
 {title : "首页",url : "/"},
 {title : "全部分类",url : "/category"}
 ]
 }
 },
 methods : {
 hideSide(){
 this.$emit("hide")
 }
 }
}
</script>
<style lang="css">
 .side-menu {
 background: rgba(10,10,10,.3);
 height: 100%;
 position: fixed;
 width: 100%;
 top: 0;
 padding-top: 44px;
 z-index: 11;
 }
 .side-menu ul {
 width: 70%;
 background: #282828;
 height: 100%;
 border-top: 1px solid #222;
 }
 .side-menu ul li {
 height: 50px;
 border-bottom: 1px dotted #333;
 font-size: 14px;
 line-height: 50px;
 padding: 0 30px 0 20px;
 color: #9a9a9a;
 }
 .side-menu ul li i {
 float: right;
 line-height: 50px;
 }
</style>

<template lang="html">
 <div class="mr-root">
 <app-header>
 <p class = "title">斗鱼TV</p>
 </app-header>
 <loading v-if="showLoading"></loading>
 </div>
</template>
<script>
import Public from "../public"
export default {
 mixins : [
 Public
 ],
 data(){
 return {
 showLoading : true
 }
 }
}
</script>
<style lang="css" scoped>
</style>

import AppHeader from './components/AppHeader'
import Loading from './components/Loading'
export default{
 components: {
 AppHeader,
 Loading
 }
}

<template lang="html">
 <header>
 <i class = "icon-reorder" @click = "showSlide"></i>
 <slot></slot>
 <i class = "icon-user"></i>
 </header>
</template>
<script>
import bus from "../bus"
export default {
 methods : {
 showSlide(){
 bus.$emit('showSide')
 }
 }
}
</script>
<style lang="css" scoped>
 header {
 height: 44px;
 background: #333;
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 z-index: 100;
 padding: 0 15px;
 color: #fff;
 line-height: 44px;
 font-size: 16px;
 }
 header i {
 color: #999;
 }
 .title {
 margin-left: 15px;
 display: inline-block;
 }
 .icon-user {
 float: right;
 line-height: 44px;
 }
</style>

<style lang="css">
 .loading {
 height: 100%;
 position: fixed;
 z-index: 10;
 width: 100%;
 background: #062734;
 opacity: .4;
 }
 .loading img {
 width: 100%;
 height: auto;
 position: absolute;
 top: calc(50% - 140px);
 }
</style>

<template>
 <div id="app">
 <transition name = "side">
 <side-menu v-show = "show" @hide = "hideSide"></side-menu>
 </transition>
 <router-view/>
 </div>
</template>
<script>
import SideMenu from "./components/SideMenu"
import bus from "./bus"
export default {
 name: 'app',
 components : {
 SideMenu
 },
 created(){
 this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{
 console.log(res.data.data);
 })
 },
 data(){
 return {
 show : false
 }
 },
 mounted () {
 bus.$on("showSide",this.side)
 },
 methods : {
 side(){
 this.show = !this.show
 },
 hideSide(){
 this.show = false
 }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/Home'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Home',
 component: Home
 }
 ]
})

<template lang="html">
 <div class="mr-item">
 <router-link :to="'/room/'+room.room_id">
 <img :src="room.room_src" alt="">
 <div class="room-info">
 <span class = "nickname">{{room.nickname}}</span>
 <span class = "count">
 <i class = "icon-group"></i>
 {{room.online || number}}
 </span>
 </div>
 <div class="room-title">
 <i class = "icon-desktop"></i>
 {{room.room_name || message}}
 </div>
 </router-link>
 </div>
</template>
<script>
export default {
 props : ["room"]
}
</script>
<style lang="css" scoped>
 .mr-item {
 margin-top: 10px;
 float: left;
 width: 4.4rem;
 margin-right: .3rem;
 position: relative;
 }
 .mr-item img {
 width: 100%;
 height: 2.6rem;
 border-radius: 5px;
 }
 .room-info {
 position: absolute;
 bottom: 33px;
 color: #fff;
 padding: 0 5px;
 left: 0;
 right: 0;
 overflow: hidden;
 background: rgba(10,10,10,.5);
 line-height: 24px;
 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;
 }
 .room-info .count {
 float: right;
 }
 .room-title {
 line-height: 30px;
 }
</style>

<template lang="html">
 <div class="mr-root">
 <app-header>
 <p class = "title">斗鱼TV</p>
 </app-header>
 <loading v-if="showLoading"></loading>
 <home-item v-for = "(room,index) in roomList" :room = "room" :key = "index">
 </home-item>
 <p v-if = "error">加载失败，请稍后再试...</p>
 <div class="clear"></div>
 <div class="load-more">
 <span @click = "loadMore">点击加载更多</span>
 </div>
 </div>
</template>
<script>
import Public from "../public"
import HomeItem from "../components/HomeItem"
export default {
 mixins : [
 Public
 ],
 data(){
 return {
 showLoading : true,
 error : false,
 roomList : [],
 page : 0
 }
 },
 components : {
 HomeItem
 },
 created(){
 this.getInfo(this.page)
 },
 methods : {
 getInfo(page){
 this.$http.get(`/douyuapi/RoomApi/live?offset=1&limit=20`).then(res=>{
 this.error = false
 this.roomList = this.roomList.concat(res.data.data)
 setTimeout(()=>{
 this.showLoading = false
 },1000)
 })
 .catch(err=>{
 this.error = true
 this.showLoading = false
 })
 },
 loadMore(){
 this.page++
 this.getInfo(this.page)
 }
 }
}
</script>
<style lang="css">
.mr-content {
 padding: 44px 0 0 .3rem;
 overflow: hidden;
}
.load-more {
 margin: 10px;
 text-align: center;
}
.load-more span {
 display: inline-block;
 line-height: 30px;
 padding: 0 20px;
 border-radius: 10px;
 border: 1px solid #000;
}
</style>