大前端學習 -- NuxtJS學習筆記
文章內容輸出來源：大前端高薪訓練營
代碼倉庫地址：https://gitee.com/jiailing/nuxtjs-demo，在多個分支里都有代碼
一、Nuxt.js是什么
一個基于Vue.js生態的第三方開源服務端渲染應用框架
它可以幫我們輕松的使用Vue.js技術棧構建同構應用
官網：https://zh.nuxtjs.org/
Github倉庫：https://github.com/nuxt/nuxt.js
二、Nuxt.js的使用方式
初始化項目
已有的Node.js服務端項目
直接把Nuxt當做一個中間件集成到Node Web Server中
現有的Vue.js項目
非常熟悉Nuxt.js
至少百分之10的代碼改動
三、初始化Nuxt.js應用方式
官方文檔：https://zh.nuxtjs.org/guide/installation
方式一：使用create-nuxt-app
方式二：手動創建
四、Nuxt.js路由
pages文件夾下的文件會自動生成路由
a標簽
它會刷新整個頁面，不推薦使用
nuxt-link組件
https://router.vuejs.org/zh/api/#router-link-props
編程式導航
https://router.vuejs.org/zh/guide/essentials/navigation.html
methods: { onClick () { this.$router.push('/') } }
1
2
3
4
5
Vue Router動態路由匹配
https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html
Nuxt
https://zh.nuxtjs.org/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1
user/_id.vue，動態路由參數文件名由下劃線開頭。
{{$route.params.id}} User page
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Vue Router 嵌套路由
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
Nuxt.js嵌套路由
https://zh.nuxtjs.org/guide/routing#%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1
可以通過 vue-router 的子路由創建 Nuxt.js 應用的嵌套路由。創建內嵌子路由，你需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。
Warning: 別忘了在父組件(.vue文件) 內增加
參考文檔：https://zh.nuxtjs.org/api/configuration-router
在項目根目錄下創建nuxt.config.js
/** * Nuxt.js 配置文件 nuxt.config.js */ module.exports = { router: { base: '/abc', // routes就是路由配置表，是個數組，resolve是解析路由路徑的 extendRoutes(routes, resolve) { routes.push({ name: 'custom', path: '*', component: resolve(__dirname, 'pages/404.vue') }), routes.push({ name: 'hello', path: '/hello', component: resolve(__dirname, 'pages/about.vue') }) } } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
五、Nuxt.js視圖
你可以定制化 Nuxt.js 默認的應用模板。
定制化默認的 html 模板，只需要在 src 文件夾下（默認是應用根目錄）創建一個 app.html 的文件。
默認模板為：
{{ HEAD }} {{ APP }}
1
2
3
4
5
6
7
8
9
Nuxt.js 允許你擴展默認的布局，或在 layout 目錄下創建自定義的布局。
可通過添加 layouts/default.vue 文件來擴展應用的默認布局。
提示: 別忘了在布局文件中添加
默認布局的源碼如下：
1
2
3
可以在組件中通過layout屬性修改默認布局組件：
Index頁面的布局組件變成了foo，但是about頁面還是default，因為about頁面沒有修改其layout屬性，所以默認的布局文件還是default
六、Nuxt.js異步數據
Nuxt.js 擴展了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設置組件的數據之前能異步獲取或處理數據。
https://zh.nuxtjs.org/guide/async-data
基本用法
它會將asyncData返回的數據融合組件data方法返回數據一并給組件
調用時機：服務端渲染期間和客戶端路由更新之前（保證了服務端和客戶端都要運行處理數據）
注意事項
只能在頁面組件中使用，非頁面組件中不會調用asyncData方法，如果子組件中需要數據，可以通過props方式傳遞數據
沒有this，因為它是在組件初始化之前被調用的
當你想用的動態頁面內容有利于SEO或者是提升首屏渲染速度的時候，就在asyncData中發送請求數據。如果是非異步數據或者普通數據，則正常的初始化到data中即可。
Pages/index.vue
Hello {{ title }}!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
pages/components/Foo.vue
Foo
此處會報錯，因為這是非頁面組件，asyncData方法不會執行，所以foo是未定義。 {{foo}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
static這個文件夾可以直接作為根路徑訪問
https://zh.nuxtjs.org/guide/async-data#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1
pages/article/_id.vue
article Page
title: {{post.title}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Components/Foo.vue
Foo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pages/index.vue
Hello {{ title }}!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
JavaScript web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
