服務(wù)端渲染
傳統(tǒng)服務(wù)端渲染
- image.png
單頁(yè)面應(yīng)用 SPA
nuxt 是什么
Nuxt.js 是一個(gè)基于 Vue.js 的通用應(yīng)用框架生真。
通過(guò)對(duì)客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織亭引，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI 渲染。
就使用而言,組件寫法基本和vue相差不大,區(qū)別在于幾個(gè)鉤子函數(shù),以及一些服務(wù)端渲染相關(guān)的東西
nuxt特性
- 基于 Vue.js
- 自動(dòng)代碼分層
- 服務(wù)端渲染
- 強(qiáng)大的路由功能，支持異步數(shù)據(jù)
- 靜態(tài)文件服務(wù)
- ES2015+ 語(yǔ)法支持
- 打包和壓縮 JS 和 CSS
- HTML 頭部標(biāo)簽管理
- 支持各種樣式預(yù)處理器： SASS、LESS、 Stylus 等等
優(yōu)點(diǎn)
- 利于seo,一般購(gòu)物類網(wǎng)站都需要seo優(yōu)化
- 首屏渲染速度更快
- 原因是:服務(wù)端渲染只需要進(jìn)行一次網(wǎng)絡(luò)請(qǐng)求,而客戶端渲染需要先請(qǐng)求運(yùn)行所需文件,運(yùn)行之后再進(jìn)行網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù),然后加載頁(yè)面
缺點(diǎn)
- 對(duì)于服務(wù)器要求比客戶端渲染高
使用介紹
1.目錄結(jié)構(gòu)介紹
-
assets
主要用于組織未編譯的靜態(tài)資源如Less德澈、SASS..... -
components
主要用來(lái)存放組件,且其不能使用asyncData函數(shù) -
layouts布局目錄
用于進(jìn)行頁(yè)面布局,例如公共導(dǎo)航欄,footer布局 -
plugins
存放一些插件配置,只會(huì)執(zhí)行一次,比如axios的攔截器添加token -
middleware
中間件,可以進(jìn)行一些,權(quán)限驗(yàn)證之類的,全局的中間件,每次進(jìn)入不同的路由都會(huì)執(zhí)行 -
pages頁(yè)面目錄
nuxt采用約定式路由,不需要配置,文件路徑名即為路由地址
例如
頁(yè)面地址
--| user/
-----| index.vue
-----| one.vue
--| index.vue
對(duì)應(yīng)路由地址為
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'
}
]
}
-
static靜態(tài)文件目錄
此目錄下的文件不會(huì)被編譯打包,服務(wù)器啟動(dòng)后會(huì)直接將其映射至根目錄
例如static/story.txt=>/story.txt -
store
vuex相關(guān)配置 -
nuxt.config.js
關(guān)于項(xiàng)目的一些配置,例如插件,中間件,路由,seo優(yōu)化標(biāo)簽等
image.png
2.路由(約定式:按照約定方式使用,不需要使用者額外配置)
- 基礎(chǔ)路由
假設(shè) pages 的目錄結(jié)構(gòu)如下：
pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
那么歇攻，Nuxt.js 自動(dòng)生成的路由配置如下：
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'
}
]
}
- 動(dòng)態(tài)路由
在 Nuxt.js 里面定義帶參數(shù)的動(dòng)態(tài)路由，需要?jiǎng)?chuàng)建對(duì)應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄梆造。
以下目錄結(jié)構(gòu)：
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
Nuxt.js 生成對(duì)應(yīng)的路由配置表為：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'users-id',
path: '/users/:id?',
component: 'pages/users/_id.vue'
},
{
name: 'slug',
path: '/:slug',
component: 'pages/_slug/index.vue'
},
{
name: 'slug-comments',
path: '/:slug/comments',
component: 'pages/_slug/comments.vue'
}
]
}
你會(huì)發(fā)現(xiàn)名稱為 users-id 的路由路徑帶有 :id? 參數(shù)缴守，表示該路由是可選的。如果你想將它設(shè)置為必選的路由镇辉，需要在 users/_id 目錄內(nèi)創(chuàng)建一個(gè) index.vue 文件屡穗。
- 路由參數(shù)校驗(yàn)
Nuxt.js 可以讓你在動(dòng)態(tài)路由組件中定義參數(shù)校驗(yàn)方法。
舉個(gè)例子： pages/users/_id.vue
export default {
validate({ params }) {
// 必須是number類型
return /^\d+$/.test(params.id)
}
}
如果校驗(yàn)方法返回的值不為 true或Promise中 resolve 解析為false或拋出 Error 忽肛， Nuxt.js 將自動(dòng)加載顯示 404 錯(cuò)誤頁(yè)面或 500 錯(cuò)誤頁(yè)面
類似于vue路由導(dǎo)航功能
3. 布局
- 默認(rèn)布局
可通過(guò)添加layouts/default.vue文件來(lái)擴(kuò)展應(yīng)用的默認(rèn)布局村砂。
提示: 別忘了在布局文件中添加 <nuxt/> 組件用于顯示頁(yè)面的主體內(nèi)容。
默認(rèn)布局的源碼如下：
<template>
<nuxt />
</template>
- 自定義布局
layouts 目錄中的每個(gè)文件 (頂級(jí)) 都將創(chuàng)建一個(gè)可通過(guò)頁(yè)面組件中的 layout 屬性訪問(wèn)的自定義布局屹逛。
假設(shè)我們要?jiǎng)?chuàng)建一個(gè) 博客布局 并將其保存到layouts/blog.vue:
<template>
<div>
<div>我的博客導(dǎo)航欄在這里</div>
<nuxt />
</div>
</template>
然后我們必須告訴頁(yè)面 (即pages/posts.vue) 使用您的自定義布局：
<template>
<!-- Your template -->
</template>
<script>
export default {
layout: 'blog'
// page component definitions
}
</script>
- 錯(cuò)誤處理
你可以通過(guò)編輯 layouts/error.vue 文件來(lái)定制化錯(cuò)誤頁(yè)面.
這個(gè)布局文件不需要包含 <nuxt/> 標(biāo)簽础废。你可以把這個(gè)布局文件當(dāng)成是顯示應(yīng)用錯(cuò)誤（404，500 等）的組件罕模。
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">頁(yè)面不存在</h1>
<h1 v-else>應(yīng)用發(fā)生錯(cuò)誤異常</h1>
<nuxt-link to="/">首 頁(yè)</nuxt-link>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'blog' // 你可以為錯(cuò)誤頁(yè)面指定自定義的布局
}
</script>
4.鉤子函數(shù)
- asyncData
- 返回的數(shù)據(jù)會(huì)合并在data中
- 只能在pages下調(diào)用
- 該方法在組件實(shí)例化之前調(diào)用,無(wú)法通過(guò)this訪問(wèn)組件實(shí)例
export default {
async asyncData({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
- fetch
- fetch 方法用于在渲染頁(yè)面前填充應(yīng)用的狀態(tài)樹(shù)（store）數(shù)據(jù)评腺， 與 asyncData 方法類似，不同的是它不會(huì)設(shè)置組件的數(shù)據(jù)淑掌。
<script>
export default {
async fetch({ store, params }) {
await store.dispatch('GET_STARS')
}
}
</script>
- create
- 會(huì)在服務(wù)端執(zhí)行,如果不是服務(wù)端渲染,數(shù)據(jù)請(qǐng)求最好放在beforeMount及之后的鉤子中
- beforeMount/mounted/updated/beforeDestroyed/destroyed
- 其余鉤子跟vue類似
項(xiàng)目中使用到的一些技術(shù)
nuxt相關(guān)
1.全局混入/局部混入/全局注冊(cè)組件
可以用于彈窗/加載態(tài)....
2. inject 插件注入
注入
export default function (ctx, inject) {
const login = () => {}
inject(login)
使用
this.$login()
諸如一些登錄,退出或者一些api請(qǐng)求方法可以使用此方法注入,更加簡(jiǎn)潔優(yōu)雅,或者嵌套組件使用方便數(shù)據(jù)傳遞
此配置需要在nuxt.config.js 配置
3. nuxtServerInit
store/index.js
export const actions = {
async nuxtServerInit({ dispatch }, ctx) {
// 一些狀態(tài)初始化或者token設(shè)置
}
};
第三方插件等
1. sa-sdk-javascript
神策分析蒿讥，是針對(duì)企業(yè)級(jí)客戶推出的深度用戶行為分析產(chǎn)品，支持私有化部署，客戶端芋绸、服務(wù)器媒殉、業(yè)務(wù)數(shù)據(jù)、第三方數(shù)據(jù)的全端采集和建模侥钳，驅(qū)動(dòng)營(yíng)銷渠道效果評(píng)估适袜、用戶精細(xì)化運(yùn)營(yíng)改進(jìn)、產(chǎn)品功能及用戶體驗(yàn)優(yōu)化舷夺、老板看板輔助管理決策苦酱、產(chǎn)品個(gè)性化推薦改造、用戶標(biāo)簽體系構(gòu)建等應(yīng)用場(chǎng)景给猾。作為 PaaS 平臺(tái)支持二次開(kāi)發(fā)疫萤，可通過(guò) BI、大數(shù)據(jù)平臺(tái)敢伸、CRM扯饶、ERP 等內(nèi)部 IT 系統(tǒng)，構(gòu)建用戶數(shù)據(jù)體系池颈，讓用戶行為數(shù)據(jù)發(fā)揮深遠(yuǎn)的價(jià)值尾序。
簡(jiǎn)而言之,就是對(duì)用戶行為進(jìn)行數(shù)據(jù)分析
2. js-cookie
用于cookie 的設(shè)置
3.tailwindcss
css框架
- 提供了簡(jiǎn)潔的class類名語(yǔ)法
-
響應(yīng)式布局.........等
image.png
image.png
4.isMobile
判斷當(dāng)前環(huán)境是否為移動(dòng)端
5.文本提示toolTip
部署
- 發(fā)布部署
- 先編譯再啟動(dòng)服務(wù),生成文件在./nuxt/dist
npm run build
npm start
+靜態(tài)應(yīng)用部署
- 需要渲染以及接口都可用,生成文件在根目錄下dist
- 所有生成的頁(yè)面都是靜態(tài)的,適用于博客等
npm run generate
seo相關(guān)
