一挥萌、簡介
像vue之類的框架都提供了一種動態(tài)改變頁面的內容，無需每次向服務端發(fā)送請求恩脂。當開始加載網站時机断，瀏覽器收到一堆用來構建頁面的代碼片段（html楷拳、css和其他文件）和如何將這些代碼片段組裝起來的指令。在瀏覽器真正顯示頁面之前吏奸，需要花費時間將這些信息拼裝起來欢揖。那么如果在服務端放一個能構建出隨時顯示的頁面的框架，然后將這個完整頁面發(fā)送給瀏覽器是一種什么體驗呢奋蔚？而nuxt.js就是這么一個服務端渲染的框架她混。
Vue 官網對于Nuxt.js也是很推薦的，除此之外旺拉，Nuxt.js的開發(fā)者積極活躍产上，版本迭代迅速。于2018年1月9日發(fā)布了v1.0.0正式版本蛾狗。
二晋涣、SSR模型建立
Nuxt.js 是一個基于vue.js的通用應用框架，主要通過vue-server-renderer模塊來實現(xiàn)服務端渲染沉桌。
1. npm? install vue vue-server-renderer --save-dev
2.新建項目結構如下：
3.在server.js文件中編寫代碼：
4.在template.html編寫html谢鹊，注意 這個必須寫，相當于占位留凭，服務端渲染的頁面內容填充到此佃扼。
5.命令node server.js啟動服務
6.瀏覽器打開http://localhost:3100/,會看到data-server-rendered = “true”，表示是服務端渲染
三蔼夜、創(chuàng)建一個Nuxt項目
1.vue init next-community/starter-template
2.npm install # or yarn
3.npm run dev
經過以上三個步驟兼耀，打開瀏覽器，訪問localhost:3000，這跟創(chuàng)建一個Vue Webpack項目沒太多不同瘤运。項目目錄結構如下
四窍霞、nuxt路由機制
1.pages目錄中的任何Vue組件都會基于他們的文件名稱和目錄結構自動添加到vue-router中。Nuxt可以生成對應的路由配置拯坟，在.nuxt/rouer.js可以體現(xiàn)出來,如圖：
2.嵌套路由：在pages下添加一個vue文件但金，同時添加一個與該文件同名的目錄用來存放子視圖組件
3.在父級vue文件內增加用于顯示子視圖內容
4.適應不同業(yè)務需求，還有什么動態(tài)路由郁季，動態(tài)嵌套路由…可以參照官網地址：https://zh.nuxtjs.org/guide/routing
五冷溃、assets和static靜態(tài)資源使用
1.assets包含未編譯的資源，與webpack如何加載和處理文件有更多關系梦裂，與nuxt如何工作沒有太多關系似枕。
2.static包含一些映射到你的站點的根目錄的靜態(tài)文件。
比如：? ? 靜態(tài)資源放在assets下: <img src="~/assets/timg.jpeg"/>
? ? ? ? ? ? ? ?靜態(tài)資源放在static下: <img src="timg.jpeg"/>
六塞琼、layouts使用
1.在layouts目錄下創(chuàng)建一個新的布局菠净，即.vue文件禁舷，代碼如下
2.使用布局時彪杉，可以在pages文件下script里設置layout值為布局文件的名字
export default {
?layout: 'admin-layout'
}
注意：如果你輸入一個不正確的url，會顯示一個錯誤頁面牵咙。事實上派近，這個錯誤頁面是另外一種布局。nuxt有它自己的錯誤頁面布局洁桌，但是如果你想要編輯它渴丸，只需要創(chuàng)建一個error.vue布局，然后nuxt就會使用這個布局代替默認的布局
七另凌、middleware使用
1.中間件（middle）是一些可以在渲染一個頁面或布局之前被執(zhí)行的函數(shù)谱轨。
2.每一個中間件應該放置在middleware/目錄下，文件名的名稱將成為中間件名稱（比如middleware/auth.js吠谢，中間件名稱為auth）,在auth.js中編寫代碼
export default function( context ){
//…處理一定的業(yè)務邏輯
}
3.最后在nuxt.config.js配置middleware
module.exports = {
????router: {
????????middleware：’auth’
????}
}
八土童、plugins
1.可以配置需要在vue應用實例化之前需要運行的javascript插件，可以是你自己寫的庫或是第三方模塊
2.配置方式同middleware
3.最后再nuxt.config.js配置plugins工坊，如：
module.exports = {
plugins: [‘~/plugins/文件名’]
}
九献汗、next.config.js文件配置
1.head 一般用于配置默認的meta標簽
2.css 用于定義應用的全局樣式文件，模塊或第三方庫
3.dev 配置是開發(fā)還是生產模式
4.loading 個性化定制must.js使用的加載組建
5.env 定義用于客戶端和服務端的環(huán)境變量
……
