官網：https://nuxtjs.org/
github：https://github.com/nuxt/nuxt.js
什么是Nuxt.js
易于使用的Vue 框架，使用 NuxtJS 充滿信心地構建您的下一個 Vue.js 應用程序。 一個 開源 框架，讓 Web 開發變得簡單而強大。
為什么選擇 NuxtJS
模塊化
Nuxt 基于強大的模塊化體系結構。您可以從 50 多個模塊中進行選擇，以使您的開發更快，更輕松。您無需重新發明輪子即可獲得 PWA 好處，無需在頁面上添加 google Analytics 或生成站點地圖。
高效率
借助 Nuxt.js，您的應用程序將得到開箱即用的優化。我們盡最大努力通過利用 Vue.js 和 Node.js 最佳實踐來構建高性能應用程序。為了從應用程序中擠出所有不必要的內容，Nuxt 包括捆綁分析器和許多微調您的應用程序的機會。
令人愉快
我們的主要重點是開發人員體驗。我們喜歡 Nuxt.js，并且會不斷改進框架，所以您也喜歡它！
期待有吸引力的解決方案，描述性的錯誤消息，強大的默認值和詳細的文檔。 如果有問題或疑問，我們有用的社區將為您提供幫助。
特點
服務器端渲染
這是 Nuxt 最受歡迎的模式。使用 SSR（也稱為 "universal" 或 "isomorphic" 模式），將使用 Node.js 服務器將基于 Vue 組件的 html 傳遞給客戶端，而不是純 JAVAScript。與傳統的 Vue SPA 相比，使用 SSR 將帶來更大的 seo 提升，更好的用戶體驗和更多的機會。
由于單獨實施 SSR 可能非常繁瑣，因此 Nuxt.js 可為您提供全面的支持，并將處理常見的缺陷。
靜態生成
靜態網站生成是當前非常熱門的話題（又名 JAMStack）。與其切換到另一個框架并花時間去適應它，不如一石二鳥？ ( )
Nuxt.js 支持根據您的 Vue 應用程序生成靜態網站。它是 “兩全其美” 的選擇，因為您不需要服務器，但仍然擁有 SEO 的好處，因為 Nuxt 會預先渲染所有頁面并包含必要的 HTML。另外，您可以輕松地將結果頁面部署到 Netlify 或 GitHub 頁面。
Nuxt.js 安裝
運行 create-nuxt-App
為了快速入門，Nuxt.js團隊創建了腳手架工具 create-nuxt-app。
確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：
$ npx create-nuxt-app <項目名>
或者用yarn ：
$ yarn create nuxt-app <項目名>
它會讓你進行一些選擇:
- 在集成的服務器端框架之間進行選擇:None (Nuxt默認服務器)ExpressKoaHapiFeathersMicroFastifyAdonis (WIP)
- 選擇您喜歡的UI框架:None (無)BootstrapVuetifyBulmaTailwindElement UIAnt Design VueBuefyiViewTachyons
- 選擇您喜歡的測試框架:None (隨意添加一個)JestAVA
- 選擇你想要的Nuxt模式 (Universal or SPA)
- 添加 axIOS module 以輕松地將HTTP請求發送到您的應用程序中。
- 添加 EsLint 以在保存時代碼規范和錯誤檢查您的代碼。
- 添加 Prettier 以在保存時格式化/美化您的代碼。
當運行完時，它將安裝所有依賴項，因此下一步是啟動項目:
$ cd <project-name>
$ npm run dev
應用現在運行在 http://localhost:3000 上運行。
注意：Nuxt.js 會監聽 pages 目錄中的文件更改，因此在添加新頁面時無需重新啟動應用程序。
從頭開始新建項目
如果不使用 Nuxt.js 提供的 starter 模板，我們也可以從頭開始新建一個 Nuxt.js 應用項目，過程非常簡單，只需要 1個文件和1個目錄。如下所示：
$ mkdir <項目名>
$ cd <項目名>
提示: 將 <項目名> 替換成為你想創建的實際項目名。
新建 package.json 文件
package.json 文件用來設定如何運行 nuxt：
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}
上面的配置使得我們可以通過運行 npm run dev 來運行 nuxt。
安裝 nuxt
一旦 package.json 創建好， 可以通過以下npm命令將 nuxt 安裝至項目中：
$ npm install --save nuxt
pages 目錄
Nuxt.js 會依據 pages 目錄中的所有 *.vue 文件生成應用的路由配置。
創建 pages 目錄：
$ mkdir pages
創建我們的第一個頁面 pages/index.vue：
<template>
<h1>Hello world!</h1>
</template>
然后啟動項目：
$ npm run dev
現在我們的應用運行在 http://localhost:3000 上運行
Nuxt.js 目錄結構
資源目錄
資源目錄 assets 用于組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。
組件目錄
組件目錄 components 用于組織應用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不會像頁面組件那樣有 asyncData 方法的特性。
布局目錄
布局目錄 layouts 用于組織應用的布局組件。
若無額外配置，該目錄不能被重命名。
中間件目錄
middleware 目錄用于存放應用的中間件。
頁面目錄
頁面目錄 pages 用于組織應用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件并自動生成對應的路由配置。
若無額外配置，該目錄不能被重命名。
插件目錄
插件目錄 plugins 用于組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。
靜態文件目錄
靜態文件目錄 static 用于存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啟動的時候，該目錄下的文件會映射至應用的根路徑 / 下。
舉個例子: /static/robots.txt 映射至 /robots.txt
若無額外配置，該目錄不能被重命名。
Store 目錄
store 目錄用于組織應用的 Vuex 狀態樹 文件。 Nuxt.js 框架集成了 Vuex 狀態樹 的相關功能配置，在 store 目錄下創建一個 index.js 文件可激活這些配置。
若無額外配置，該目錄不能被重命名。
nuxt.config.js 文件
nuxt.config.js 文件用于組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。
若無額外配置，該文件不能被重命名。
package.json 文件
package.json 文件用于描述應用的依賴關系和對外暴露的腳本接口。
該文件不能被重命名。
別名
|
別名 |
目錄 |
|
~ 或 @ |
srcDir |
|
~~ 或 @@ |
rootDir |
默認情況下，srcDir 和 rootDir 相同。
Nuxt.js 配置
build
Nuxt.js 允許你在自動生成的 vendor.bundle.js 文件中添加一些模塊，以減少應用 bundle 的體積。如果你的應用依賴第三方模塊，這個配置項是十分實用的。
css
該配置項用于定義應用的全局（所有頁面均需引用的）樣式文件、模塊或第三方庫。
dev
該配置項用于配置 Nuxt.js 應用是開發還是生產模式。
env
該配置項用于定義應用客戶端和服務端的環境變量。
generate
該配置項用于定義每個動態路由的參數，Nuxt.js 依據這些路由配置生成對應目錄結構的靜態文件。
head
該配置項用于配置應用默認的meta標簽。
loading
該配置項用于個性化定制 Nuxt.js 使用的加載組件。
modules
該配置項允許您將Nuxt模塊添加到項目中。
modulesDir
該配置項允許您定義Nuxt.js應用程序的node_modules文件夾。
plugins
該配置項用于配置那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。
rootDir
該配置項用于配置 Nuxt.js 應用的根目錄。
router
該配置項可用于覆蓋 Nuxt.js 默認的 vue-router 配置。
server
此選項允許您配置Nuxt.js應用程序的服務器實例變量。
srcDir
該配置項用于配置應用的源碼目錄路徑。
dir
此選項允許您配置Nuxt.js應用程序的自定義目錄。
transition
該配置項用于個性化配置應用過渡效果屬性的默認值。
覺得效果不錯的請幫忙加個關注點個贊，每天分享前端實用開發技巧
