基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

warnerwu 發(fā)布于2019-08-29 11:16 / 2018人閱讀

摘要：本文假設(shè)讀者手里有關(guān)于和的文檔，并且對(duì)和有一定的了解。沒有文檔也沒關(guān)系我這里有關(guān)于文檔以及介紹，可以配合本文進(jìn)行學(xué)習(xí)。關(guān)鍵就是在中部導(dǎo)航欄熱門，新上榜那塊，棕色框內(nèi)的內(nèi)容會(huì)根據(jù)中部導(dǎo)航欄選中不同內(nèi)容進(jìn)行改變。

在這個(gè)教程里面，我會(huì)通過一系列的代碼和圖片來學(xué)習(xí)怎么使用vue-router,以及vuex。本文假設(shè)讀者手里有關(guān)于vue-router和Vuex的文檔，并且對(duì)Vue-router和Vuex有一定的了解。
沒有文檔也沒關(guān)系,我這里有關(guān)于 Vue-router文檔以及Vuex介紹，可以配合本文進(jìn)行學(xué)習(xí)。由于才開始學(xué)習(xí)Vue，如有不當(dāng)
之處，還請(qǐng)大家?guī)臀腋。?/p>

首先看下這個(gè)網(wǎng)站的截圖

這里是網(wǎng)站的源碼下載地址 Github Repo
部分代碼已經(jīng)更新為2.0 JianshuVue2
代碼已經(jīng)具有React版本 JianshuByReact
這里是Demo地址，在線感受vue的魅力

搭建項(xiàng)目 項(xiàng)目結(jié)構(gòu)

本項(xiàng)目才用Vue-cli腳手架自動(dòng)生成，這是一個(gè)Vue生態(tài)系統(tǒng)中一個(gè)偉大創(chuàng)舉。這意味著我們不需要手動(dòng)構(gòu)建我們的項(xiàng)目，而它就可以很快地為我們生成。如圖所示：

components:包含所有的頁面組件

vuex:包含vuex相關(guān)文件（action.js, store.js）

static:靜態(tài)文件存放（圖片和圖標(biāo)庫等）

index.html：渲染的頁面

main.js:應(yīng)用入口點(diǎn)，包含根實(shí)例

App.vue：主頁面組件

項(xiàng)目流程：

安裝Vue-cli(要有node與npm)

npm i -g vue-cli

創(chuàng)建一個(gè)webpack項(xiàng)目，并且下載依賴

vue init webpack vue-demo-jianshu
cd vue-demo-jianshu
npm i

安裝Vue-router和Vuex

npm install vue-router vuex --save

熱加載打開頁面(生產(chǎn)的時(shí)候運(yùn)行npm run build)

npm run dev

項(xiàng)目的框架已經(jīng)搭建好了，接下來就是為項(xiàng)目添磚加瓦。

添磚加瓦第一步（初始化main.js與App.vue）

首先分析頁面結(jié)構(gòu)（專題頁面結(jié)構(gòu)和首頁一樣，就不在多帶帶贅述了，寫到哪兒分析到哪兒）

App.vue: 綠色框內(nèi)的和黃色框內(nèi)的就是每個(gè)頁面都存在的，故寫在App.vue里

home.vue: 紫色區(qū)域部分，由于文章區(qū)內(nèi)文章會(huì)進(jìn)行變化，故把文章區(qū)域多帶帶寫成組件

Article.vue: 棕色框部分

main.js部分

在main.js中我們引入Vue,App,Vue-router,并且創(chuàng)建了一個(gè)Vue的實(shí)例（因?yàn)樵趓outer這行引入了App組件router.start(App, "#app")，上main.js代碼：

import Vue from "vue"
import App from "./App"
import VueRouter from "vue-router"

import home from "./components/Home.vue"
import topic from "./components/Topic.vue"
import article from "./components/Article.vue"
import bonus from "./components/Bonus.vue"
import login from "./components/Login.vue"
import topic_article from "./components/Topic_article.vue"

//注冊(cè)VueRouter這個(gè)插件
Vue.use(VueRouter)

const router = new VueRouter()

//路由map
router.map({
    "/home": {
        component: home,
        subRoutes: {
            "/article": {
                component: article
            }
        }
    },
    "/topic": {
        component: topic,
        subRoutes: {
            "topic_article": {
                component: topic_article
            }
        }
    },
    "/bonus": {
        component: bonus
    },
    "/login": {
        component: login
    }
})
//路由重定向(訪問不存在的頁面時(shí)，重定向到這個(gè)頁面)
router.redirect({
    "*":"/home/article"
})

router.start(App,"app")//啟動(dòng)一個(gè)啟用了路由的應(yīng)用。創(chuàng)建一個(gè) App 的實(shí)例并且掛載到元素 "app"
router.go("/home/article")//為了讓頁面打開的時(shí)候能看見文章，我把它導(dǎo)航到新路由

App.vue部分

App.vue里面我們把兩個(gè)側(cè)邊欄（綠色框和黃色框）寫在這里邊，因?yàn)檫@兩個(gè)總是一直存在的

添磚加瓦第二步（home.vue和article.vue） home.vue部分

先講home.vue，home.vue里面要放紫色框內(nèi)（除了棕色框）的內(nèi)容，分析這個(gè)界面紫色框內(nèi)的左側(cè)邊欄是不變的，故可以寫死，頂部導(dǎo)航也是不變的，也寫死。關(guān)鍵就是在中部導(dǎo)航欄（熱門，新上榜那塊），棕色框內(nèi)的內(nèi)容會(huì)根據(jù)中部導(dǎo)航欄選中不同內(nèi)容進(jìn)行改變。那么該怎么實(shí)現(xiàn)這個(gè)呢？

首先寫好需要寫死的地方，如下圖代碼所示：

不知道你看懂代碼了沒，沒看懂不要緊，我來給你講解，重點(diǎn)分析導(dǎo)航欄部分，為了讓導(dǎo)航欄標(biāo)簽被選中時(shí)改變背景色，這里我使用了:class="{active: show === "hot"}" ,這是vue里v-bind:class的簡寫，如果你問我show從哪里來，我會(huì)告訴你show從天上來，哈哈，不開玩笑，show的來源也就是今天的另一個(gè)重點(diǎn)Vuex?？创a：
首先是store.js(我的理解是管理數(shù)據(jù)和操作數(shù)據(jù)的地方)

store.js部分

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {
    articles:{
        fir: {
            author:"徐丹妮",
            title:"我不是學(xué)霸，只是比你努力一點(diǎn)而已",
            time:"大約6小時(shí)之前",
            read:"8498",
            comment:"248",
            like:"2342",
            pay:"2",
            src:"url(../../static/vue-demo-hot.jpg)"
        },
        sec: {
            author:"共央君",
            title:"愛美的女生們，六款超高性價(jià)比的變美神器你都有了嗎？",
            time:"大約8小時(shí)之前",
            read:"2623",
            comment:"34",
            like:"191",
            pay:"2",
            src:"url(../../static/vue-demo-hot_1.jpg)"
        },
        thi: {
            author:"姜肥東",
            title:"畢業(yè)9年，我才學(xué)懂的道理",
            time:"大約6天之前",
            read:"6498",
            comment:"38",
            like:"242",
            pay:"2",
            src:"url(../../static/vue-demo-hot_2.jpg)"
        }
    },
    show:"hot"
}
const mutations = {
    DISPLAY_ARTICLE (state, show) {
        const article = {
            hot: {
                fir: {
                    author:"徐丹妮",
                    title:"我不是學(xué)霸，只是比你努力一點(diǎn)而已",
                    time:"大約6小時(shí)之前",
                    read:"8498",
                    comment:"248",
                    like:"2342",
                    pay:"2",
                    src:"url(../../static/vue-demo-hot.jpg)"
                },
                sec: {
                    author:"共央君",
                    title:"愛美的女生們，六款超高性價(jià)比的變美神器你都有了嗎？",
                    time:"大約8小時(shí)之前",
                    read:"2623",
                    comment:"34",
                    like:"191",
                    pay:"2",
                    src:"url(../../static/vue-demo-hot_1.jpg)"
                },
                thi: {
                    author:"姜肥東",
                    title:"畢業(yè)9年，我才學(xué)懂的道理",
                    time:"大約6天之前",
                    read:"6498",
                    comment:"38",
                    like:"242",
                    pay:"2",
                    src:"url(../../static/vue-demo-hot_2.jpg)"
                }
            },
            new: {
                fir: {
                    author:"阿俊",
                    title:"Learn by doing",
                    time:"大約6小時(shí)之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                },
                sec: {
                    author:"阿貓",
                    title:"Learn by doing",
                    time:"大約6小時(shí)之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                },
                thi: {
                    author:"阿狗",
                    title:"Learn by doing",
                    time:"大約6小時(shí)之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                }
            },
            daily:{
                fir: {
                    author:"尸叔",
                    title:"如何讓你的自拍，驚爆朋友圈？看我是怎么設(shè)計(jì)的",
                    time:"大約2小時(shí)之前",
                    read:"3750",
                    comment:"70",
                    like:"190",
                    pay:"0",
                    src:"../../static/vue-demo-daily.jpg"                    
                },
                sec: {
                    author:"尸爸",
                    title:"如何讓你的自拍，驚爆朋友圈？看我是怎么設(shè)計(jì)的",
                    time:"大約2小時(shí)之前",
                    read:"3750",
                    comment:"70",
                    like:"190",
                    pay:"0",
                    src:"../../static/vue-demo-daily.jpg"
                },
                thi: {
                    author:"尸姐",
                    title:"如何讓你的自拍，驚爆朋友圈？看我是怎么設(shè)計(jì)的",
                    time:"大約2小時(shí)之前",
                    read:"3750",
                    comment:"70",
                    like:"190",
                    pay:"0",
                    src:"../../static/vue-demo-daily.jpg"
                }
            }
        }
        state.show = show
        state.articles = article[show]
    }
}
export default new Vuex.Store({
    state,
    mutations
})

getters獲取數(shù)據(jù)

這里面我采用的是模擬數(shù)據(jù)的方式（一個(gè)人沒有后臺(tái) QAQ），可以看到show來自于state,我們?cè)趆ome.vue頁面通過vuex的getters來獲取數(shù)據(jù)show，代碼如下：

import { displayArticle} from "../vuex/actions"
export default{
    vuex: {
        getters: {
            show: state => state.show
        },
        actions: {
            displayArticle
        }
    }
}

actions.js部分

在這里還引入一個(gè)action,它是做什么的呢？你答對(duì)了，這個(gè)displayArticle是用來分發(fā)事件的函數(shù)，它將更換文章區(qū)域內(nèi)容的事件dispatch出去，然后在store.js里面完成內(nèi)容的更換，下面是actions.js代碼：

export const displayArticle = ({ dispatch },show) => {
    dispatch("DISPLAY_ARTICLE",show)
}

是不是感覺vuex很簡單。中部導(dǎo)航欄我只給前三個(gè)弄了正確的點(diǎn)擊事件，如需體驗(yàn)更多效果，自己動(dòng)手，豐衣足食??！233
接下來是文章區(qū)域（棕色框部分）的代碼：

Article.vue

Article.vue和home.vue里獲取數(shù)據(jù)的方式一樣,由于未知文章數(shù)量，這里采用vue的列表渲染（是不是感覺很方便，有了vue,媽媽再也不用擔(dān)心我的學(xué)習(xí)啦）。簡書的首頁到這里就寫完成了，由于電腦越寫越卡，這篇就先發(fā)了，接下來開第二篇文章，簡書的專題頁面和推薦頁面，如果你發(fā)現(xiàn)本文章的錯(cuò)誤之除，還請(qǐng)您斧正。
參考文章：用 Vuex 構(gòu)建一個(gè)筆記應(yīng)用 Vue構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)

云服務(wù)器 GPU云服務(wù)器 vue-router Vue_Vuex 阿里云服務(wù)器搭建網(wǎng)站簡書 Vuex

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111543.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

warnerwu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow數(shù)據(jù)集下載

閱讀 3671·2023-04-26 02:07
海會(huì)主機(jī)是什么-主機(jī)和服務(wù)器的區(qū)別是什么？

閱讀 3178·2021-09-22 15:55
騰訊云服務(wù)器2020年6月促銷活動(dòng)整理,騰訊云最便宜的云服務(wù)器一網(wǎng)打盡

閱讀 2548·2021-07-26 23:38
CSS module 入門

閱讀 3128·2019-08-29 15:16
基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

閱讀 2019·2019-08-29 11:16
切圖崽的自我修養(yǎng)－梳理Jquery API

閱讀 1760·2019-08-29 11:00
局域網(wǎng) pm2 離線安裝

閱讀 3601·2019-08-26 18:36
單選多選場景的解決方案集合

閱讀 3172·2019-08-26 13:32

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于Vue,Vue-router,Vuex的簡書網(wǎng)站模仿

簡書

交流故事，溝通想法

{{ article.title }}

相關(guān)文章