成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

nuxt 簡單介紹

svtter / 3475人閱讀

摘要：簡介是基于的一個應(yīng)用框架，采用服務(wù)端渲染，使你的應(yīng)用也可以擁有。調(diào)用及方法這兩個方法都會在組件加載之前被調(diào)用，它們的職責(zé)各有不同，用來異步的進行組件數(shù)據(jù)的初始化工作，而方法偏重于異步獲取數(shù)據(jù)后修改中的狀態(tài)。

背景

由于面試總被問到關(guān)于ssr的問題，于是自己想搞一套服務(wù)端渲染。后來發(fā)現(xiàn)直接手動配置會有很多坑，與前端的朋友交流，給我推薦了nuxt，下面將研究的初步了解記錄下來。

簡介

Nuxt是基于Vue的一個應(yīng)用框架，采用服務(wù)端渲染，使你的SPA應(yīng)用(Vue)也可以擁有SEO。

實踐

1. 創(chuàng)建項目

$ npm install -g vue-cli

$ vue init nuxt/starter 
$ cd 
$ npm install

$ npm run dev

2. 項目目錄
|-- assets // 用于組織未編譯的靜態(tài)資源如LESS、SASS或JavaScript
|-- components // 用于自己編寫的Vue組件，比如波動組件、日歷組件、分頁組件
|-- layouts // 布局目錄，用于組織應(yīng)用的布局組件，不可更改
|-- middleware // 用于存放中間件
|-- pages // 用于存放寫的頁面，我們主要的工作區(qū)域
|-- plugins // 用于存放JavaScript插件的地方
|-- static // 用于存放靜態(tài)資源文件，比如圖片
|-- store // 用于組織應(yīng)用的Vuex 狀態(tài)管理
|-- .editorconfig // 開發(fā)工具格式配置
|-- .eslintrc.js // ESLint的配置文件，用于檢查代碼格式
|-- .gitignore // 配置git不上傳的文件
|-- nuxt.config.json // 用于組織Nuxt.js應(yīng)用的個性化配置，已覆蓋默認配置
|-- package-lock.json // npm自動生成，用于幫助package的統(tǒng)一設(shè)置的，yarn也有相同的操作
|-- package.json // npm 包管理配置文件

原理

Nuxt.js 通過一系列構(gòu)建于 Vue.js 之上的方法進行服務(wù)端渲染，具體流程如下:

調(diào)用 nuxtServerInit 方法

當(dāng)請求打入時，最先調(diào)用的即是 nuxtServerInit 方法，可以通過這個方法預(yù)先將服務(wù)器的數(shù)據(jù)保存，如已登錄的用戶信息等。另外，這個方法中也可以執(zhí)行異步操作，并等待數(shù)據(jù)解析后返回。

Middleware 層

經(jīng)過第一步后，請求會進入 Middleware 層，在該層中有三步操作：

讀取 nuxt.config.js 中全局 middleware 字段的配置，并調(diào)用相應(yīng)的中間件方法 匹配并加載與請求相對應(yīng)的 layout 調(diào)用 layout 和 page 的中間件方法

調(diào)用 validate 方法

在這一步可以對請求參數(shù)進行校驗，或是對第一步中服務(wù)器下發(fā)的數(shù)據(jù)進行校驗，如果校驗失敗，將拋出 404 頁面。

調(diào)用 fetch 及 asyncData 方法

這兩個方法都會在組件加載之前被調(diào)用，它們的職責(zé)各有不同， asyncData 用來異步的進行組件數(shù)據(jù)的初始化工作，而 fetch 方法偏重于異步獲取數(shù)據(jù)后修改 Vuex 中的狀態(tài)。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102059.html

相關(guān)文章

  • 服務(wù)端預(yù)渲染之Nuxt（介紹篇）

    摘要：為了解決問題，推出了服務(wù)端預(yù)渲染，以便提高對優(yōu)化。應(yīng)用，到了，單頁面應(yīng)用優(yōu)秀的用戶體驗，逐漸成為了主流，頁面整體式渲染出來的，稱之為客戶端渲染?？蛻舳私邮諗?shù)據(jù)，然后完成最終渲染。通過對客戶端服務(wù)端基礎(chǔ)框架的抽象組織，主要關(guān)注的是應(yīng)用的渲染。 現(xiàn)在前端開發(fā)一般都是前后端分離，mvvm和mvc的開發(fā)框架，如Angular、React和Vue等，雖然寫框架能夠使我們快速的完成開發(fā)，但是由于前...

    Shonim 評論0 收藏0

  • 深入NUXT，看看一條命令行的背后到底發(fā)生了什么

    摘要：一介紹隨著社區(qū)的框架的發(fā)布，社區(qū)也終于誕生了屬于自己的前后端同構(gòu)框架。本文主要研究的運行原理，分析它從接收一條指令，到完成指令背后所發(fā)生的一系列事情。最后，通過來檢查輸出的是否存在問題，然后發(fā)出通知，表明可用。 showImg(https://segmentfault.com/img/bVIc9l?w=536&h=136); 一、介紹 Nuxt.js - Universal Vue.j...

    opengps 評論0 收藏0

  • Nuxt.js實戰(zhàn)

    摘要：文件配置默認共用中創(chuàng)建標簽不對標簽中內(nèi)容做轉(zhuǎn)義處理拓展配置添加配置頭部標簽管理通過實現(xiàn)頭部標簽管理，在中的配置。 一、為什么選擇Nuxt.js 多數(shù)是基于webpack構(gòu)建的項目，編譯出來的html文件，資源文件都被打包到j(luò)s中，以下圖404頁面代碼為例。從代碼中可以看出，這樣的頁面是不利于 搜索引擎優(yōu)化(SEO, Search Engine Optimization) ，并且 內(nèi)容到...

    JinB 評論0 收藏0

  • 珠峰前端架構(gòu)師培養(yǎng)計劃

    摘要：公司的招聘要求都提到了至少熟悉其中一種前端框架，有前端工程化與模塊化開發(fā)實踐經(jīng)驗相關(guān)字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術(shù)選型，并來說說選其技術(shù)的幾大優(yōu)勢。技術(shù)的優(yōu)勢互聯(lián)網(wǎng)前端大潮后，前端出現(xiàn)了大框架，分別是與。 1、技術(shù)選型的背景前端技術(shù)發(fā)展日新月異，互聯(lián)網(wǎng)上出現(xiàn)的新型框架也比較多，如何讓新招聘的人員...

    ccj659 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<