NuxtJS基礎
NuxtJS是什么？
NuxtJS是一個基于Vue生態(tài)的第三方開源服務端渲染應用框架
它可以幫助我們輕松的使用Vue技術(shù)棧構(gòu)建同構(gòu)應用
官網(wǎng)：https://zh.nuxtjs.org
Github倉庫：https://github.com/nuxt/nuxt.js
NuxtJS的幾種使用方式
- 使用NuxtJS來初始化創(chuàng)建新的應用（推薦）
- 使用
create-nuxt-app - 手動從零創(chuàng)建
- 使用
- 對于已有的Node.js服務端項目，直接把Nuxt當做中間件集成到Node Web Server中
- 對于已有的Vue.js項目，在非常熟悉Nuxt.js的情況下，至少百分之十以上的代碼改動來遷移到使用Nuxt.js構(gòu)建前端SPA應用（不推薦）
從零開始創(chuàng)建NuxtJS應用
創(chuàng)建NuxtJS應用目錄
nuxt-demo使用
npm init -y或yarn init -y初始化安裝NuxtJS相關(guān)依賴
npm i nuxt或yarn add nuxt-
修改
package.json文件，添加scripts選項"scripts": { "dev": "nuxt" }
-
新建
pages目錄，并在其中創(chuàng)建index.vue頁面組件<template> <div>hello nuxt</div> </template> <script> export default { } </script> <style> </style>
-
執(zhí)行
npm run dev或yarn dev運行nuxt，nuxt根據(jù)默認的選項完成Client與Server端的編譯，并啟動相應的服務image-20210201211847488
路由
基礎路由
NuxtJS的路由默認使用約定式路由，即按照約定的規(guī)則，根據(jù)組件文件路徑自動生成路由配置
NuxtJS約定，所有的視圖組件應當存放在
pages目錄下，nuxt在編譯時會讀取該目錄下的所有.vue文件，并自動生成相應的路由配置
pages的目錄結(jié)構(gòu)
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| about.vue
NuxtJS自動生成的路由配置如下
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'
},
{
name: 'about',
path: '/about',
component: 'pages/about.vue'
},
]
}
我們可以在編譯生成的.nuxt/router.js文件中查看到nuxt自動生成的路由配置
路由導航
NuxtJS中路由導航的幾種形式
-
a標簽- 不推薦使用，會刷新整個頁面
-
nuxt-link組件- 用法同vue的
router-link
- 用法同vue的
- 編程式導航
- 用法同vue
<template>
<div>
<h1>about me</h1>
<!-- a鏈接 會刷新頁面 -->
<h2>a鏈接</h2>
<a href="/">首頁</a>
<!-- router-link組件 用法同vue的router-link -->
<h2>router-link</h2>
<router-link to="/">首頁</router-link>
<!-- 編程式導航 -->
<h2>編程式導航</h2>
<button @click="onClick">首頁</button>
</div>
</template>
<script>
export default {
name: 'AboutPage',
methods: {
onClick () {
// 編程式導航
this.$router.push('/')
}
}
}
</script>
<style>
</style>
動態(tài)路由
NuxtJS的約定式路由支持動態(tài)路由，自動生成的動態(tài)路由配置與Vue的動態(tài)路由配置方式相同
NuxtJS約定使用下劃線
_前綴的目錄或者視圖組件文件會被作為動態(tài)路由
pages的目錄結(jié)構(gòu)
pages/
--| _slug/
-----| index.vue
--| user/
-----| _id.vue
--| index.vue
NuxtJS自動生成的路由配置如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'user-id',
path: '/user/:id?',
component: 'pages/user/_id.vue'
},
]
}
pages/user/_id.vue生成的路由/user/:id?中包含了?，表示:id這個參數(shù)是可選的，如果希望:id參數(shù)必選，則必須在_id目錄下創(chuàng)建index.vue，即pages/_id/index.vue動態(tài)路由中的參數(shù)同樣可以使用
$route.params.xxx來進行獲取
嵌套路由
NuxtJS的約定式路由支持嵌套路由，自動生成的嵌套路由配置與Vue的嵌套路由配置方式相同
NuxtJS約定創(chuàng)建嵌套路由時，需要創(chuàng)建一個
.vue視圖組件文件，同時需要創(chuàng)建一個同名的目錄，用來存放子視圖組件在父組件
.vue文件內(nèi)，需增加<nuxt-child/>作為子視圖出口來展示子視圖內(nèi)容
pages的目錄結(jié)構(gòu)
pages/
--| user.vue
--| user/
-----| _id.vue
--| index.vue
NuxtJS自動生成的路由配置如下
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user.vue'
children: [{
path: ":id?",
component: 'pages/user/_id.vue',
name: "user-id"
}]
},
]
}
自定義路由
NuxtJS支持對路由進行一些額外的自定義配置
通過創(chuàng)建自定義配置文件
nuxt.config.js，并使用router選項進行配置（具體可使用的自定義配置項參考NuxtJS官網(wǎng)文檔）
示例：
// nuxt.config.js
module.exports = {
router: {
base: '/abc', // 路由根路徑
extendRoutes (routes, resolve) { // 擴展路由
routes.push({
name: 'hello',
path: '/hello',
component: resolve(__dirname, 'pages/about.vue')
})
}
...
}
}
視圖
Nuxt視圖結(jié)構(gòu)
模板
NuxtJS默認的HTML頁面模板，頁面渲染的內(nèi)容最終會放入{{ APP }}中
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>
也可以通過創(chuàng)建app.html文件來自定義頁面模板（重啟生效）
可以通過自定義app.html的方式來為頁面添加額外的JavaScript、CSS文件的引入，官方更推薦通過nuxt.config.js的配置項來達到同樣的效果
布局
NuxtJS默認的布局
<template>
<nuxt />
</template>
我們可以通過創(chuàng)建layouts/default.vue文件來擴展默認布局（重啟生效）
layouts目錄下也可以創(chuàng)建其他的布局文件，布局文件中需要添加<nuxt/>組件來顯示頁面主體內(nèi)容，在需要使用該布局的視圖組件文件中，通過layout選項來指定布局名稱
異步數(shù)據(jù)
asyncData
NuxtJS擴展了Vue，增加了
ayncData方法，使我們能在設置組件數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)，可以用來優(yōu)化首屏渲染與SEO，普通數(shù)據(jù)則應當初始化到data方法中
-
基本用法
-
asyncData返回的數(shù)據(jù)會與組件data方法返回的數(shù)據(jù)融合一并提供給組件使用 - 在服務端渲染期間與客戶端路由更新之前會被調(diào)用
-
-
注意事項
- 只能在頁面組件中使用（可以通過頁面組件獲取異步數(shù)據(jù)后傳遞給子組件來使用）
- 沒有
this，因為是在組件初始化之前被調(diào)用
上下文對象
asyncData接收一個上下文對象context作為參數(shù)，由于asyncData在組件初始化之前被調(diào)用而無法訪問this，我們可以使用上下文對象context來訪問上下文相關(guān)的一些屬性，例如context.params或者context.route.params，等同于this.$route.params(詳細的可訪問的屬性可以參考Nuxt官方文檔)
