一、簡(jiǎn)介
像vue之類的框架都提供了一種動(dòng)態(tài)改變頁(yè)面的內(nèi)容，無(wú)需每次向服務(wù)端發(fā)送請(qǐng)求。當(dāng)開(kāi)始加載網(wǎng)站時(shí)，瀏覽器收到一堆用來(lái)構(gòu)建頁(yè)面的代碼片段（html、css和其他文件）和如何將這些代碼片段組裝起來(lái)的指令。在瀏覽器真正顯示頁(yè)面之前，需要花費(fèi)時(shí)間將這些信息拼裝起來(lái)。那么如果在服務(wù)端放一個(gè)能構(gòu)建出隨時(shí)顯示的頁(yè)面的框架，然后將這個(gè)完整頁(yè)面發(fā)送給瀏覽器是一種什么體驗(yàn)?zāi)兀慷鴑uxt.js就是這么一個(gè)服務(wù)端渲染的框架。
Vue 官網(wǎng)對(duì)于Nuxt.js也是很推薦的，除此之外，Nuxt.js的開(kāi)發(fā)者積極活躍，版本迭代迅速。于2018年1月9日發(fā)布了v1.0.0正式版本。
二、SSR模型建立
Nuxt.js 是一個(gè)基于vue.js的通用應(yīng)用框架，主要通過(guò)vue-server-renderer模塊來(lái)實(shí)現(xiàn)服務(wù)端渲染。
1. npm? install vue vue-server-renderer --save-dev
2.新建項(xiàng)目結(jié)構(gòu)如下：
3.在server.js文件中編寫代碼：
4.在template.html編寫html，注意 這個(gè)必須寫，相當(dāng)于占位，服務(wù)端渲染的頁(yè)面內(nèi)容填充到此。
5.命令node server.js啟動(dòng)服務(wù)
6.瀏覽器打開(kāi)http://localhost:3100/,會(huì)看到data-server-rendered = “true”，表示是服務(wù)端渲染
三、創(chuàng)建一個(gè)Nuxt項(xiàng)目
1.vue init next-community/starter-template
2.npm install # or yarn
3.npm run dev
經(jīng)過(guò)以上三個(gè)步驟，打開(kāi)瀏覽器，訪問(wèn)localhost:3000，這跟創(chuàng)建一個(gè)Vue Webpack項(xiàng)目沒(méi)太多不同。項(xiàng)目目錄結(jié)構(gòu)如下
四、nuxt路由機(jī)制
1.pages目錄中的任何Vue組件都會(huì)基于他們的文件名稱和目錄結(jié)構(gòu)自動(dòng)添加到vue-router中。Nuxt可以生成對(duì)應(yīng)的路由配置，在.nuxt/rouer.js可以體現(xiàn)出來(lái),如圖：
2.嵌套路由：在pages下添加一個(gè)vue文件，同時(shí)添加一個(gè)與該文件同名的目錄用來(lái)存放子視圖組件
3.在父級(jí)vue文件內(nèi)增加用于顯示子視圖內(nèi)容
4.適應(yīng)不同業(yè)務(wù)需求，還有什么動(dòng)態(tài)路由，動(dòng)態(tài)嵌套路由…可以參照官網(wǎng)地址：https://zh.nuxtjs.org/guide/routing
五、assets和static靜態(tài)資源使用
1.assets包含未編譯的資源，與webpack如何加載和處理文件有更多關(guān)系，與nuxt如何工作沒(méi)有太多關(guān)系。
2.static包含一些映射到你的站點(diǎn)的根目錄的靜態(tài)文件。
比如：? ? 靜態(tài)資源放在assets下: <img src="~/assets/timg.jpeg"/>
? ? ? ? ? ? ? ?靜態(tài)資源放在static下: <img src="timg.jpeg"/>
六、layouts使用
1.在layouts目錄下創(chuàng)建一個(gè)新的布局，即.vue文件，代碼如下
2.使用布局時(shí)，可以在pages文件下script里設(shè)置layout值為布局文件的名字
export default {
?layout: 'admin-layout'
}
注意：如果你輸入一個(gè)不正確的url，會(huì)顯示一個(gè)錯(cuò)誤頁(yè)面。事實(shí)上，這個(gè)錯(cuò)誤頁(yè)面是另外一種布局。nuxt有它自己的錯(cuò)誤頁(yè)面布局，但是如果你想要編輯它，只需要?jiǎng)?chuàng)建一個(gè)error.vue布局，然后nuxt就會(huì)使用這個(gè)布局代替默認(rèn)的布局
七、middleware使用
1.中間件（middle）是一些可以在渲染一個(gè)頁(yè)面或布局之前被執(zhí)行的函數(shù)。
2.每一個(gè)中間件應(yīng)該放置在middleware/目錄下，文件名的名稱將成為中間件名稱（比如middleware/auth.js，中間件名稱為auth）,在auth.js中編寫代碼
export default function( context ){
//…處理一定的業(yè)務(wù)邏輯
}
3.最后在nuxt.config.js配置middleware
module.exports = {
????router: {
????????middleware：’auth’
????}
}
八、plugins
1.可以配置需要在vue應(yīng)用實(shí)例化之前需要運(yùn)行的javascript插件，可以是你自己寫的庫(kù)或是第三方模塊
2.配置方式同middleware
3.最后再nuxt.config.js配置plugins，如：
module.exports = {
plugins: [‘~/plugins/文件名’]
}
九、next.config.js文件配置
1.head 一般用于配置默認(rèn)的meta標(biāo)簽
2.css 用于定義應(yīng)用的全局樣式文件，模塊或第三方庫(kù)
3.dev 配置是開(kāi)發(fā)還是生產(chǎn)模式
4.loading 個(gè)性化定制must.js使用的加載組建
5.env 定義用于客戶端和服務(wù)端的環(huán)境變量
……
更多可查看官網(wǎng)https://zh.nuxtjs.org/guide/configuration
