?

Kyle_kk關(guān)注

0.3222018.12.25 18:38:59字?jǐn)?shù) 1,559閱讀 1,067

Nuxt.js是一個(gè)基于Vue.js的通用應(yīng)用架構(gòu), 它預(yù)設(shè)了服務(wù)端渲染(SSR, Server Side Render)應(yīng)用所需要的相關(guān)配置, 同時(shí)也支持生成靜態(tài)站點(diǎn).

1_EWDEUt0fqsmRgpYGFOOMew.png

1. 背景 & Nuxt簡(jiǎn)介

Nuxt?其一目的是為了解決單頁面應(yīng)用的SEO問題, 相比于我們平常的SPA頁面. 在搜索引擎中由于無法從網(wǎng)頁中被抓取內(nèi)容信息(SPA頁面的信息都是被打包到JS文件中,動(dòng)態(tài)加載到頁面中), 從而無法被用戶所搜索到.
其二是服務(wù)端渲染相比于SPA頁面渲染,在網(wǎng)絡(luò)環(huán)境較差或者客戶端運(yùn)行在沒有JavaScript的引擎上, 這時(shí)基于SSR渲染的頁面能更好的展現(xiàn)原有的頁面的內(nèi)容,而單頁面應(yīng)用可能就會(huì)有很長(zhǎng)的空白時(shí)間, 從而影響到用戶的體驗(yàn).

2. Nuxt應(yīng)用架構(gòu)

ujs-architecture.jpg

• 客戶端向服務(wù)器請(qǐng)求數(shù)據(jù)
• 服務(wù)器端獲取數(shù)據(jù)從API服務(wù)器
• 服務(wù)端返回完整HTML頁面給客戶端
• 客戶端頁面渲染使用SPA
• 客戶端直接請(qǐng)求API服務(wù)器

3. 項(xiàng)目創(chuàng)建

為了更加方便快速的創(chuàng)建項(xiàng)目, Nuxt.js 團(tuán)隊(duì)提供了一個(gè)腳手架工具?create-nuxt-app.確保你已經(jīng)安裝?npx?(npx 已經(jīng)被內(nèi)置自 NPM 5.2.0)

$ npx create-nuxt-app <project-name>

它會(huì)讓你進(jìn)行一些選擇:
- 在集成的服務(wù)器端框架之間進(jìn)行選擇:
- None(默認(rèn)服務(wù)器)
- Express
- Koa
- Hapi
- Feathers
- Micro
- Adonis
- 選擇您喜歡的UI框架:
- None
- Bootstrap
- Vuetify
- Bulma
- Tailwind
- Element UI
- Ant Design Vue
- Buefy
- 選擇你想要的Nuxt模式(universal or SPA)
- 選擇axios module
- 選擇 Eslint
- 選擇 Prettier
當(dāng)運(yùn)行完成時(shí),它將安裝所有依賴項(xiàng),完成后啟動(dòng)項(xiàng)目:

$ npm run dev

應(yīng)用現(xiàn)在會(huì)運(yùn)行在?http://localhost:3000

4. 項(xiàng)目開發(fā)

4.1 目錄結(jié)構(gòu)

WX20181218-115512.png

• api: api接口
• assets:靜態(tài)資源
• components:組件
• layouts: 布局目錄
• logs: 日志
• middleware:中間件
• pages: 頁面目錄
• plugins:插件
• nuxt.config.js: nuxt 配置文件

4.2 配置

Nuxt.js默認(rèn)的配置涵蓋了大部分的使用情形, 也可以通過修改?nuxt.config.js?來進(jìn)行自定義配置.

WX20181218-121625@2x.png

?

• plugins: 全局引入的插件
• css: 全局引入的css, scss 等
• head: 可以設(shè)置pages的頭部信息, 如titile, meta信息等
• loading:頁面切換的時(shí)候加載組件顯示的進(jìn)度條
• build: 自定義webpack的構(gòu)建配置
• env: 配置客戶端和服務(wù)端共享的環(huán)境變量
• cache:是否允許緩存
• router:自定義配置vue-router的信息

4.3 路由

?

WX20181218-151044@2x.png

Nuxt.js 會(huì)根據(jù)pages的目錄結(jié)構(gòu), 自動(dòng)生成vue-router模塊的路由配置. 如上圖, 會(huì)生成?/dashboard/h5/:h5?,?/dashboard/mws/:mws, ...
可以看出路徑根據(jù)目錄結(jié)構(gòu)自動(dòng)生成了, 動(dòng)態(tài)路徑需要在名字前添加下劃線( _ )

?

4.4 布局

nuxt-views-schema.png

上圖是Nuxt.js的布局架構(gòu). 最外層依舊是Document, 往里一層是一個(gè)layout層,在 Nuxt里面對(duì)應(yīng)目錄中的layouts文件夾,默認(rèn)的pages下的頁面都會(huì)套用?layouts/default.vue?的布局樣式. 其中 <nuxt/> 相當(dāng)于Vue中的?slot插槽的概念,
pages/**.vue的內(nèi)容都會(huì)被填入<nuxt/>,其他的內(nèi)容嵌套和平時(shí)的Vue單頁面應(yīng)用開發(fā)是一樣的.

4.5 Vuex

在根目錄創(chuàng)建 store 目錄，就會(huì)默認(rèn)引用 vuex 模塊，除此之外，還進(jìn)行了以下的操作：1）將 vuex 模塊 加到 vendors 構(gòu)建配置中去；2）設(shè)置 Vue 根實(shí)例的 store 配置項(xiàng).
Nuxt.js 支持兩種使用 store 的方式：

• 普通方式：store/index.js?返回一個(gè)?Vuex.Store?實(shí)例
• 模塊方式：store 目錄下的每個(gè) .js 文件會(huì)被轉(zhuǎn)換成為狀態(tài)樹指定命名的子模塊 （當(dāng)然，index 是根模塊，相當(dāng)于設(shè)置了namespaced: true)

Nuxt.js提供了模塊方式的簡(jiǎn)單寫法：使用狀態(tài)樹模塊化的方式，store/index.js 不需要返回?Vuex.Store?實(shí)例，直接將?state、mutations?和?actions?暴露出來即可。示例如下：

export const state = () => ({accesstoken: '' })export const mutations = {setAccesstoken (state, accesstoken) {state.accesstoken = accesstoken} }

4.6 異步數(shù)據(jù) asyncData

Nuxt.js 增加了一個(gè)?asyncData?方法，用于 在設(shè)置組件數(shù)據(jù) 之前 能夠異步獲取 或 處理數(shù)據(jù)。
由于asyncData?是在組件 初始化 之前被調(diào)用的，所以不能通過?this?引用組件的實(shí)例對(duì)象，可以使用上下文對(duì)象來實(shí)現(xiàn)某些功能,具體的上下文context

4.7 fetch 方法

與?asyncData?方法類似，不同的是它不會(huì)設(shè)置組件的數(shù)據(jù)，作用是設(shè)置store?數(shù)據(jù)。

5. Nuxt 渲染流程

nuxt-schema.png

上圖是nuxt整個(gè)的渲染流程,在render之前的幾個(gè)階段, 都可以拿到context去做一些相應(yīng)操作.

• nuxtServerInit?是Nuxt.js在服務(wù)端初始化的時(shí)候定義在store中.這個(gè)對(duì)我們想要直接傳遞值給服務(wù)端非常有用,比如session, user.
• middleware是一個(gè)自定義的方法,在每次渲染頁面之前被調(diào)用.它可以注冊(cè)到全局下(nuxt.config.js)也可以注冊(cè)在單個(gè)頁面或框架上.
• validate?允許在動(dòng)態(tài)路由組件中定義一個(gè)過濾器方法.
• asyncDate,fetch?asyncData可以讓我們?cè)陧撁胬L制前調(diào)用方法獲取需要的數(shù)據(jù)源;第一次時(shí)在服務(wù)端會(huì)被調(diào)用,之后客戶端也會(huì)在頁面之前被調(diào)用.fetch和asyncData非常相似,區(qū)別只在于fetch只會(huì)用來改變store的狀態(tài),不能填充數(shù)據(jù). *需要的一點(diǎn).如果在方法中調(diào)用this會(huì)報(bào)錯(cuò).因?yàn)閍syncData & fetch在服務(wù)端會(huì)被調(diào)用所以this的當(dāng)前組件并沒有實(shí)例化
• Render?被渲染

6. 一些遇到的坑

• Window 或 Document 對(duì)象未定義？

  這是因?yàn)橐恍┲患嫒菘蛻舳说哪_本被打包進(jìn)了服務(wù)端的執(zhí)行腳本中去。 對(duì)于只適合在客戶端運(yùn)行的腳本，需要通過使用 process.browser 變量來判斷導(dǎo)入.

• 服務(wù)端渲染v-for 列表

  當(dāng)頁面有列表內(nèi)容在客戶端渲染,刷新頁面服務(wù)端會(huì)重復(fù)渲染列表結(jié)構(gòu),生成兩份. 需要用<no-ssr/>組件進(jìn)行設(shè)置,從而不在無武器渲染中呈現(xiàn)

總結(jié)

以上是生活随笔為你收集整理的Nuxt 开发记录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。