vue服务端渲染——基础

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

vue服务端渲染（基础）

1初始化一个项目

npm init -y 

2.安装vue以及服务端渲染的包

npm i vue vue-server-renderer --save

3.在package.json中配置项目环境，使开发时让nodemon为我们启动一个服务端服务器。通过npm run dev跑这个文件

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

4.创建server.js文件

const vue = require( " vue ' );
//第1步:创建一个 Vue实例
const app = new Vue({
template: `<div>hello</div>'
})
/第2步:创建一个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步:创建一个 Vue实例
const app = new Vue({
template: `<div>hello</div>'
})
/第2步:创建一个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)//监听服务器端口

Nuxt框架

基于vue的应用框架，极简的SSR框架，能快速开发基于VUE的SSR单页面应用，同时利于SEO优化。、

1.初始化项目

 npx create-nuxt-app .

文件目录结构

项目启动、打包

生命周期

SSR

服务端通过context访问上下文，但在服务端钩子函数中不能访问客户端的window对象，没有this

nuxtserverInit

在store 文件下创建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 状态管理树
route 路由信息
redirect 后端跳转
params  客户端携带参数
query 客户端数据
req 请求头
res  响应体
*/
// context服务端上下文
//全局守卫业务
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}){
//校验业务
console.log("validate")
return true;
},

asynData校验参数

写在页面级中pages文件夹下的index.vue

//读数据,返回给组件
asyncData(context){
//异步业务逻辑，读取服务端数据
console.log('asyncData')
return {
b:2
  }
},  

fetch校验参数

写在页面级中pages文件夹下的index.vue

//读数据, vuex
fetch({store}){
//异步业务逻辑，读取服务端数据提交给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(){}