詳解基于vue的服務(wù)端渲染框架NUXT

Nuxt

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比遼陽(yáng)網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式遼陽(yáng)網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋遼陽(yáng)地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

隨著現(xiàn)在vue和react的流行，許多網(wǎng)站都做成了SPA，確實(shí)提升了用戶體驗(yàn)，但SPA也有兩個(gè)弱點(diǎn)，就是SEO和首屏渲染速度。為了解決單頁(yè)應(yīng)用的痛點(diǎn)，基于vue和react的服務(wù)端渲染應(yīng)運(yùn)而生。由于公司的框架采用的是vue，所以就簡(jiǎn)單的研究了一下基于vue的服務(wù)端渲染框架——NUXT。在vue的官網(wǎng)有關(guān)于服務(wù)端渲染的詳細(xì)介紹，而NUXT集成了利用Vue開(kāi)發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置，也集成了Vue2、vue-router、vuex、vux-meta（管理頁(yè)面meta信息的），利用官方的腳手架，基本上是傻瓜式操作，不用寫(xiě)路由配置，不用寫(xiě)webpcak配置就可以跑起來(lái)一個(gè)基于服務(wù)端渲染的SPA。

Nuxt特性

NUXT的特性包括：

1. 基于 Vue.js
2. 自動(dòng)代碼分層
3. 服務(wù)端渲染
4. 強(qiáng)大的路由功能，支持異步數(shù)據(jù)
5. 靜態(tài)文件服務(wù)
6. ES6/ES7 語(yǔ)法支持
7. 打包和壓縮 JS 和 CSS
8. HTML頭部標(biāo)簽管理
9. 本地開(kāi)發(fā)支持熱加載
10. 集成ESLint
11. 列表項(xiàng)目
12. 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等

Nuxt目錄結(jié)構(gòu)

通過(guò)vue init nuxt-community/starter-template <project-name>生成的文件目錄結(jié)構(gòu)如下：

其中有一些目錄（layouts、pages、static、store、nuxt.config.js、package.json）是Nuxt保留的，不可以更改，需要注意一下。

Nuxt路由

Nuxt中的一大特點(diǎn)就是路由無(wú)需手動(dòng)配置，會(huì)根據(jù)pages下的文件路徑自動(dòng)生成一套路由。如果路由中需要帶參數(shù)，只需將pages下的文件已下劃線_作為前綴即可。例如pages下的目錄結(jié)構(gòu)如下：

pages/
--| user/
-----| index.vue
-----| one.vue
-----| _id.vue
--| index.vue

Nuxt自動(dòng)生成的路由配置為：

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'user',
   path: '/user',
   component: 'pages/user/index.vue'
  },
  {
   name: 'user-one',
   path: '/user/one',
   component: 'pages/user/one.vue'
  },
  {
   name: 'users-id',
   path: '/users/:id?',
   component: 'pages/users/_id.vue'
  },
 ]
}

而在vue文件中可以針對(duì)路由的參數(shù)進(jìn)行校驗(yàn)，例如在pages/users/_id.vue文件中

export default {
 validate ({ params }) {
  // Must be a number
  return /^\d+$/.test(params.id)
 }
}

如果校驗(yàn)方法返回的值不為 true， Nuxt 將自動(dòng)加載顯示 404 錯(cuò)誤頁(yè)面。而這個(gè)錯(cuò)誤頁(yè)面需要寫(xiě)在指定的位置，也就是layout中error頁(yè)面。接下來(lái)就來(lái)介紹有關(guān)視圖相關(guān)的東西。

Nuxt視圖

可以在layouts目錄下創(chuàng)建自定義的布局，可以通過(guò)更改 layouts/default.vue 文件來(lái)擴(kuò)展應(yīng)用的默認(rèn)布局。需要在布局文件中添加 <nuxt/> 組件用于顯示頁(yè)面的主體內(nèi)容，感覺(jué)跟vue中的slot方法類(lèi)似。例如在默認(rèn)布局中增加header和footer，這樣每個(gè)頁(yè)面都會(huì)加上header和footer。

<template>
 <div>
  <header>VUE SRR DEMO</header>
  <nuxt/>
  <footer>COPYRIGHT LXY</footer>
 </div>
</template>

而上面說(shuō)到的error頁(yè)面，可以通過(guò)在layouts下增加error.vue文件來(lái)修改默認(rèn)的錯(cuò)誤頁(yè)面。該頁(yè)面可以接受一個(gè)error參數(shù)。

<template>
 <div class="container">
  <h2 v-if="error.statusCode === 404">頁(yè)面不存在</h2>
  <h2 v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h2>
  <p class="goback">
   <nuxt-link to="/">返回首頁(yè)</nuxt-link>
  </p>
 </div>
</template>

<script>
export default {
 props: ['error'],
 layout: 'self-aside'
}
</script>

也可以給某個(gè)頁(yè)面指定特定的模板，做到個(gè)性化布局。例如在上面的error頁(yè)面中，我指定了一個(gè)self-aside的模板

以上所說(shuō)的都是有關(guān)布局和路由相關(guān)的東西，而還沒(méi)有講到有關(guān)服務(wù)端渲染的知識(shí)，究竟 Nuxt 是如何做到SSR的呢，關(guān)鍵人物要出場(chǎng)了。

Nuxt asyncData 方法

Nuxt 擴(kuò)展了 Vue.js，增加了一個(gè)叫 asyncData 的方法，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。這個(gè)函數(shù)可了不得了，有了它，我們可以先從服務(wù)員拿到數(shù)據(jù)，在服務(wù)端解析好，拼成HTML字符串，返回給瀏覽器。

asyncData方法會(huì)在組件每次加載之前被調(diào)用，它可以在服務(wù)端或路由更新之前被調(diào)用。 可以利用 asyncData方法來(lái)獲取數(shù)據(jù)，Nuxt 會(huì)將 asyncData 返回的數(shù)據(jù)融合組件 data 方法返回的數(shù)據(jù)一并返回給當(dāng)前組件。這個(gè)方法只能用在頁(yè)面組件中，在componets下在公共組件是不能調(diào)用該方法的，Nuxt 不會(huì)擴(kuò)展增強(qiáng)該目錄下 Vue 組件。

因?yàn)?asyncData 方法是在組件 初始化 前被調(diào)用的，所以在方法內(nèi)是沒(méi)有辦法通過(guò) this 來(lái)引用組件的實(shí)例對(duì)象。

async asyncData ({ params, error }) {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/users')
  return { 
   users: data.slice(0,5)
  }
 },

上面demo中asyncData返回的數(shù)據(jù)賦值給了users，這樣我就可以在頁(yè)面中像使用data里的數(shù)據(jù)一樣去使用users，例如我在template下循環(huán)出users

<ul>
  <li v-for="item in users" :key="item.name">{{item.name}}</li>
 </ul>

我現(xiàn)在去查看源代碼，發(fā)現(xiàn)頁(yè)面中l(wèi)i中的數(shù)據(jù)已經(jīng)渲染過(guò)來(lái)了，也就是達(dá)到了服務(wù)端渲染。

附一張Nuxt渲染的流程圖：

總結(jié)

整體感覺(jué)Nuxt還是很好上手的，利用腳手架，看看官方文檔，寫(xiě)寫(xiě)demo，大致就能了解整個(gè)流程。但其中的具體實(shí)現(xiàn)細(xì)節(jié)，還需要去認(rèn)真看看 https://ssr.vuejs.org/zh/

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

名稱欄目：詳解基于vue的服務(wù)端渲染框架NUXT
當(dāng)前鏈接：http://bm7419.com/article22/gipijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、云服務(wù)器、外貿(mào)建站、網(wǎng)站導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、軟件開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)