什麼是Nuxt.js

一、nuxt.js

nuxt是一個專注於ui渲染的應用框架，可以快速搭建專案，還提供了服務端渲染的功能。

1. 安裝

直接用vue-cli安裝

點選載入圖片

2. nuxt推薦的專案結構

assets——資原始檔

components——元件

layouts——佈局，預設default。所有頁面都會載入在佈局頁面中的標籤中。如果要在普通頁面中使用下級路由，則要在頁面中新增

middleware——中介軟體：每個頁面載入前呼叫，在頁面中呼叫的方法是middleware： ‘middlewareName’。

node_modules——依賴包

nuxt。config。js——個性化配置

pages——頁面。根頁面是index。vue，二級頁面只要新增資料夾。動態路由頁面的名稱格式是：_變數。vue

plugins——外掛

static——靜態檔案（不需要webpack打包的）。

store——狀態管理

3. 生命週期

Nuxt在vue的基礎上對生命週期做了擴充套件。

點選載入圖片

4. asyncData

如果需要服務端渲染，首次渲染時一定要使用這個方法。它可以在渲染元件前非同步獲取資料。asyncData傳入context引數，可以獲取一些資訊。使用這個方法時要注意，如果由於伺服器或api錯誤導致無法渲染，就要做好容錯機制，可以使用context。error方法。

5. 使用axios請求資料

（1）nuxt專案預設安裝axios，所以只要安裝proxy即可

（2）在nuxt。config。js中加上：

（3）頁面中使用：

採用 `import axios from ‘axios’` 方式引入axios時，介面引數前須加baseURL。

6.使用scss

（1）安裝sass

（2）如果要全域性使用某個scss檔案，要藉助sass-resources-loader，還需要在nuxt。config。js的build配置中調整匯出的loader配置。

7. 編譯過程

（1）載入nuxt。config。js；

（2）初始化nuxt，builder，開始執行構建；

（3）準備模板使用的引數，然後根據模板生成真正的webpack編譯的js；

（4）分別執行客戶端編譯和服務端編譯，生成最終的js指令碼；

（5）編譯成功後，就需要啟動服務，監聽埠，這個是在npm run start中實現的。

點選載入圖片

以上就是關於Nuxt。js的介紹，謝謝大家閱讀。