国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于Vue,Vue-router,Vuex的簡書網站模仿

shiyang6017 / 2696人閱讀

摘要:本文假設讀者手里有關于和的文檔,并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹,可以配合本文進行學習。關鍵就是在中部導航欄熱門,新上榜那塊,棕色框內的內容會根據中部導航欄選中不同內容進行改變。

在這個教程里面,我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔,并且對Vue-router和Vuex有一定的了解。
沒有文檔也沒關系,我這里有關于 Vue-router文檔以及Vuex介紹,可以配合本文進行學習。由于才開始學習Vue,如有不當
之處,還請大家幫我斧正!!

首先看下這個網站的截圖

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

搭建項目 項目結構

本項目才用Vue-cli腳手架自動生成,這是一個Vue生態系統中一個偉大創舉。這意味著我們不需要手動構建我們的項目,而它就可以很快地為我們生成。如圖所示:

components:包含所有的頁面組件

vuex:包含vuex相關文件(action.js, store.js)

static:靜態文件存放(圖片和圖標庫等)

index.html:渲染的頁面

main.js:應用入口點,包含根實例

App.vue:主頁面組件

項目流程:

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

npm i -g vue-cli

創建一個webpack項目,并且下載依賴

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

安裝Vue-router和Vuex

npm install vue-router vuex --save

熱加載打開頁面(生產的時候運行npm run build)

npm run dev

項目的框架已經搭建好了,接下來就是為項目添磚加瓦。

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

首先分析頁面結構(專題頁面結構和首頁一樣,就不在多帶帶贅述了,寫到哪兒分析到哪兒)

App.vue: 綠色框內的和黃色框內的就是每個頁面都存在的,故寫在App.vue里

home.vue: 紫色區域部分,由于文章區內文章會進行變化,故把文章區域多帶帶寫成組件

Article.vue: 棕色框部分

main.js部分

在main.js中我們引入Vue,App,Vue-router,并且創建了一個Vue的實例(因為在router這行引入了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"

//注冊VueRouter這個插件
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
    }
})
//路由重定向(訪問不存在的頁面時,重定向到這個頁面)
router.redirect({
    "*":"/home/article"
})

router.start(App,"app")//啟動一個啟用了路由的應用。創建一個 App 的實例并且掛載到元素 "app"
router.go("/home/article")//為了讓頁面打開的時候能看見文章,我把它導航到新路由
App.vue部分

App.vue里面我們把兩個側邊欄(綠色框和黃色框)寫在這里邊,因為這兩個總是一直存在的

添磚加瓦第二步(home.vue和article.vue) home.vue部分

先講home.vue,home.vue里面要放紫色框內(除了棕色框)的內容,分析這個界面紫色框內的左側邊欄是不變的,故可以寫死,頂部導航也是不變的,也寫死。關鍵就是在中部導航欄(熱門,新上榜那塊),棕色框內的內容會根據中部導航欄選中不同內容進行改變。那么該怎么實現這個呢?

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

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

store.js部分
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

const state = {
    articles:{
        fir: {
            author:"徐丹妮",
            title:"我不是學霸,只是比你努力一點而已",
            time:"大約6小時之前",
            read:"8498",
            comment:"248",
            like:"2342",
            pay:"2",
            src:"url(../../static/vue-demo-hot.jpg)"
        },
        sec: {
            author:"共央君",
            title:"愛美的女生們,六款超高性價比的變美神器你都有了嗎?",
            time:"大約8小時之前",
            read:"2623",
            comment:"34",
            like:"191",
            pay:"2",
            src:"url(../../static/vue-demo-hot_1.jpg)"
        },
        thi: {
            author:"姜肥東",
            title:"畢業9年,我才學懂的道理",
            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:"我不是學霸,只是比你努力一點而已",
                    time:"大約6小時之前",
                    read:"8498",
                    comment:"248",
                    like:"2342",
                    pay:"2",
                    src:"url(../../static/vue-demo-hot.jpg)"
                },
                sec: {
                    author:"共央君",
                    title:"愛美的女生們,六款超高性價比的變美神器你都有了嗎?",
                    time:"大約8小時之前",
                    read:"2623",
                    comment:"34",
                    like:"191",
                    pay:"2",
                    src:"url(../../static/vue-demo-hot_1.jpg)"
                },
                thi: {
                    author:"姜肥東",
                    title:"畢業9年,我才學懂的道理",
                    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小時之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                },
                sec: {
                    author:"阿貓",
                    title:"Learn by doing",
                    time:"大約6小時之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                },
                thi: {
                    author:"阿狗",
                    title:"Learn by doing",
                    time:"大約6小時之前",
                    read:"3398",
                    comment:"258",
                    like:"232",
                    pay:"88",
                    src:"url(../../static/vue-demo-new.jpg)"    
                }
            },
            daily:{
                fir: {
                    author:"尸叔",
                    title:"如何讓你的自拍,驚爆朋友圈?看我是怎么設計的",
                    time:"大約2小時之前",
                    read:"3750",
                    comment:"70",
                    like:"190",
                    pay:"0",
                    src:"../../static/vue-demo-daily.jpg"                    
                },
                sec: {
                    author:"尸爸",
                    title:"如何讓你的自拍,驚爆朋友圈?看我是怎么設計的",
                    time:"大約2小時之前",
                    read:"3750",
                    comment:"70",
                    like:"190",
                    pay:"0",
                    src:"../../static/vue-demo-daily.jpg"
                },
                thi: {
                    author:"尸姐",
                    title:"如何讓你的自拍,驚爆朋友圈?看我是怎么設計的",
                    time:"大約2小時之前",
                    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獲取數據

這里面我采用的是模擬數據的方式(一個人沒有后臺 QAQ),可以看到show來自于state,我們在home.vue頁面通過vuex的getters來獲取數據show,代碼如下:

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

在這里還引入一個action,它是做什么的呢?你答對了,這個displayArticle是用來分發事件的函數,它將更換文章區域內容的事件dispatch出去,然后在store.js里面完成內容的更換,下面是actions.js代碼:

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

是不是感覺vuex很簡單。中部導航欄我只給前三個弄了正確的點擊事件,如需體驗更多效果,自己動手,豐衣足食!!233
接下來是文章區域(棕色框部分)的代碼:

Article.vue

Article.vue和home.vue里獲取數據的方式一樣,由于未知文章數量,這里采用vue的列表渲染(是不是感覺很方便,有了vue,媽媽再也不用擔心我的學習啦)。簡書的首頁到這里就寫完成了,由于電腦越寫越卡,這篇就先發了,接下來開第二篇文章,簡書的專題頁面和推薦頁面,如果你發現本文章的錯誤之除,還請您斧正。
參考文章:用 Vuex 構建一個筆記應用 Vue構建單頁應用最佳實戰

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50064.html

相關文章

  • 基于Vue,Vue-router,Vuex簡書網站模仿(三)

    摘要:基于的簡書網站模仿二基于的簡書網站模仿一登陸界面由于比較簡單,就不畫輔助線了,可以看到登錄組件部分有兩個功能,登錄和注冊,需要根據用戶的點擊來切換頁面內容。 接著上兩篇文章繼續講,附上上兩篇的地址,沒看過的同學可以去看看。今天主要講解一下登錄組件部分和下載部分,也是最簡單部分,今天講完之后,作者需要潛心修煉一下后端,爭取能做到和數據庫進行交互,到時候再來接著寫。 基于Vue,Vue-...

    Jrain 評論0 收藏0
  • 基于Vue,Vue-router,Vuex簡書網站模仿

    摘要:本文假設讀者手里有關于和的文檔,并且對和有一定的了解。沒有文檔也沒關系我這里有關于文檔以及介紹,可以配合本文進行學習。關鍵就是在中部導航欄熱門,新上榜那塊,棕色框內的內容會根據中部導航欄選中不同內容進行改變。 在這個教程里面,我會通過一系列的代碼和圖片來學習怎么使用vue-router,以及vuex。本文假設讀者手里有關于vue-router和Vuex的文檔,并且對Vue-router...

    warnerwu 評論0 收藏0
  • 基于Vue,Vue-router,Vuex簡書網站模仿(二)

    摘要:通過點擊事件來更換不同的值和文章內容。文章排版整潔,注意詩游戲玩轉簡書的第一步,從這個專題開始。專題主編蘇錦年投稿須知本專題收錄古詩詞現代詩以及詩詞點評及指導。內容必須為原創,切勿用其他詩人的詩句。 接著上一篇我們接著講,關于這個網站的專題頁面和2015精選頁面,如果有小伙伴沒看過上一篇文章,這里附上上一篇文章的的鏈接基于Vue,Vue-router,Vuex的簡書網站模仿這里是網站的...

    yibinnn 評論0 收藏0
  • ?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

    vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用,適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個項目的初衷其實很簡單,我司之前一直用angular、react進行PC端項目的開發,但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

    learning 評論0 收藏0
  • ?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

    vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用,適合于vue2、vuex、vue-router核心概念的理解與掌握。 前言 做這個項目的初衷其實很簡單,我司之前一直用angular、react進行PC端項目的開發,但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

    galois 評論0 收藏0

發表評論

0條評論

shiyang6017

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<