詳解Vue基于 Nuxt.js 實(shí)現(xiàn)服務(wù)端渲染(SSR)
直接使用 Vue 構(gòu)建前端單頁(yè)面應(yīng)用,頁(yè)面源碼時(shí)只有簡(jiǎn)單的幾行 html,這并不利于網(wǎng)站的 SEO,這時(shí)候就需要服務(wù)端渲染
2016 年 10 月 25 日,zeit.co 背后的團(tuán)隊(duì)對(duì)外發(fā)布了一個(gè) React 的服務(wù)端渲染應(yīng)用框架 Next.js
幾小時(shí)后,一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架應(yīng)運(yùn)而生,與 Next.js 異曲同工,這就是Nuxt.js
一、快速模板
在已經(jīng)安裝了 vue-cli 的前提下,可以快速創(chuàng)建一個(gè) nuxt 的項(xiàng)目模板
vue init nuxt-community/starter-template MyProject
其中 MyProject 是項(xiàng)目文件夾名稱,可自定義
通過 npm install (似乎用 yarn install 更順利) 安裝依賴之后,可以直接 npm run dev 在 開發(fā)環(huán)境 啟動(dòng)項(xiàng)目
默認(rèn)啟動(dòng)的地址為 http://localhost:3000/,可以在 package.json 中添加以下配置來修改主機(jī)端口號(hào)
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "7788"
}
},
開發(fā)完成后執(zhí)行 npm run build 打包代碼,最后 npm start 啟動(dòng)服務(wù)
二、重要目錄
生成的 項(xiàng)目目錄 如下

大部分文件夾名稱 都是 nuxt 默認(rèn)保留的,不可修改
其中比價(jià)比較關(guān)鍵的目錄有三個(gè):
1. components 組件目錄

一般用來存放 非頁(yè)面級(jí)別 的組件,如 header、footer 等公共組件
該目錄下的組件具有常規(guī) vue 組件的方法和特性,不會(huì)被 nuxt.js 擴(kuò)展特性
2. layouts 布局目錄

可以修改該目錄下的 default.vue 來修改默認(rèn)布局
<template> <div> <my-header></my-header> <nuxt/> <my-footer></my-footer> </div> </template>
其中 <nuxt/> 是必需的,頁(yè)面的主體內(nèi)容會(huì)顯示在這里 (類似于根節(jié)點(diǎn)的 <router-view/>)
此外還可以在目錄下新增 error.vue 作為錯(cuò)誤頁(yè)面,具體的寫法可以參考官方文檔
3. pages 頁(yè)面目錄

用于存放頁(yè)面級(jí)別的組件,nuxt 會(huì)根據(jù)該目錄下的頁(yè)面結(jié)構(gòu)生成路由
比如上圖中的頁(yè)面結(jié)構(gòu),會(huì)生成這樣的路由配置:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'about',
path: '/about',
component: 'pages/about.vue'
},
{
name: 'classroom',
path: '/classroom',
component: 'pages/classroom.vue',
children: [
{
path: 'student',
component: 'pages/classroom/student.vue',
name: 'student'
},
{ //定義帶參數(shù)的動(dòng)態(tài)路由,需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue 文件或目錄
path: ':id',
component: 'pages/classroom/_id.vue',
name: 'classroom-id'
}
]
}
]
}
此外,該目錄下的 vue 組件還具備一些 Nuxt.js 提供的特殊功能特性
其中 asyncData 方法比較常用,支持異步數(shù)據(jù)處理
這個(gè)方法會(huì)在 頁(yè)面組件 每次加載之前被調(diào)用,然后獲取數(shù)據(jù)并返回給當(dāng)前組件
asyncData ({ params, error }) {
return axios.get(`api/posts/${params.id}`)
.then((res) => {
return { name: res.data.name}
})
.catch((e) => {
error({ statusCode: 404, message: 'not found' })
})
}
asyncData 方法的第一個(gè)參數(shù)為上下文對(duì)象 context,具體屬性可以 查看這里
由于asyncData方法是在組件初始化前被調(diào)用的,所以在方法內(nèi)是沒有辦法通過 this 來引用組件的實(shí)例對(duì)象
三、使用插件
如果項(xiàng)目中還需要引入其他的第三方插件,可以直接在頁(yè)面中引入,這樣在打包的時(shí)候,會(huì)將插件打包到頁(yè)面對(duì)應(yīng)的 js 里面
但要是別的頁(yè)面也引入了同樣的插件,就會(huì)重復(fù)打包。如果沒有需要分頁(yè)打包的需求,這時(shí)候可以配置 plugins
以 element-ui 為例,在安裝了 element-ui 之后,在 plugins 目錄下創(chuàng)建 elementUI.js

然后在根目錄的 nuxt.config.js 中添加配置項(xiàng) build.vendor 和 plugins
build: {
vendor: ['~/plugins/elementUI.js']
},
plugins: [
{src: '~/plugins/elementUI.js'},
]
這里的 plugins 屬性用來配置 vue.js 插件,也就是 可以用 Vue.user() 方法 的插件
默認(rèn)只需要 src 屬性,另外還可以配置 ssr: false,讓該文件只在客戶端被打包引入
如果是像 axios 這種第三方 (不能 use) 插件,只需要在 plugins 目錄下創(chuàng)建 axios.js
// axios.js
import Vue from 'vue'
import axios from 'axios'
const service = axios.create({
baseURL: '/api'
})
Vue.prototype.$ajax = axios
export default service
然后在 build.vendor 中添加配置 (不需要配置 plugins)
build: {
vendor: ['~/plugins/axios.js']
}
這樣在打包的時(shí)候,就會(huì)把 axios 打包到 vendor.js 中
四、Vuex 狀態(tài)樹
如果在 store 目錄下創(chuàng)建了 index.js,nuxt.js 會(huì)根據(jù)該目錄下的文件創(chuàng)建 Vuex 狀態(tài)樹
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from '~/plugins/axios.js';
Vue.use(Vuex)
const store = () => new Vuex.Store({
state: {
author: 'WiseWrong',
info: ''
},
mutations: {
setInfo (state, val) {
state.info = val
}
},
actions: {
loadAboutMeInfo ({commit, state}) {
return Axios.get(`/about`)
.then(res => {
console.log('ajax is success')
console.log(res.data.info)
commit('setInfo', res.data.info)
})
.catch(err => {
console.log('error')
})
}
}
})
export default store
Nuxt.js 內(nèi)置引用了 vuex 模塊,不需要額外安裝
上面的代碼中,我在 actions 中寫了一個(gè) loadAboutMeInfo() 方法,用來請(qǐng)求 /api/about 接口
然后在 about.vue 頁(yè)面中調(diào)用
// about.vue
<template>
<section class="container">
<div>
<img src="~/assets/about.png" alt="">
</div>
<h1>{{$store.state.info}}</h1>
</section>
</template>
<script>
export default {
fetch({ store }) {
return store.dispatch('loadAboutMeInfo')
},
name: 'about',
data () {
return {}
}
}
</script>
成果演示:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問題解決方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn),需要的朋友可以學(xué)習(xí)下。2018-04-04
vue基礎(chǔ)ESLint?Prettier配置教程詳解
這篇文章主要介紹了vue基礎(chǔ)ESLint?Prettier配置教程詳解,本文使用VsCode?+?Vue?+?ESLint?+?Prettier?實(shí)現(xiàn)代碼格式規(guī)范?+?保存自動(dòng)修復(fù)代碼js+vue2022-07-07
vue3項(xiàng)目中的el-carousel 輪播圖的使用
Carousel(走馬燈)是一種常見的前端組件,通常用于展示多個(gè)項(xiàng)目(通常是圖片或內(nèi)容塊)的輪播效果,這篇文章主要介紹了vue3項(xiàng)目中的el-carousel 輪播圖的使用,需要的朋友可以參考下2024-02-02
開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟)
這篇文章主要介紹了開發(fā)一個(gè)Parcel-vue腳手架工具(詳細(xì)步驟),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09

