Vue-cli-webpack搭建斗魚直播步驟詳解
前言
想必大家都看過斗魚直播吧?這次在下使用從github上面摸下來的API,為大家重現(xiàn)一下斗魚網(wǎng)站的搭建,使用vue-cli-webpack來實現(xiàn)。
聲明
本文章所用API均從網(wǎng)絡獲取,本文作者不承擔任何法律責任,請閱讀本文的小伙伴們用于學習用途,不能用于商業(yè)!
如有侵權行為,請與作者聯(lián)系,作者將于2日內(nèi)刪除。
效果
pc端

移動端

開始
好,扯了這么久的淡,該開始構建項目了
項目初始化
初始化文件夾
打開一個新文件夾,在命令行輸入:
vue init webpack
如果顯示vue not found,那么該去下載vue-cli,如果webpack未找到就去下載webpack

到這一步以后就ctrl + c ,退出終端
安裝依賴
退出命令行之后,輸入以下指令:
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
chromedriver 是安裝必備的包,鏡像好像有問題,我們提前裝一下。
npm install
GFW不是吹的,外網(wǎng)真的很慢,大家泡杯茶慢慢等
趁著等的時候,我們來下載幾個樣式和圖片,運行
git clone https://github.com/YexChen/douyu_assets.git
來下載assets文件,覆蓋 assets文件夾到 項目文件/src 中
npm i -S lib-flexible npm i -S axios npm i -S vue-axios
我們還需要lib-flexible來解決移動端適配的問題,axios和vue-axios來方便請求我們的數(shù)據(jù)
引入安裝的包
大家可以進入到src目錄下,這里簡要介紹下各個文件的功能
assets 放靜態(tài)內(nèi)容的地方,但是支持預編譯 components 放組件的地方,當然也可以別具一格隨便創(chuàng)個文件夾代替之 router/index.js router文件夾是放路由的地方,index.js是我們的根路由 app.vue vue-cli幫我們生成好的一個組件(根組件),沒什么好稀奇的 main.js webpack的入口文件,聚合vue應用里面的東西
我們來修改main.js,參照下圖:

紅線區(qū)域我們引入了移動適配的lib-flexible,和font-awesome,style公共樣式
接下來,我們來引入axios和vue-axios,請看下圖:

這里我們引入了vue-axios和axios,并通過vue.use來進行綁定
跑起項目
準備工作已經(jīng)做完了,接下來可以跑起項目了:
npm run dev
根據(jù)命令行的提示打開網(wǎng)頁即可看到效果:

好的,我們的項目初始化就到這里了。
配置映射和測試斗魚API
配置映射
來到根目錄下的 config/index.js 這里是配置開發(fā),構建,及路由映射的地方

如圖修改proxyTable中內(nèi)容,這里解釋一下幾個參數(shù):
target : 目標地址,
changeOrigin : 是否跨域,
pathRewrite : 鍵值對中用值替換鍵的值,其中^是正則中表示開始的符號
隨手請求一個API
進入src/App.vue,如下修改文件:

created是我們的生命鉤子函數(shù),vue實例在created階段會執(zhí)行里面的代碼。
this.$http相當于this.axios,$http的具體實現(xiàn)可以去node_modules里面看,很簡單的
重啟webpack服務,看下效果

ctrl+c
npm run dev
看到以上效果的話,證明數(shù)據(jù)請求成功了。
搭建首頁應用
思維導圖解析
我們要寫的應用較為復雜,寫vue的項目就是這樣,需要清晰的思想,不然很容易崩潰,最后重來

好,接下來為大家講解一下我們的組件:
Root是根組件,一切的源(廢話)
App,應用組件,對應src/App.vue
Side-menu :側邊欄,因為較為容易且不需要改變單頁路由來顯示不同內(nèi)容,所以直接放在app組件里邊
router-view : 這是vue-router的子路由顯示面板,通過src/router/index.js來控制
home : 主頁視圖文件
public : 公用組件,亦可在其他頁面使用,降低工作量
AppHeader : 應用頭部組件
Loading : 加載中的組件,就一張gif
側邊欄SideMenu組件
在src/components目錄中新建一個文件,名為SideMenu.vue,修改內(nèi)容為:
<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>
這里解釋一下文件里面的內(nèi)容:
文件分為三大塊
template
script
style
這些內(nèi)容通過script中node的export方法推出去
其中template渲染了幾個router-link,用來跳轉(zhuǎn)路由
script定義了data和method
style寫了樣式
然后打開src/App.vue,修改里面的內(nèi)容,追加下圖內(nèi)容:

好的,我們的SideMenu組件就注冊完成了。
搭建router-view內(nèi)容
好的,我們接下來做router-view的內(nèi)容
bus-中央總線
在做之前,我們需要了解一個新的概念-bus,又稱中央總線

好的,又是之前那張思維導圖,不過是不是多出了三臺車呢?
沒錯,這就是我們的bus。
當appheader想加載側邊欄時,是不能穿越徒步穿越山和大海的,老司機還是要開車的是不是
這個時候我們坐公交就行了,告訴app,把我給拉出來
當然,side-menu和app之間相距不遠,父子組件是可以直接綁定的
在src目錄下創(chuàng)建bus.js,內(nèi)容為

這是我們的bus,說白了就是一個對象,只不過借用了vue的消息管道,大家也可以自己寫個管道
制造home主頁路由
在src目錄下創(chuàng)建pages目錄,這個目錄我們用來存放router-vue的內(nèi)容
然后我們在src/pages/下創(chuàng)建一個home.vue組件,用來做home的內(nèi)容,寫下以下內(nèi)容:
<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>
解釋一下,這里使用了app-header和loading組件,由Public導入(等會寫)。
mixins是一個混合物,能夠自動把模組分析,加載到當前實例中。
data中 showLoading和v-if配合使用,用來關閉loading效果
如果不清楚的話可以看下思維導圖
public公用模組
public是一個模組集合,我們在開發(fā)的時候可能不同頁面要使用相同的組件,這時就需要public打包處理了。
在src中新建public.js,內(nèi)容如下:
import AppHeader from './components/AppHeader'
import Loading from './components/Loading'
export default{
components: {
AppHeader,
Loading
}
}
上文我們導入了AppHeader和Loading模塊,并設置了默認導出
好,那么我們來寫兩個子模組,
AppHeader
在components中新建一個文件AppHeader.vue,代碼如下
<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>
定義了基本的頭部,給加載更多綁定了一個事件,通過bus進行傳遞,由app.vue來實現(xiàn)
Loading組件
src/components/里面新建一個Loading.vue,代碼如下:
<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>
就添加了一張gif圖而已,非常簡單的
bus事件的處理
好的,既然我們的appheader已經(jīng)發(fā)車了,那么應該在app.vue根路由里面開個公交車站,來接收巴士:
修改App.vue:
<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>
修改路由
修改根路由/src/router/index.js為:
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
}
]
})
增加HomeItem
好的,我們有了以上功能以后呢,還需要在斗魚主頁中增加聊天室列表,在components目錄中新建文件HomeItem.vue
<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>
home.vue中加載homeitem
我們需要在Home.vue中加載HomeItem,修改home.vue為
<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>
現(xiàn)在看下頁面,是不是已經(jīng)出來了呢?
相關文章
vue+VeeValidate 校驗范圍實例詳解(部分校驗,全部校驗)
validate()可以指定校驗范圍內(nèi),或者是全局的 字段。而validateAll()只能校驗全局。這篇文章主要介紹了vue+VeeValidate 校驗范圍(部分校驗,全部校驗) ,需要的朋友可以參考下2018-10-10
vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能
最近在寫一個關于vue的商城項目,然后集成在移動端中,開發(fā)需求中有一界面,類似淘寶商城評價界面!接下來通過本文給大家分享vue實現(xiàn)類似淘寶商品評價頁面星級評價及上傳多張圖片功能,需要的朋友參考下吧2018-10-10
示例vue 的keep-alive緩存功能的實現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實現(xiàn),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06

