內(nèi)容

1. 繪制了主頁的基本布局
2. 設(shè)置了封裝了header欄組件并設(shè)置了全局黑夜模式.

選擇一個組件庫-Naive UI

如果沒有設(shè)計能力，又想開發(fā)出風(fēng)格統(tǒng)一的前端頁面。就一定要選擇一個漂亮的組件庫。
本次項目選擇使用Naive UI，NaivUI庫曾被Vue框架作者尤雨溪推薦，庫作者松若章的設(shè)計和風(fēng)格，我也非常喜歡。

規(guī)劃布局

一個好看的主頁是什么樣的呢？
給大家列舉一下我參考的部分網(wǎng)站主頁
Naive UI
Vue.js 漸進式JavaScript 框架
React 用于構(gòu)建用戶界面的 JavaScript 庫
Insgram
Scott Hanselman

大牛的網(wǎng)站主頁往往很簡單甚至粗糙，但許多庫的官網(wǎng)都很漂亮。兩者有一個相同點，就是簡單統(tǒng)一的風(fēng)格給人以大氣干凈的高級感。。
索性我們就參考vue3項目創(chuàng)建的初始布局，利用nativeUI來編寫主頁。

抽象來看就是這樣。但要注意的是Content的內(nèi)容應(yīng)該由vue router控制。并且添加NConfigProvider來提供黑夜模式，細(xì)節(jié)詳細(xì)見代碼。

編寫代碼

App.vue

選用Native UI中的Layout組件幫助布局

//App.vue
<script setup>
//導(dǎo)入vue-Router組件
import { RouterView } from 'vue-router'
//導(dǎo)入NLayout組件
import {NConfigProvider,NLayoutHeader,NLayoutContent,} from 'naive-ui'

App.vue

<template><n-config-provider ><n-layout style="min-height:100vh;"><n-layout-header bordered="true"></n-layout-header><n-layout-content >    <RouterView /></n-layout-content></n-layout></n-config-provider>
</template>

此時路由指向的是HomeView，所以讓我繼續(xù)修改HomeView

HomeView.vue

<script setup>import {NSpace,} from 'naive-ui'import ContentLeft from './homeview/ContentLeft.vue';import ContentRight from './homeview/ContentRight.vue';</script>

<template><n-space style="height: 100%;" justify="center" size="large"align="center"><content-left/><content-right/></n-space>
</template>

依照導(dǎo)入路徑創(chuàng)建ContentLeft.vue與ContentRight.vue文件。

ContentLeft.vue 和 ContentRight.vue

關(guān)于ContentLeft.vue和ContentRight.vue 參考vue 初識頁面，作如下設(shè)計

ContentLeft.vue

<script setup>import {NSpace,NGradientText,} from 'naive-ui'import {ref} from 'vue'
import router from '../../router';let quote = ref(null)quote.value = ["君子終日乾乾","夕惕若，厲，無咎"]function jumpToBlogs(){router.push("/articles")}
</script>

<template><n-space verticalstyle="height: 100%;"align="center"justify="center" ><n-gradient-text v-for="line in quote"type="danger" style="font-size: 2.3rem;">{{ line }}</n-gradient-text><n-button type="primary" @click="jumpToBlogs">開始閱讀</n-button></n-space>
</template>

ContentRight.vue

<script setup>import {NTimeline,NTimelineItem,} from 'naive-ui'import {ref} from 'vue'const last_blogs = ref(null);last_blogs.value = [{title:"Linus Torvalds 怒懟：不要提交沒有注釋的請求",content:"Linux 6.3 合并窗口期已經(jīng)于近日開啟，Linus Torvalds 收到了大量的 pull request（PR）請求，總體來看，本次窗口期的各項工作開展順利.",time:"2023-02-23 09:30:54",},{title:"titletses",content:"哪里成功",time:"2018-04-03 20:46"},{title:"成功",content:"哪里成功",time:"2018-04-03 20:46"},]
</script>

<template><n-timeline><n-timeline-itemv-for="blog in last_blogs"type="success":title=blog.title:content=blog.content:time=blog.timestyle="max-width: 50vw;"/></n-timeline>
</template>

Top.vue與黑夜模式

封裝一下Top.vue以實現(xiàn)黑夜模式。

<script setup>import {NSpace,NSwitch} from 'naive-ui'const props = defineProps(['active'])const emit = defineEmits(['update:active'])const active = computed({get(){return props.active;},set(active){emit('update:active', active) }})</script>

Props即傳入的參數(shù)，emit即當(dāng)改變發(fā)生時，提交給父組件。這樣就完成了父子組件的雙向綁定聲明。
最后設(shè)置參數(shù)active的get()參數(shù)獲取porps中active的值，set()方法設(shè)定返回給父組件的確切值即可。

<template><n-space style="width: 100%;margin-inline: 2vw;"justify="space-between"align="center"><div style="font-weight:700;">Blog</div><n-switch v-model:value="active" size="large"></n-switch></n-space>
</template>

使用Top.vue
App.vue

import Top from './views/homeview/Top.vue';
import {ref,computed} from 'vue'
import {darkTheme,NLayout,NLayoutHeader,NLayoutContent,NConfigProvider} from 'naive-ui'
let active = ref(false)
const theme = computed(()=>{return active.value? darkTheme:null;
})

<template><n-config-provider :theme="theme" style="min-height:100vh;"><n-layout style="min-height:100vh;"><n-layout-header class="top flex-row-box"bordered="true"><top v-model:active="active"></top></n-layout-header>......

最終效果：