說在前頭：本文主要簡書Nuxt.js架構的基本使用，該架構內建度比較高，但文檔比較全，主要參考官方文檔。
安裝
使用官方提供的腳手架。按照官方文檔，使用npx指令安裝。什麼，你還不知到npx？
npx create-nuxt-app <項目名>
然後進行一些選擇，比如選擇什麼服務端架構，這裡我選了Koa
還會讓你選擇UI架構，這裡我選了Element
其餘的都是常見的一些選項。
nuxt.config.js配置
Nuxt.js 預設的配置涵蓋了大部分使用情形，可通過 nuxt.config.js 來覆寫預設的配置。
舉例：配置全局css，在 Nuxtjs 裡配置全局的 CSS 檔案、子產品、庫。 (每個頁面都會被引入)。
使用sass
npm install node-sass sass-loader --save-dev
nuxt.conf.js中添加css資源
module.exports = {
css: [
// 直接加載一個 Node.js 子產品。（在這裡它是一個 Sass 檔案）
'bulma'
// 項目裡要用的 CSS 檔案
'@/assets/css/main.css',
// 項目裡要使用的 SCSS 檔案
'@/assets/css/main.scss'
]
}
assets/css/main.scss
$baseColor : skyblue;
body{
background: $baseColor;
}
這是頁面背景變成天藍色，配置全局css成功。
路由
跟普通Vue項目差別較大，Nuxt.js 依據
pages
目錄結構自動生成 vue-router 子產品的路由配置。意思是說，nuxt.js中可以不用寫router規則，隻需按規則在pages目錄下建立檔案即可。
Nuxt.js中使用<nuxt-link>替代普通Vue項目中的<router-link>，使用<nuxt/>替代<router-view>
基礎路由
layouts/default.vue
<template>
<div>
<nuxt-link to="/news">全部新聞</nuxt-link>
<nuxt-link to="/news/sport">體育新聞</nuxt-link>
<nuxt/>
</div>
</template>
pages目錄
那麼，Nuxt.js 自動生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'news',
path: '/news',
component: 'pages/news/index.vue'
},
{
name: 'news-sport',
path: '/news/sport',
component: 'pages/news/sport.vue'
}
]
}
效果
動态路由
在 Nuxt.js 裡面定義帶參數的動态路由，需要建立對應的以下劃線作為字首的 Vue 檔案 或 目錄。
pages目錄
那麼，Nuxt.js 自動生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{...news},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
}
]
}
頁面擷取參數方式沒變，還是$route.parms.xx
你會發現名稱為
users-id
的路由路徑帶有
:id?
參數，表示該路由是可選的。如果你想将它設定為必選的路由，需要在
users/_id
目錄内建立一個
index.vue
檔案。
路由參數校驗
Nuxt.js 可以讓你在動态路由元件中定義參數校驗方法。
舉例：pages/users/_id.vue頁面中
export default {
validate ({ params }) {
// 必須是number類型
return /^\d+$/.test(params.id)
}
}
如果校驗方法傳回的值不為
true
或
Promise
中resolve 解析為
false
或抛出Error ， Nuxt.js 将自動加載顯示 404 錯誤頁面或 500 錯誤頁面。
下面是動态路由與路由參數校驗的效果
嵌套路由
建立内嵌子路由，你需要添加一個 Vue 檔案，同時添加一個與該檔案同名的目錄用來存放子視圖元件。
官方文檔例子：
pages目錄
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
Nuxt.js 自動生成的路由配置如下：
router: {
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
}
過度動畫
Nuxt.js 預設使用的過渡效果名稱為
page
我們可以在公共樣式表中加入樣式，比如
assets/css/main.scss
.page-enter-active, .page-leave-active {
transition: all .5s;
}
.page-enter, .page-leave-to {
opacity: 0;
}
.page-enter{
transform: translateX(0);
}
.page-leave-to{
transform: translateX(200px)
}
如果想給某個頁面自定義過渡特效的話，隻要在該頁面元件中配置
transition
字段即可：比如
sport.vue
export default {
transition: 'sport'
}
再在assets/css/main.scss添加
.sport-enter-active, .sport-leave-active {
transition: all .5s;
}
.sport-enter, .sport-leave-to {
opacity: 0;
}
.sport-enter{
transform: translateX(0);
}
.sport-leave-to{
transform: translateY(200px)
}
最後效果
中間件（路由鈎子）
中間件允許您定義一個自定義函數運作在一個頁面或一組頁面渲染之前。每一個中間件應放置在
middleware/
目錄。一個中間件接收 context 作為第一個參數。
舉例：在middleware目錄下建立auth.js檔案
auth.js
export default function(context){
console.log('進入到auth中間件')
//擷取用戶端裝置資訊
context.userAgent = process.server ? context.req.headers['user-agent'] : navigator.userAgent
console.log(context.userAgent)
}
然後在 nuxt.config.js 中加入配置項
router: {
middleware: 'auth'
}
中間件實作攔截權限判斷
更詳細的路由配置請看官方文檔。