文章目录

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中配置项目环境，使开发时让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(){}

vue服务端渲染——基础相关推荐

手把手教你 Vue 服务端渲染
写在前面在写这篇文章之前,我有写一篇 Vue 预渲染的教程以及在线示例,有需要的可以看一下~ [下面开始 Vue 服务端渲染] 服务端渲染 = SSR = Server-Side Renderi ...
SSR -- 服务端渲染基础
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读服务端渲染基础基本概述随着前端技术栈和工具链的迭代成熟,前端工程化.模块化也已成为了当下的主流技术方案,在这波前端 ...
Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
Vue 服务端渲染预渲染
文章目录简介那么什么是服务端渲染为什么使用服务端渲染服务端渲染 or 预渲染区别如何使用预渲染如何搭建一个预渲染开发环境 Tip 写在最后简介关于 Vue 的 SPA 说的已经太多 ...
vue服务端渲染之nuxtjs
前言本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同客户端 ...
java vue 服务端渲染_vue ssr服务端渲染小白解惑
vue ssr服务端渲染小白解惑 >初学ssr入坑初学vue服务端渲染疑惑非常多,我们大部分前端都是半路出家,上手都是前后端分离,对服务端并不了解,不说java.php语言了,连node服务都 ...
egg html模板,egg+vue服务端渲染模板项目介绍
egg-vue-webpack-boilerplate 基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目,包括前台系统(SSR MPA)和后台管理系统( ...
java vue 服务端渲染_vue服务端渲染缓存应用详解
服务端渲染简介服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲 ...
Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例
前言可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页(SPA)应用.用服务端渲染搭建项目比较少,本文是记录我在学习服务端渲染过程中的一些见解,如有出错或疏漏,麻烦帮忙 ...

vue服务端渲染——基础

文章目录

vue服务端渲染（基础）

Nuxt框架

文件目录结构

项目启动、打包

生命周期

SSR

nuxtserverInit

middleware 中间件

全局中间件

页面级中间件

validate 校验参数

asynData校验参数

fetch校验参数

SSR,CSR

beforeCreate,created即跑在服务端也跑在客户端

CSR

vue服务端渲染——基础相关推荐

最新文章

热门文章