資訊專欄INFORMATION COLUMN
摘要：簡(jiǎn)介是基于的一個(gè)應(yīng)用框架，采用服務(wù)端渲染，使你的應(yīng)用也可以擁有。調(diào)用及方法這兩個(gè)方法都會(huì)在組件加載之前被調(diào)用，它們的職責(zé)各有不同，用來(lái)異步的進(jìn)行組件數(shù)據(jù)的初始化工作，而方法偏重于異步獲取數(shù)據(jù)后修改中的狀態(tài)。
背景
由于面試總被問(wèn)到關(guān)于ssr的問(wèn)題，于是自己想搞一套服務(wù)端渲染。后來(lái)發(fā)現(xiàn)直接手動(dòng)配置會(huì)有很多坑，與前端的朋友交流，給我推薦了nuxt，下面將研究的初步了解記錄下來(lái)。
簡(jiǎn)介Nuxt是基于Vue的一個(gè)應(yīng)用框架，采用服務(wù)端渲染，使你的SPA應(yīng)用(Vue)也可以擁有SEO。
實(shí)踐1. 創(chuàng)建項(xiàng)目
$ npm install -g vue-cli $ vue init nuxt/starter$ cd $ npm install $ npm run dev
2. 項(xiàng)目目錄
|-- assets // 用于組織未編譯的靜態(tài)資源如LESS、SASS或JavaScript
|-- components // 用于自己編寫的Vue組件，比如波動(dòng)組件、日歷組件、分頁(yè)組件
|-- layouts // 布局目錄，用于組織應(yīng)用的布局組件，不可更改
|-- middleware // 用于存放中間件
|-- pages // 用于存放寫的頁(yè)面，我們主要的工作區(qū)域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放靜態(tài)資源文件，比如圖片
|-- store // 用于組織應(yīng)用的Vuex 狀態(tài)管理
|-- .editorconfig // 開(kāi)發(fā)工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用于組織Nuxt.js應(yīng)用的個(gè)性化配置，已覆蓋默認(rèn)配置
|-- package-lock.json // npm自動(dòng)生成，用于幫助package的統(tǒng)一設(shè)置的，yarn也有相同的操作
|-- package.json // npm 包管理配置文件
Nuxt.js 通過(guò)一系列構(gòu)建于 Vue.js 之上的方法進(jìn)行服務(wù)端渲染，具體流程如下:
調(diào)用 nuxtServerInit 方法
當(dāng)請(qǐng)求打入時(shí)，最先調(diào)用的即是 nuxtServerInit 方法，可以通過(guò)這個(gè)方法預(yù)先將服務(wù)器的數(shù)據(jù)保存，如已登錄的用戶信息等。另外，這個(gè)方法中也可以執(zhí)行異步操作，并等待數(shù)據(jù)解析后返回。
Middleware 層
經(jīng)過(guò)第一步后，請(qǐng)求會(huì)進(jìn)入 Middleware 層，在該層中有三步操作：
讀取 nuxt.config.js 中全局 middleware 字段的配置，并調(diào)用相應(yīng)的中間件方法 匹配并加載與請(qǐng)求相對(duì)應(yīng)的 layout 調(diào)用 layout 和 page 的中間件方法
調(diào)用 validate 方法
在這一步可以對(duì)請(qǐng)求參數(shù)進(jìn)行校驗(yàn)，或是對(duì)第一步中服務(wù)器下發(fā)的數(shù)據(jù)進(jìn)行校驗(yàn)，如果校驗(yàn)失敗，將拋出 404 頁(yè)面。
調(diào)用 fetch 及 asyncData 方法
這兩個(gè)方法都會(huì)在組件加載之前被調(diào)用，它們的職責(zé)各有不同， asyncData 用來(lái)異步的進(jìn)行組件數(shù)據(jù)的初始化工作，而 fetch 方法偏重于異步獲取數(shù)據(jù)后修改 Vuex 中的狀態(tài)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/102059.html
摘要：為了解決問(wèn)題，推出了服務(wù)端預(yù)渲染，以便提高對(duì)優(yōu)化。應(yīng)用，到了，單頁(yè)面應(yīng)用優(yōu)秀的用戶體驗(yàn)，逐漸成為了主流，頁(yè)面整體式渲染出來(lái)的，稱之為客戶端渲染?？蛻舳私邮諗?shù)據(jù)，然后完成最終渲染。通過(guò)對(duì)客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開(kāi)發(fā)一般都是前后端分離，mvvm和mvc的開(kāi)發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開(kāi)發(fā)，但是由于前...
摘要：一介紹隨著社區(qū)的框架的發(fā)布，社區(qū)也終于誕生了屬于自己的前后端同構(gòu)框架。本文主要研究的運(yùn)行原理，分析它從接收一條指令，到完成指令背后所發(fā)生的一系列事情。最后，通過(guò)來(lái)檢查輸出的是否存在問(wèn)題，然后發(fā)出通知，表明可用。 showImg(https://segmentfault.com/img/bVIc9l?w=536&h=136); 一、介紹 Nuxt.js - Universal Vue.j...
摘要：文件配置默認(rèn)共用中創(chuàng)建標(biāo)簽不對(duì)標(biāo)簽中內(nèi)容做轉(zhuǎn)義處理拓展配置添加配置頭部標(biāo)簽管理通過(guò)實(shí)現(xiàn)頭部標(biāo)簽管理，在中的配置。 一、為什么選擇Nuxt.js 多數(shù)是基于webpack構(gòu)建的項(xiàng)目，編譯出來(lái)的html文件，資源文件都被打包到j(luò)s中，以下圖404頁(yè)面代碼為例。從代碼中可以看出，這樣的頁(yè)面是不利于 搜索引擎優(yōu)化(SEO, Search Engine Optimization) ，并且 內(nèi)容到...
摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開(kāi)發(fā)實(shí)踐經(jīng)驗(yàn)相關(guān)字眼。我們主要從端公眾號(hào)移動(dòng)端小程序三大平臺(tái)進(jìn)行前端的技術(shù)選型，并來(lái)說(shuō)說(shuō)選其技術(shù)的幾大優(yōu)勢(shì)。技術(shù)的優(yōu)勢(shì)互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...
閱讀 3773·2021-11-11 10:58
閱讀 2566·2021-09-22 15:43
閱讀 2921·2019-08-30 15:44
閱讀 2297·2019-08-30 13:08
閱讀 1892·2019-08-29 17:28
閱讀 958·2019-08-29 10:54
閱讀 734·2019-08-26 11:46
閱讀 3559·2019-08-26 11:43
