最近我在學習前端開發，學習了Vue這一框架，并且嘗試使用Vue搭建一個小說閱讀網站。這個小說項目主要用到了Vue的組件化和路由功能。

首先，我采用了Vue CLI來搭建項目，這是一個Vue的腳手架工具，可以快速創建一個Vue項目。在創建項目時，我選擇了Vue Router和Vuex這兩個插件，它們分別實現了前端路由和狀態管理。

vue create novel-project
cd novel-project
vue add router
vue add vuex

接著，我創建了幾個Vue組件：書架、分類、搜索、閱讀等等，每個組件都有自己的模板、樣式和邏輯。這樣，每個組件就可以獨立開發、測試和維護。例如，閱讀組件里有一個解析章節內容的函數：

export default {
props: ['chapter'],
data() {
return {
content: ''
}
},
async created() {
this.content = await this.fetchChapter(this.chapter.id)
},
methods: {
async fetchChapter(id) {
const res = await axios.get(`/api/chapters/${id}`)
return res.data.content
},
parseContent(content) {
// parse content here...
}
}
}

我使用了Axios來發起HTTP請求，獲取后端API返回的數據。然后，在created鉤子函數里異步調用fetchChapter函數，將章節內容賦值給content變量。接著，閱讀組件會渲染出章節內容，并調用parseContent函數解析章節內容。

為了實現前后端分離，我使用了Vue的Axios插件，可以全局配置Axios的baseURL、timeout和headers等選項：

import axios from 'axios'
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 5000
axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')

這樣，每個組件里都可以直接使用this.$axios發起請求，不需要再手動引入和配置Axios。

最后，我使用Vue Router來實現前端路由。在router/index.js文件里定義路由，每個路由對應一個組件：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Category from '../views/Category.vue'
import Search from '../views/Search.vue'
import Reader from '../views/Reader.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/category',
name: 'Category',
component: Category
},
{
path: '/search',
name: 'Search',
component: Search
},
{
path: '/reader/:book/:chapter',
name: 'Reader',
component: Reader
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

在組件中使用$router.push(path)方法可以跳轉到指定的路由。

綜上所述，我使用Vue搭建了一個小說閱讀網站，并使用了Vue Router和Vuex實現了路由和狀態管理。此外，我還用到了Axios插件來發送HTTP請求，并創建了多個Vue組件，實現了組件化和復用性。Vue框架的高效性和靈活性確實讓我深感驚喜。