文章目錄

• vue服務(wù)端渲染（基礎(chǔ)）
• Nuxt框架
• 文件目錄結(jié)構(gòu)
• 項目啟動、打包
• 生命周期
• • SSR
  • • nuxtserverInit
    • middleware 中間件
    • • 全局中間件
      • 頁面級中間件
    • validate 校驗參數(shù)
    • asynData校驗參數(shù)
    • fetch校驗參數(shù)
  • SSR,CSR
  • • beforeCreate,created即跑在服務(wù)端也跑在客戶端
  • CSR

nuxt官方文檔： https://www.nuxtjs.cn/guide

vue服務(wù)端渲染（基礎(chǔ)）

1初始化一個項目

npm init -y

2.安裝vue以及服務(wù)端渲染的包

npm i vue vue-server-renderer --save

3.在package.json中配置項目環(huán)境，使開發(fā)時讓nodemon為我們啟動一個服務(wù)端服務(wù)器。通過npm run dev跑這個文件

"scripts":{ "dev" : "nodemon ./server.js" }

4.創(chuàng)建server.js文件

const vue = require( " vue ' ); //第1步:創(chuàng)建一個 Vue實例 const app = new Vue({ template: `<div>hello</div>' }) /第2步:創(chuàng)建一個renderer const renderer = require( 'vue-server-renderer ' ).createRenderer(); //第3步:將 Vue實例渲染為HTML // renderer.renderToString(vue實例,(錯誤,渲染后的html)=>{}) renderer.renderTostring(app, (err,htm1)=>{ if(err) throw err; console.log(htm1) })在 2.5.0+，如果沒有傳入回調(diào)函數(shù)，則會返回Promise:(同第三步一樣的效果) renderer.renderTostring(app).then(htm1=>{ console.log(htm1) }).catch(err=>{console.log(err)})

搭建node服務(wù)器(最終頁面數(shù)據(jù))

• 安裝express

npm i express --save const vue = nequire( "vue " ); const server = require( "express ');//搭建node服務(wù)器 // express響應(yīng) 對服務(wù)器做根請求響應(yīng) server.get( ' / ',(req,res)=>{ //第1步:創(chuàng)建一個 Vue實例 const app = new Vue({ template: `<div>hello</div>' }) /第2步:創(chuàng)建一個renderer const renderer = require( 'vue-server-renderer ' ).createRenderer(); //第3步:將 Vue實例渲染為HTML renderer.renderTostring(app).then(htm1=>{ console.log(htm1) res.send(html)//將渲染的類容返回給客戶端 }).catch(err=>{console.log(err)})}) server.listen(3001)//監(jiān)聽服務(wù)器端口

Nuxt框架

基于vue的應(yīng)用框架，極簡的SSR框架，能快速開發(fā)基于VUE的SSR單頁面應(yīng)用，同時利于SEO優(yōu)化。、

1.初始化項目

npx create-nuxt-app .

文件目錄結(jié)構(gòu)

項目啟動、打包

生命周期

SSR

服務(wù)端通過context訪問上下文，但在服務(wù)端鉤子函數(shù)中不能訪問客戶端的window對象，沒有this

nuxtserverInit

在store 文件下創(chuàng)建index.js

export const actions = { nuxtserverInit(store, context){ //初始化東西到store當中 console.log( 'nuxtServerInit',store,context)} }

middleware 中間件

全局中間件

• 在nuxt.config.js中添加 中間件名

router:{ middleware : ' auth" }

• 中間件名需要在 middleware文件夾中去約定，定義一個auth.js模塊（nuxt運行時就會找到這個模塊）

export default ({istore, route, redirect, params,query ,req,res})=>{ //store, route, redirect, params,query ,req,res為上下文context的解構(gòu) /* store 狀態(tài)管理樹 route 路由信息 redirect 后端跳轉(zhuǎn) params 客戶端攜帶參數(shù) query 客戶端數(shù)據(jù) req 請求頭 res 響應(yīng)體 */ // context服務(wù)端上下文 //全局守衛(wèi)業(yè)務(wù) console.log('middleware nuxt.config outside')

頁面級中間件

在pages文件夾下建index.vue 寫入

<script> import Logo from '~fcomponents/Logo.vue ' export default { //middleware: "auth' middleware(){ console.iog("middleware pages")}, components: { Logo}, } </script>

validate 校驗參數(shù)

寫在頁面級中pages文件夾下的index.vue

//參數(shù)的有效性 validate({params ,query}){ //校驗業(yè)務(wù) console.log("validate") return true; },

asynData校驗參數(shù)

寫在頁面級中pages文件夾下的index.vue

//讀數(shù)據(jù),返回給組件 asyncData(context){ //異步業(yè)務(wù)邏輯，讀取服務(wù)端數(shù)據(jù) console.log('asyncData') return { b:2} },

fetch校驗參數(shù)

寫在頁面級中pages文件夾下的index.vue

//讀數(shù)據(jù), vuex fetch({store}){ //異步業(yè)務(wù)邏輯，讀取服務(wù)端數(shù)據(jù)提交給vuex console.log( 'fetch') }

SSR,CSR

beforeCreate,created即跑在服務(wù)端也跑在客戶端

寫在頁面級中pages文件夾下的index.vue

//SSR && CSR beforeCreate(){ console.log('beforecreate' ) }, created(){ console.log( 'created' ) },

CSR

運行在客戶端的生命周期函數(shù)可以訪問到window this 指向組件

//CSR beforeMount(){}, //掛載前 mounted(){},//掛載完畢 beforeUpdate(){},//跟新前 updated(){},//跟新后 beforeDestroy(){},//卸載前 destroyed(){},//卸載后 //服務(wù)端渲染 激活 失活 不存在 activated(){} deactivated(){}

總結(jié)

以上是生活随笔為你收集整理的vue服务端渲染——基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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