Nuxt.js 是一個基於 Vue.js 的通用應用框架。
通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。
Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。
作為框架，Nuxt.js 為 客戶端/服務端 這種典型的應用架構模式提供了許多有用的特性，例如異步數據加載、中間件支持、布局支持等。
特性
- 基於 Vue.js
- 自動代碼分層
- 服務端渲染
- 強大的路由功能，支持異步數據
- 靜態文件服務
- ES2015+ 語法支持
- 打包和壓縮 JS 和 CSS
- HTML 頭部標簽管理
- 本地開發支持熱加載
- 集成 ESLint
- 支持各種樣式預處理器： SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送、
為了快速入門，Nuxt.js團隊創建了腳手架工具 create-nuxt-app。
確保安裝了npx（npx在NPM版本5.2.0默認安裝了）：
npx create-nuxt-app <項目名>
啟動項目:
cd <project-name>
npm run dev
-
別名
| 別名 | 目錄 |
|---|---|
~ 或 @ |
srcDir |
~~ 或 @@ |
rootDir |
默認情況下，srcDir 和 rootDir 相同。
提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目錄, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。
nuxt.config.js文件用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。
路由
Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。
要在頁面之間使用路由，我們建議使用<nuxt-link> 標簽。
假設 pages 的目錄結構如下：
pages/ --| user/ -----| index.vue -----| one.vue --| index.vue
那么，Nuxt.js 自動生成的路由配置如下：
router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'user', path: '/user', component: 'pages/user/index.vue' }, { name: 'user-one', path: '/user/one', component: 'pages/user/one.vue' } ] }
動態路由
在 Nuxt.js 里面定義帶參數的動態路由，需要創建對應的以下划線作為前綴的 Vue 文件 或 目錄。
路由參數校驗
validate
嵌套路由
可以通過 vue-router 的子路由創建 Nuxt.js 應用的嵌套路由。
創建內嵌子路由，你需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。
Warning: 別忘了在父組件(.vue文件) 內增加 <nuxt-child/> 用於顯示子視圖內容。
命名視圖
要渲染命名視圖，您可以在布局(layout) / 頁面(page)中使用<nuxt name="top"/>或<nuxt-child name="top"/>組件。要指定頁面的命名視圖，我們需要在nuxt.config.js文件中擴展路由器配置：
export default { router: { extendRoutes (routes, resolve) { const index = routes.findIndex(route => route.name === 'main') routes[index] = { ...routes[index], components: { default: routes[index].component, top: resolve(__dirname, 'components/mainTop.vue') }, chunkNames: { top: 'components/mainTop' } } } } }
它需要使用兩個屬性 components 和 chunkNames 擴展路由。此配置示例中的命名視圖名稱為 top 。
中間件
中間件允許您定義一個自定義函數運行在一個頁面或一組頁面渲染之前。
每一個中間件應放置在 middleware/ 目錄。文件名的名稱將成為中間件名稱(middleware/auth.js將成為 auth 中間件)。
一個中間件接收 context 作為第一個參數：
中間件執行流程順序：
nuxt.config.js- 匹配布局
- 匹配頁面
export default function(context) {}
插件
axios
nuxt中使用axios
安裝
npm i -S @nuxtjs/axios @nuxtjs/proxy
nuxt.config.js
{ modules:[ '@nuxt/axios', '@nuxt/proxy' ], proxy:[//跨域代理 ['/api/dog',{ target:'htts://dog.ceo/', pathRewrite:{ '^/api/dog':'/api/breads/image/random' } } ] ] }
url-loader 小文件base-64化能有效減少HTTP請求數。
在任何 Vue 組件的生命周期內， 只有beforeCreate和created這兩個方法會在 客戶端和服務端被調用。其他生命周期函數僅在客戶端被調用。
asyncData可以在服務器端使用，也可以在客戶端使用，在客戶端運行就相當於發送ajax請求，在服務端運行就發送服務端請求，
必須要與data屬性一起使用，會自動合並與data的屬性，相當與created
注意：由於asyncData方法是在組件 初始化 前被調用的，所以在方法內是沒有辦法通過this來引用組件的實例對象。
在服務器端和客戶端都可以使用生命周期鈎子：created beforeCreated
nuxt默認服務器端渲染，可以配置spa的模式啟動：
在package.json中scripts中添加：
'start-spa':'nuxt start --spa' npm run start-spa