Nuxt.js是目前最直觀的Vue框架。它將Vue.js的強大功能與伺服器端渲染功能相結合，使其更加強大。你可以建立一個完整的Vue.js客戶端渲染應用程式，一個全面的靜態生成的應用程式，以及一個微控制器應用程式。
Nuxt.js解決了構建Vue.js專案的問題，因為它帶有企業級的前端開發架構。Nuxt.js的功能已經使用行業標準進行結構化，以建立企業應用程式。
本指南將探討Nuxt.js，你可以用它構建什麼，以及它是如何從內到外工作的。
什麼是Nuxt.js？
Nuxt.js是一個建立在Vue.js上的伺服器端渲染框架。它抽象出了管理非同步資料、中介軟體和路由所涉及的大部分複雜配置。它還有助於使用行業標準架構來構造Vue.js應用程式，以構建簡單或企業級的Vue.js應用程式。
Nuxt.js的官方標誌。(圖片來源：Medium)
Nuxt.js的用途是什麼？
Nuxt.js允許你建立許多不同型別的應用程式。下面是用Nuxt.js製作的三個最流行的應用程式。
靜態生成的頁面
這種型別的網站不需要任何外部內容來源–內容已經嵌入HTML中。這類網站的例子包括作品集、演示和教程網站。
單頁應用程式（SPA）
這種前端開發方式從外部API獲取動態內容並在客戶端顯示。大多數JavaScript框架，如React.js、Vue.js、Angular和Ember.js都是單頁應用框架。
更重要的是，SPA的路由系統是通過HTML 5歷史API或路由的位置雜湊實現的，這讓開發者有能力在不重新整理整個頁面的情況下修改網站的URL。
通用應用程式
“通用應用程式” 是一個術語，描述了使用伺服器端渲染的方法，在客戶端瀏覽器上完全渲染頁面之前，在伺服器上獲取客戶端資料。
伺服器端渲染（SSR）是Vue.js中的一個眾所周知的問題，因為它涉及到繁瑣的配置，要把它做好。
Nuxt.js解決了Vue.js中的SSR問題，這對搜尋引擎優化（SEO）很有幫助。Nuxt.js甚至可以擴充套件Universal應用程式，以適應一個成熟的微控制器應用程式，其中前端和後端共享一個程式碼庫。
Nuxt.js是如何工作的？
當使用者訪問一個網站時，Nuxt.js的工作方式與伺服器端框架的工作方式相同。如果啟用了伺服器端渲染，每次使用者請求頁面時都會在伺服器上進行渲染，因此需要伺服器能夠在每次請求時提供頁面。另外，如果啟用了客戶端渲染，它使用JavaScript在瀏覽器中渲染頁面的內容。
這些是Nuxt.js中使用的主要動作和方法：
- nuxtServerInit（動作）：這是第一個生命週期鉤子，如果啟用了Vuex儲存，就會在伺服器端呼叫。它是一個Vuex動作，只在伺服器端呼叫，以預先填充商店，最後，它可以用來排程Vuex商店的其他動作。
- validate() （函式）：validate方法在渲染頁面元件之前被呼叫。它對於驗證頁面元件的動態引數很有用。
- asyncData()方法用於獲取資料並在伺服器端渲染資料，而fetch()方法則用於在渲染頁面前填充儲存。
例如，當Nuxt.js網站收到初始頁面訪問時，它會撥出 nuxtServerInit 動作來更新Vuex狀態（如果在Vuex商店中定義）。否則，如果 nuxtServerInit 沒有被定義，它就會轉到另一個階段。
接下來，它按照這個順序查詢中介軟體。首先，它檢查 nuxt.config.js 檔案中是否有任何全域性中介軟體。如果它被定義，它將在檢查 layout 頁面的中介軟體之前被執行。最後，它將執行單個頁面的中介軟體，包括頁面的子件。
在按順序執行所有的中介軟體後，它將檢查路由是否是動態的，並執行建立和驗證的 validate() 方法。
接下來，它呼叫頁面的 asyncData() 方法，在伺服器端獲取和渲染資料，然後再呼叫 fetch() 方法，在客戶端填充Vuex商店。
到這一步，頁面應該有所有的資料和內容來顯示一個合適的網頁。然後，該頁面由Nuxt.js引擎渲染並顯示給訪問者，完成了整個過程。
這個流程圖說明了渲染一個頁面的所有步驟：
Nuxt.js生命週期鉤子的概述。(來源：Nuxt網站)
無論你使用哪種工具，當你瞭解該工具在引擎蓋下的工作原理時，你總是會感到更加自信。通過以上對Nuxt.js在引擎蓋下的工作原理的解釋，你就會很容易理解。讓我們探討一下在你的下一個專案中使用Nuxt.js的好處。
Nuxt.js的優勢
接下來，讓我們談談Nuxt.js框架的好處，以及為什麼它最近變得如此受歡迎。
無憂建立通用的應用程式
Nuxt.js使建立伺服器端渲染應用程式變得非常容易。如果你曾經試圖用Vue.js開發一個伺服器端渲染的應用程式，你可能會因為伺服器端和客戶端的無數配置選項而跳過困難的障礙。
SSR功能已經內建於Nuxt.js中，並且很容易使用。它可以訪問元件上的 isServer 和 isClient 屬性，以決定你是在客戶端還是在伺服器端渲染東西。
它還提供了 asyncData 方法，專門用於在你的頁面元件的伺服器端獲取和渲染資料。
靜態渲染Vue應用程式的好處
靜態生成的網站在網路行業中正在崛起，通過一個 nuxt generate 命令，你可以生成一個靜態版本的網站，所有的HTML都有相應的路由。
nuxt generate 命令的工作原理與啟用了所有SSR功能的通用應用程式方法完全一樣，但對於靜態生成的網站來說。
在Nuxt.js中，靜態生成的網站就像建立一個強大的通用應用程式，不需要伺服器來驅動SSR功能。
獲得自動程式碼拆分
Nuxt.js在效能上非常快的原因之一是程式碼拆分功能，一個路由被賦予一個單一的JavaScript檔案，其中只有執行該路由所需的程式碼，因此，減少你的應用程式的大小。
這個程式碼拆分功能使用了Webpack的配置，該配置在生成網站的靜態版本時已經內建了。
熱過載
熱過載是為了解決軟體開發中耗時的更改-重新整理方法而新增的一項偉大功能。
它被配置為在你改變根目錄中的任何檔案時自動更新開發伺服器。
在開發和處理 .vue 檔案時，它使用Webpack配置來檢查變化，併為你編譯一切。這種方法節省了開發人員的時間，並鼓勵加快應用開發。
獲得ES6/ES7編譯
Nuxt.js預置了Webpack和Babel，用於翻譯和編譯最新的JavaScript版本，如ES6和ES7，使其可以在舊的瀏覽器上執行。
Babel被配置為將所有的 .vue 檔案和指令碼標籤內的ES6程式碼編譯成可以在所有瀏覽器上執行的JavaScript。
這個功能解決了手動建立瀏覽器相容的應用程式和從頭開始設定配置的戰鬥。
如何建立Nuxt.js應用程式
本節將探討如何建立一個Nuxt.js應用程式。在我們深入研究之前，讓我們先來探討一下開發Nuxt.js應用程式的一些關鍵概念。
建立Nuxt.js應用程式
建立一個新的專案很簡單，直奔主題。你可以用官方文件中列出的不同方法來建立一個專案，但最喜歡和推薦的方法是使用CLI。
要使用CLI建立一個新的應用程式，請確保你已經安裝了npx（npx在你安裝yarn或npm 5.2.0以上版本時是預設安裝的）。
接下來，在你想放置專案的資料夾中鍵入以下命令：
npx create-nuxt-app cd npm run dev
確保將project-name>替換為你的實際專案名稱。
瞭解Nuxt.js的資料夾結構
當你使用官方文件中的任何一種不同的安裝方法來搭建一個新的應用程式時，你會看到CLI生成的各種檔案和資料夾。這些檔案和資料夾是至關重要的，要求一些資料夾保持不變，不需要額外的配置。
我們將檢視資料夾結構，討論每個檔案和資料夾，並瞭解其重要性。
新建立的Nuxt.js資料夾結構。
1. .nuxt
.nuxt目錄是隱藏的，在你啟動你的開發伺服器時生成，它被稱為 build directory。該目錄包含執行 npm run build 命令時生成的檔案或工件。
你可以修改這個目錄中的檔案，但只能用於除錯目的，因為一旦你執行 dev 或 build 命令，這些檔案將再次自動生成。
2. assets
assets資料夾包含所有未編譯的資產，如圖片、字型、SASS檔案和Stylus。在渲染過程中，Webpack會編譯任何包含在這個目錄中的檔案。
3. Components
Components目錄類似於Vue.js中的元件目錄，你所有的Vue元件都存放在這裡。元件是構成你的頁面的不同部分的檔案，也可以重複使用並匯入到你的頁面、佈局和其他元件。
4. Layouts
佈局資料夾儲存了你的應用程式的佈局，在為認證使用者或訪客使用者分離你的應用程式的不同結構時非常有用。
你可以建立許多佈局來對應你的應用程式的結構。有時，你可能希望你的網站上的一些頁面有不同的邊欄、頁首、頁尾等。這些以及更多的東西都是使用儲存在layouts資料夾中的佈局檔案來結構化的。
5. Middleware
中介軟體是在渲染一個頁面或一組頁面（佈局）之前可以執行的自定義函式，它們可以被定義並儲存在Nuxt.js的中介軟體資料夾中。
中介軟體在建立會員制網站時非常方便，如果你想限制某些頁面的訪問，你可以設定中介軟體來檢查使用者是否已經登入。
在Nuxt.js中，中介軟體的工作原理類似於任何後臺程式設計框架的中介軟體，如ExpressJS、Laravel等。它有三種不同型別的中介軟體，即：命名的、匿名的和路由器的中介軟體。
6. Pages
pages 目錄是Nuxt.js路由系統的基石，因為它讀取該目錄下的所有 .vue 檔案並自動建立路由器配置。
pages 目錄包含了你的應用檢視和路由，每一個頁面元件也是一個標準的Vue元件。
不過，Nuxt.js還是把它當作一個路由，通過新增特殊的屬性和功能，使你的通用應用程式的開發儘可能的簡單。
7. Plugins
plugins 目錄包含你想在例項化根Vue.js應用程式之前執行的JavaScript程式碼。這裡是新增Vue外掛和注入函式或常量的地方。
在Nuxt.js中，你不必使用 Vue.use() 函式，只需在plugins資料夾中建立一個新檔案，並使用nuxt.config.js檔案將你的Vue外掛注入Vue例項中。
8. Static
static資料夾包含了你的專案中所有的靜態檔案，這些檔案很可能不會改變，或者不需要對其進行任何編譯就應該被渲染。
所有包含在靜態目錄中的檔案將自動由Nuxt.js提供服務，並通過你的專案根URL訪問。
這個目錄對於諸如favicon、robots.txt等檔案來說是非常好的。
9. Store
Store目錄包含了你所有的Vuex商店檔案，預設情況下，它被分割成模組。
Vuex商店開箱即用，但預設是禁用的。你需要通過在商店目錄下建立一個 index.js 檔案來啟用商店。
在建立和管理一個企業專案時，Vuex商店是必要的。這就是為什麼Nuxt.js預置了Vuex商店，併為適應企業級應用開發進行了配置。
Nuxt.js頁面和路由系統
Nuxt.js使路由系統像在 pages 目錄中建立目錄和檔案一樣簡單。它根據該目錄的檔案和資料夾結構，自動生成一個路由檔案。
例如，如果你在pages目錄下有一個 about.vue 檔案，它將自動轉換路由，然後你可以在瀏覽器上訪問該路由，看到 “About” 頁面的內容。
這個路由系統還允許你只通過建立檔案和資料夾來定義三種不同的路由。讓我們更詳細地探討一下這些路由型別。
1. 基本路由
基本路由是那些不需要任何額外配置就能工作的路由。這是最簡單的路由型別，可以像 /about, /contact 等那樣簡單。
要建立一個基本的路由系統，你可以像下面這樣構造你的頁面目錄：
pages/ --| services.vue --| contact.vue --| index.vue
Nuxt.js會使用你在pages目錄中新增的檔案自動生成一個路由器檔案：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: ‘services’,
path: '/services’,
component: 'pages/services’
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
]
}
現在，我們所有的檔案都結構整齊，並自動進行路由。
2. 巢狀式路由
巢狀路由是在一個父路由中建立的路由。巢狀路由被用來建立多層次的深度路由。
要建立巢狀路由，需要建立一個父資料夾，將所有路由檔案放在該資料夾中。
讓我們嘗試一下建立一個巢狀路由：
pages/ --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| services.vue --| contact.vue --| index.vue
在上面的資料夾結構中，我們建立了一個與 dashboard 同名的新檔案和資料夾，接下來，我們新增了 user.vue 和 settings.vue 檔案作為 dashboard 資料夾的子資料夾。
這個簡單的資料夾結構將生成一個類似於下面的路由的路由器：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'services',
path: '/services',
component: 'pages/services'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
{
name: 'dashboard',
path: '/dashboard',
component: 'pages/dashboard.vue',
children: [
{
name: 'dashboard-user',
path: '/dashboard/user',
component: 'pages/dashboard/user.vue'
},
{
name: 'dashboard-settings',
path: '/dashboard/settings',
component: 'pages/dashboard/settings.vue'
}
]
}
]
}
在Vue.js中建立巢狀路由有點麻煩，特別是如果你必須建立大量的路由，就像你在上面的程式碼示例中看到的那樣，但Nuxt.js通過只在一個巢狀資料夾中建立Vue檔案，使其變得簡單而容易。
3. 動態路由
動態路由是用未知的路由建立的，因為它依賴於API呼叫，或者你不想重複建立頁面。這些路由是由一個變數定義的，這個變數可以是名稱、數字或從應用程式的客戶端資料中檢索的ID。
例如，在建立一個新聞應用時，這很有用，因為你不知道使用者要點選閱讀的帖子的ID或slug。但有了動態路由，你可以檢索帖子的ID/lug，並以ID/lug呈現正確的帖子。
要建立一個動態路由，你要在.vue檔案或目錄名稱中新增一個下劃線。你可以把檔案或目錄命名為你選擇的任何名字，但必須附加一個下劃線以使其成為動態。
例如，如果你在pages目錄下定義了一個 _slug.vue 檔案，你可以使用 params.slug 物件來訪問這個值。我們將用一個例子來演示如何建立一個動態路由：
pages/ --|user/ -----| index.vue -----| about.vue -----| _routeName -------| index.vue -------| info.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| services.vue --| _id.vue --| contact.vue --| index.vue
在 _id 和 _routeName 中附加下劃線，將為頁面建立一個帶有ID引數的動態路由，以及一個帶有上述子路由的字串引數的父路由。這個頁面結構將在檔案中生成一個具有以下路由的路由器：
{
name: 'work',
path: '/work',
component: 'pages/work'
},
{
name: 'contact',
path: '/contact',
component: 'pages/contact'
},
{
name: 'id',
path: '/:id',
component: 'pages/_id.vue'
}
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-about',
path: '/user/about',
component: 'pages/user/about.vue'
},
{
name: 'user-routeName',
path: '/user/:routeName',
component: 'pages/user/_routeName/index.vue'
},
{
name: 'user-routeName-info',
path: '/user/:routeName/info',
component: 'pages/user/route.vue'
},
{
name: 'dashboard',
path: '/dashboard',
component: 'pages/dashboard.vue',
children: [
{
name: 'dashboard-user',
path: '/dashboard/user',
component: 'pages/dashboard/user.vue'
},
{
name: 'dashboard-settings',
path: '/dashboard/settings',
component: 'pages/dashboard/settings.vue'
}
]
}
]
}
現在我們已經探索了Nuxt.js框架中內建的不同路由系統，讓我們學習如何建立和管理Vuex商店。
在Nuxt.js中使用Vuex商店
Nuxt.js通過簡化Vuex在構建企業專案時的處理方式，解決了一個主要的Vue結構問題。在建立一個新的應用程式時，商店資料夾會自動建立。
你可以通過在store資料夾內建立一個 index.js 檔案來啟用Vuex商店。有了這個簡單的改進，Vuex商店現在是使用官方Vuex文件中概述的最佳實踐來進行結構和修改的，這鼓勵了大規模的應用開發。
你的 index.js 檔案應該包含以下結構，以對應Nuxt.js如何結構你的Vuex商店。讓我們來看看：
export const state = () => ({
})
export const getters = {
}
export const mutations = {
}
export const actions = {
}
Nuxt.js允許你在你的大型應用程式中使用按功能分割的方法。通過這種方法，你可以建立不同的Vuex儲存檔案來對應你的應用程式中的功能。例如，如果你的應用程式有使用者、帖子和評論功能，你可以在你的商店目錄中建立這些不同的檔案，如 users.js, posts.js, 和 comments.js 。
這種方法使你很容易根據應用程式的功能訪問特定的商店檔案，將定位和更新資料的繁瑣過程變成毫不費力的散步。
小結
Nuxt.js是一個非常流行的SSR和靜態生成前端的Vue框架。它不僅解決了在Vue應用中配置和設定SSR的問題–它還通過遵守結構化和架構化大規模Vue應用的最佳實踐，促進了企業應用的發展。
本指南探討了你需要知道的關於Nuxt.js的一切，包括你可以用它構建什麼。我們討論了靜態生成的頁面、單頁應用程式（SPA）和通用應用程式，以及如何使用Nuxt.js開發它們。
現在你已經看到了在你的下一個大型企業專案中選擇Nuxt.js是多麼容易和有益。請在評論區告訴我們，你將用這些新的超能力構建什麼？
評論留言