小仙男·言在前

關于框架：為了解決VUE的SPA單頁應用對SEO搜索引擎優(yōu)化不友好的問題，這幾天一直在調研各種SSR框架。比如https://doc.ssr-fc.com/ 和 https://fmfe.github.io/genesis-docs/ 都是比較不錯，且有自己理念和想法的框架。但是對于公司來說技術規(guī)范差異太大，團隊學習成本比較高，思來想去，還是基于NUXT.JS自己搭建一套SSR框架慢慢完善吧。

本文沒有附帶框架，大家直接進入【NUXT官網(wǎng)】按官網(wǎng)提示初始化框架即可！

關于本文檔：本文檔是從官網(wǎng)文檔中摘錄的一些重點內容，以及加入了自己的一些調整和對官網(wǎng)內容的理解和解釋。

關于官網(wǎng)：NUXT中文網(wǎng) 特別適合新手學習，文檔及案例十分清楚詳盡，可以說有手就行。但是，中文網(wǎng)的更新不及時，有些章節(jié)（比如fetch鉤子中不能使用this）甚至存在明顯錯誤，所以有一定技術水平的寶子，建議直接查看 NUXT英文官網(wǎng) 。

【一、框架概述】

1、框架介紹

SSR 技術(即服務端渲染技術)，區(qū)別于原先純Vue框架的SPA應用(即單頁應用)。SPA應用只有一個index.html的入口文件，頁面顯示的所有內容均靠客戶端JS進行渲染，對于搜索引擎（SEO）優(yōu)化來說，整個網(wǎng)站只有一個空頁面，十分不友好。而服務端渲染技術，是借助node.js作為框架服務端，在初次訪問一個頁面的時候，先在服務端預請求接口，并在服務端組裝完成的html頁面后，返回給客戶端呈現(xiàn)。
Nuxt.js是基于Vue框架的一款服務端渲染框架，提供了特有的框架結構和服務端渲染生命周期。

2、開發(fā)環(huán)境

本框架基于Node.js+Webpack+vue+Nuxt.js進行開發(fā)，提供ElementUI作為UI框架。開發(fā)前需全局安裝Node.js與webpack開發(fā)環(huán)境。
框架推薦Node.js版本為v16.15.0，最低版本不得低于12，推薦安裝nvm或n等node版本管理工具。

3、分支要求

遵循前端團隊git倉庫及版本管理規(guī)范，即master分支只用于拉取框架代碼，xxx_dev為開發(fā)分支，xxx_test為開發(fā)分支，xxx為生產分支。

3、關于本文檔

本文檔所述內容，已經是從官網(wǎng)中摘錄的【重中之重】，開發(fā)前請【詳盡】【仔細】【通讀】本文檔?。?！尤其是<a href='#five'>【五、數(shù)據(jù)請求】</a> 與 <a href='#six-8'>【六-8、重要Q&A】</a>?。?！
文檔描述存在錯誤的地方，請以【NUXT英文官網(wǎng)】為準。

4、框架版本更新

詳見框架版本更新說明。

【二、啟動與部署】

# 安裝框架以來
$ npm install

# 啟動本地開發(fā)環(huán)境，默認端口號：3000
$ npm run dev

# 編譯并在生產環(huán)境啟動
$ npm run build
$ npm run start

# 將網(wǎng)站打包成靜態(tài)化頁面
$ npm run generate

【三、框架結構】

詳細目錄結構介紹及使用，參照<a href='#six'>【六、其他規(guī)范與Q&A】</a>

-- 框架根目錄
  -- .nuxt        Nuxt運營和編譯自動生成
  -- dist         執(zhí)行Nuxt靜態(tài)化時生成
  -- api          全局通用的Api請求函數(shù)（非Nuxt提供）
  -- assets       靜態(tài)資源目錄，存放全局css、image等
  -- components   自定義組件目錄，此目錄下組件無需引入，按需使用即可
  -- layout       布局文件，參考https://www.nuxtjs.cn/guide/views
  -- middleware   中間件，類似于路由守衛(wèi)
  -- modules      模塊，用于設置全局監(jiān)聽等，參考https://www.nuxtjs.cn/guide/modules
  -- pages        頁面目錄，Nuxt會根據(jù)此目錄自動生成路由，參考https://www.nuxtjs.cn/guide/routing
  -- plugins      插件目錄，自定義各種插件，參考https://www.nuxtjs.cn/guide/plugins
   > global.js    (全局變量與全局方法)
   > plugin.js    (全局引入第三方組件)
   > request.js   (全局請求封裝)
   > filter.js    (全局過濾器封裝)
   > util.js      (全局工具函數(shù)封裝)
   > all.client.js(僅在客戶端執(zhí)行插件，暫時替代原app.vue)
     
  -- static       不需要webpack編譯的靜態(tài)文件，一般存放ico等文件
  -- store        Vue狀態(tài)樹，與原寫法有所不同，參考https://www.nuxtjs.cn/guide/vuex-store
  -- utils        工具類包 （非Nuxt提供）
  .editorconfig   
  .gitignore
  env.js          環(huán)境變量配置，分dev、test、pro三種環(huán)境
  nux.config.js   Nuxt的所有配置項，參考https://www.nuxtjs.cn/api/configuration-build
  package-lock.json
  package.json
  README.md       框架使用文檔
  ReleaseNote.md  版本更新說明

【四、生命周期】

-- Nuxt完整生命周期
  【服務端渲染】
    -- 全局
  nuxtServerInit    第一個：nuxt中第一個運行的生命周期
  RouteMiddleware   第二個：中間件，類似于原框架的路由導航守衛(wèi)
    -- 組件
  validate          是用來校驗url參數(shù)符不符合
  asyncData         Nuxt專屬生命周期，可用于數(shù)據(jù)請求，只有page可用，子組件內部不可用
  beforeCreate      Vue生命周期，但是服務端會執(zhí)行（不可用于數(shù)據(jù)請求，數(shù)據(jù)請求相關操作會在客戶端執(zhí)行）
  created           Vue生命周期，但是服務端會執(zhí)行（同上）
  fetch             Nuxt專屬生命周期，可用于數(shù)據(jù)請求， page和子組件都可用 
  
  【客戶端渲染】
    -- 全局
  * `@/plugins/all.client.js` (并非Nuxt生命周期，是只在客戶端運行的插件。此框架中用于暫時替代原框架中在App.vue中進行的全局初始化操作。)
    -- 組件
  beforeCreate
  created
  beforeMount
  mounted
  ... (其他Vue后續(xù)生命周期)

幾點說明：

beforeCreate/created 是Vue的生命周期，但是會在服務端和客戶端各執(zhí)行一次，但這兩個鉤子，僅供了解，不能用于數(shù)據(jù)請求。
asyncData和fetch都是Nuxt提供的生命周期，都可用于數(shù)據(jù)請求。只是寫法略有不同（參考后續(xù)章節(jié)<a href='#five'>【五、數(shù)據(jù)請求】</a>）。
@/plugins/all.client.js 并非Nuxt生命周期，是只在客戶端運行的插件。但是Nuxt框架去掉了app.vue，此插件的生命周期，近似于原來的app.vue，故暫時用于替代原框架中在App.vue中進行的全局初始化操作（是否恰當暫時不知）。

<a name='five'>【五、數(shù)據(jù)請求】</a>

1. 數(shù)據(jù)請求鉤子

1.1 鉤子相關說明

asyncData和fetch都是Nuxt提供的生命周期，都可用于數(shù)據(jù)請求，都會在服務端預請求數(shù)據(jù)進行組裝；
asyncData只能在pages級別的頁面中調用，在子組件內部不能調用；fetch則可以同時在頁面和子組件中調用；
官方建議數(shù)據(jù)請求均采用asyncData，但為了保持與老框架寫法的一致，本框架暫時建議采用fetch（后果未知）
fetch請求相比于asyncData的已知缺陷有：
- ① 數(shù)據(jù)請求較慢，本框架Demo，從index頁進入Detail頁，當使用fetch請求時，可明顯看到瀏覽器選項卡的title出現(xiàn)一瞬間undefined
盡管beforeCreate/created也可以在服務端渲染，但是這兩個鉤子的數(shù)據(jù)請求操作只會在客戶端執(zhí)行，原則上不用于頁面初始化。

1.2 asyncData

asyncData 中不能訪問this，但是可以在第一參數(shù)中，拿到context上下文，使用context.app訪問Vue根示例；
- context上下文還包含store、route、params、query等數(shù)據(jù)，詳見context上下文
asyncData中無法拿到組件實例（this），不能訪問組件實例中的data method等方法。
詳細介紹：asyncData
【請求示例】

// ① 使用return返回的對象，將直接初始化到組件`data`中
async asyncData({app, params}) {
    const { code, data } = await app.$get('/policy/findById/'+params.id)
    return {detail: data}
},
// ② return一個Promise，將在Promise執(zhí)行完成后，將數(shù)據(jù)初始化到組件`data`中
asyncData({app, params}) {
    return app.$get('/policy/findById/'+params.id).then(res => {
      return {detail: data}
    })
},
// ③ 第二個參數(shù)為callback回調函數(shù)，可直接傳入數(shù)據(jù)，初始化到組件`data`中
asyncData({app, params}, callback) {
    app.$get('/policy/findById/'+params.id).then(res => {
      callback(null, {detail: data}) 
    })
},

1.3 fetch

fetch 分兩種情況（新版本后支持第二種情況）：
- ① 第一個參數(shù)接受context上下文，則與asyncData一樣，不能訪問this和組件實例；（這種情況，也不支持像asyncData一樣通過return或者回調函數(shù)修改data內容）
- ② 不接受任何參數(shù)時，則可以正常訪問this。（可以近似的看成created的用法，區(qū)別是必須要使用await 或者return一個primary）
詳細介紹：fetch英文文檔（中文文檔嚴重延遲，存在錯誤）
【請求示例】

// ① 使用return返回一個Promise
fetch() {
    return this.getDetail()
},
// ②  使用await/async
async fetch() {
    await this.getDetail()
},
methods: {
    // ① 使用await編寫methods方法
    async getDetail(id){
        const { code, data } = await this.$get('/policy/findById/'+this.$route.params.id)
        this.detail = data
    }
    // ② 使用return Promise編寫methods方法
    getDetail(id){
        return this.$get('/policy/findById/'+this.$route.params.id).then(resw => {
          this.detail = res.data
        })
    }
}

2. 數(shù)據(jù)請求方式

2.1 【框架推薦】使用vue實例直接調用

本框架會將$request/$get/$post掛在到vue根示例，建議直接只用this或上下文context.app調用
【請求示例】

// 以this調用為例，如果是在`asyncData`中，需要使用上下文`context.app`調用
// ① get
this.$get('/policy/findById/'+this.$route.params.id)
// ②  post
this.$post('/policy/findAll/',{page:1,size:10,params:{}})
// ③  request
this.$request({
    url: '/policy/findAll/',
    method: 'post',
    data: {page:1,size:10,params:{}}
})

2.2 兼容老框架的api分離式調用

本框架推薦使用五 2.1的方式調用，但是也兼容了老框架的api分離式調用，用于提取可復用的公共請求。
公共請求的api文件，統(tǒng)一放在@/api/*.js管理。
【請求示例】

/**
 * @/api/index.js
 */ 
import request from '@/utils/request'
export function getPageList(data) {
    return request.post('/policy/findAll', data)
}
/**
 * @/pages/index.vue
 */ 
import { getPageList } from "@/api/index.js"
export default {
    fetch() {
        return this.getPageList(this.pageDto)
    },
    methods: {
        getPageList(pageDto) {
            return getPageList(pageDto).then(res => {
              this.pageList = res.data.result
            })
        }
    },
}

3. 其他注意事項

原則上，所有初始化渲染數(shù)據(jù)的請求，都要在服務端渲染函數(shù)（asyncData或fetch）中進行，極個別無法在服務端渲染的請求，可以在Vue的生命周期(created或mounted)中初始化；
服務端渲染的生命周期（即asyncData/fetch），不能使用任何瀏覽器專屬的對像（如DOM對象），也就是document和window，以及window的各種對象和方法，例如setTimeout、setInterval、localStorage、sessionStorage等；
有上述需求的初始化邏輯，可以放到created或mounted中初始化。

<a name='six'>【六、其他規(guī)范與Q&A】</a>

1. 關于`pages`

本框架路由采用約定式路由，即不再使用route.js進行路由聲明，而是由框架根據(jù)pages目錄自動生成路由，詳見路由
文件夾或者文件，如果以_開頭，表示此為動態(tài)路由，可以傳入不同參數(shù)，在組件內容，可以使用上下文或者this.$router取到路由參數(shù)；
- 例如: /pages/news/detail/_id.vue、/pages/news/detail/_id/index.vue
- 訪問: http://domain.com/pages/news/detail/12345 （上述兩種寫法均為這一路徑）

【注意】

① 使用_id.vue的寫法，表示id為可選參數(shù)，即可以通過http://domain.com/pages/news/detail訪問。如果要對id進行限制或驗證，可以在組件內使用validate()驗證；
② 使用/_id/index.vue的寫法，表示id為必選參數(shù)，訪問http://domain.com/pages/news/detail會報404。如果只要求id必填，而沒有其他格式限制，可以使用此方式。
③ validate()驗證示例

// return true表示驗證通過，return false表示驗證失敗 404
validate({ params }) {
    return /^\d+$/.test(params.id)
},

2. 關于`plugins`

用于自定義框架所需的各種插件，聲明插件后在nuxt.config.js中引入插件即可，類似于原框架main.js相關功能。詳見插件
框架已有的插件包（具體用戶參照各插件的頂部注釋）：
- plugin.js用于全局引入各種npm包；
- global.js用于聲明全局變量與全局方法；
- request.js實現(xiàn)了全局請求封裝（對應@/utils/request.js）;
- filter.js實現(xiàn)了全局請求封裝（對應@/utils/filter.js）;
- util.js實現(xiàn)了全局請求封裝（對應@/utils/util.js）;
- all.client.js只在客戶端引入，用于替代原框架中app.vue中的各種初始化操作；
其他插件可根據(jù)需要自行定義，*.js表示服務端客戶端均導入；*.client.js表示僅在客戶端導入；*.server.js表示只在服務端導入；

3. 關于`layout`

用于定義框架中的各種布局文件，可根據(jù)需要自行定義，詳見布局與視圖
默認視圖為default.vue，默認所有頁面都將調用；error.vue是錯誤視圖，當頁面出現(xiàn)問題時，自動調用；
其他視圖，可根據(jù)需要自行定義，并在組件內部聲明引用。
【組件調用示例】

export default {
    // 需要調用的視圖名稱，不寫默認調用default.vue
    layout: 'onlyBody',
    data(){
      return {}
    }
}

4. 關于`components`

用于定義框架中的各種自定義組件，可根據(jù)需要自行定義。
自定義組件中的數(shù)據(jù)，一般應從頁面?zhèn)魅?，如果需要再組件內部獲取數(shù)據(jù)，應該使用fetch（子組件中不支持asyncData）。
components中聲明的各種組件，在使用時，無需import導入。直接使用組件名按需調用即可。
【使用示例】

<template>
  <div>
    // Header組件
    <Header />
  </div>
</template>

5. 關于`store`

store文件夾為Nuxt提供用于定義Vuex狀態(tài)樹的文件夾，詳細文檔參照：Vuex狀態(tài)樹。
此文件夾下面的xxx.js，分別表示一個模塊，例如index.js對應$store.state.xxx，而user.js對應$store.state.user.xxx
本框架中store中模塊的定義與普通Vue框架大體相同，只是Nuxt框架會自動引用Vuex并加載到構建配置重，無需我們自己new Vuex()
【使用示例】

/**
 * 【注意區(qū)別】
 * state mutations action不再是包裹在一個對象中，并在new Vuex()的時候傳入。 而是分別作為單獨模塊使用export導出即可。
 */
export const state = () => ({
    counter: 0
})
export const mutations = {
    increment(state) {
        state.counter++
    }
}

6. 關于`middleware`

middleware是框架中用于聲明中間件的文件夾，聲明后在nuxt.config.js中配置中間件即可，詳細文檔參照：中間件。
@/middleware/router.js為已經升級聲明好的路由守衛(wèi)中間件，可替代原框架中router.beforeEach中的路由守衛(wèi)功能；

7. 關于`modules`

用于自定義模塊的文件夾，可以在模塊中對Nuxt啟動部署的各種生命周期設置監(jiān)聽，詳細文檔參照：模塊。
@/modules/generator.ts實現(xiàn)了一個對靜態(tài)化結束generate:done時進行監(jiān)聽并處理的示例。

const generator: any = function () {
    this.nuxt.hook('generate:done', (context: any) => {
        // TODO samething
    })
}
export default generator

類似this.nuxt.hook('generate:done',() => {})的Nuxt框架hooks還有很多，例如：ready、error、render:before、build:compile等等……詳細參見INTERNALS

<a name='six-8'>8. 其他`Q&A`</a>

1）每個頁面，必須使用head設置title，必要時還需在詳情頁設置description。（！??！切記?。。。?/h4>

export default {
    head() {
        return {
            // title必須設置！?。?列表可以直接寫“xxx列表”，詳情頁等有不同標題的，要用新聞標題、商品標題等作為title前綴。
            title: this.detail.title + '_新聞詳情',
            meta: [
                // 詳情頁，需要設置不同的description。 this.$getDesc 為全局封裝的從富文本中截取100字符的description
                { hid: 'description', name: 'description', content: this.$getDesc(this.detail.details) },
            ],
        }
    }
}

2）`pages`目錄中的層級結構，務必按照功能梳理清楚，比如`“news（新聞）”`的列表、詳情都要在一個文件夾中。

（?。?！目錄結構一旦確定，原則上不可再調整?。。。?lt;/b>

3）框架中的其他重要文件之【`CSS`篇】！！

框架各種css文件，位于@/assets/css/中?？蚣芡扑]使用scss語言，使用"sass": "~1.32.13"進行編譯；
common.scss 為全局公共CSS，請將全局樣式表聲明于此?；蜃孕卸xCSS文件，并在此文件中import導入；
font.scss 用于定義本框架各種字體、圖標庫等；
variables.scss 聲明了框架的各種全局Scss變量，可以在所有頁面使用。
- 注意：全局主題色，請用$mainColor表示，不要在各自文件中自行聲明！
element-variables.scss 是ElementUI的主題聲明文件，如需全局調整ElementUI的配色，請在此調整；

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

基于NUXT.JS搭建一款VUE版SSR前端框架（解決SPA應用的SEO優(yōu)化優(yōu)化問題）

基于NUXT.JS搭建一款VUE版SSR前端框架（解決SPA應用的SEO優(yōu)化優(yōu)化問題）

小仙男·言在前

【一、框架概述】

1、框架介紹

2、開發(fā)環(huán)境

3、分支要求

3、關于本文檔

4、框架版本更新

【二、啟動與部署】

【三、框架結構】

【四、生命周期】

幾點說明：

<a name='five'>【五、數(shù)據(jù)請求】</a>

1. 數(shù)據(jù)請求鉤子

1.1 鉤子相關說明

1.2 asyncData

1.3 fetch

2. 數(shù)據(jù)請求方式

2.1 【框架推薦】使用vue實例直接調用

2.2 兼容老框架的api分離式調用

3. 其他注意事項

<a name='six'>【六、其他規(guī)范與Q&A】</a>

1. 關于`pages`

【注意】

2. 關于`plugins`

3. 關于`layout`

4. 關于`components`

5. 關于`store`

6. 關于`middleware`

7. 關于`modules`

<a name='six-8'>8. 其他`Q&A`</a>

2）`pages`目錄中的層級結構，務必按照功能梳理清楚，比如`“news（新聞）”`的列表、詳情都要在一個文件夾中。

3）框架中的其他重要文件之【`CSS`篇】！！

4）（未完待續(xù)…）其他任何框架問題，詳詢小仙男

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

基于NUXT.JS搭建一款VUE版SSR前端框架（解決SPA應用的SEO優(yōu)化優(yōu)化問題）

小仙男·言在前

【一、框架概述】

1、框架介紹

2、開發(fā)環(huán)境

3、分支要求

3、關于本文檔

4、框架版本更新

【二、啟動與部署】

【三、框架結構】

【四、生命周期】

幾點說明：

<a name='five'>【五、數(shù)據(jù)請求】</a>

1. 數(shù)據(jù)請求鉤子

1.1 鉤子相關說明

1.2 asyncData

1.3 fetch

2. 數(shù)據(jù)請求方式

2.1 【框架推薦】 使用vue實例直接調用

2.2 兼容老框架的api分離式調用

3. 其他注意事項

<a name='six'>【六、其他規(guī)范與Q&A】</a>

1. 關于pages

【注意】

2. 關于plugins

3. 關于layout

4. 關于components

5. 關于store

6. 關于middleware

7. 關于modules

<a name='six-8'>8. 其他Q&A</a>

2）pages目錄中的層級結構，務必按照功能梳理清楚，比如“news（新聞）”的列表、詳情都要在一個文件夾中。

3）框架中的其他重要文件之【CSS篇】！！

4）（未完待續(xù)…）其他任何框架問題，詳詢小仙男

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

【一、框架概述】

1、框架介紹

2、開發(fā)環(huán)境

3、分支要求

3、關于本文檔

4、框架版本更新

【二、啟動與部署】

<a name='five'>【五、數(shù)據(jù)請求】</a>

2.1 【框架推薦】使用vue實例直接調用

<a name='six'>【六、其他規(guī)范與Q&A】</a>

1. 關于`pages`

2. 關于`plugins`

3. 關于`layout`

4. 關于`components`

5. 關于`store`

6. 關于`middleware`

7. 關于`modules`

<a name='six-8'>8. 其他`Q&A`</a>

2）`pages`目錄中的層級結構，務必按照功能梳理清楚，比如`“news（新聞）”`的列表、詳情都要在一個文件夾中。

3）框架中的其他重要文件之【`CSS`篇】！！

4）（未完待續(xù)…）其他任何框架問題，詳詢小仙男