文章目錄

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

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

vue服務端渲染（基礎）

1初始化一個項目

npm init -y

2.安裝vue以及服務端渲染的包

npm i vue vue-server-renderer --save

3.在package.json中配置項目環(huán)境，使開發(fā)時讓nodemon為我們啟動一個服務端服務器。通過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+，如果沒有傳入回調函數，則會返回Promise:(同第三步一樣的效果) renderer.renderTostring(app).then(htm1=>{ console.log(htm1) }).catch(err=>{console.log(err)})

搭建node服務器(最終頁面數據)

• 安裝express

npm i express --save const vue = nequire( "vue " ); const server = require( "express ');//搭建node服務器 // express響應 對服務器做根請求響應 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)聽服務器端口

Nuxt框架

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

1.初始化項目

npx create-nuxt-app .

文件目錄結構

項目啟動、打包

生命周期

SSR

服務端通過context訪問上下文，但在服務端鉤子函數中不能訪問客戶端的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的解構 /* store 狀態(tài)管理樹 route 路由信息 redirect 后端跳轉 params 客戶端攜帶參數 query 客戶端數據 req 請求頭 res 響應體 */ // context服務端上下文 //全局守衛(wèi)業(yè)務 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 校驗參數

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

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

asynData校驗參數

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

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

fetch校驗參數

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

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

SSR,CSR

beforeCreate,created即跑在服務端也跑在客戶端

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

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

CSR

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。