服务端渲染

最新推荐文章于 2024-06-17 09:18:10 发布

weixin_44889992

最新推荐文章于 2024-06-17 09:18:10 发布

阅读量276

点赞数 1

分类专栏： vue 文章标签：服务端渲染

本文链接：https://blog.csdn.net/weixin_44889992/article/details/90228884

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

什么是服务端渲染

概念：后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完成的html页面，再直接返回给浏览器，以便用户浏览
举例：服务端渲染案例页面

什么是客户端渲染

概念：数据由浏览器通过ajax动态取得，在通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染
举例：客户端渲染案例页面

服务端渲染 vs 客户端渲染

服务器端渲染需要消耗更多的服务器端资源（ cpu 内存等）
客户端渲染可以将静态资源部署到cdn上，实现高并发
服务器端渲染对SEO更友好

vue服务器端渲染的实现

网址： vue-SSR
安装依赖：
npm install vue vue-server-renderer --save
编写代码

// 第 1 步：创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步：创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
// 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
renderer
.renderToString(app)
.then(html => {
console.log(html)
})
.catch(err => {
console.error(err)
})

vue服务器端渲染的实现

如果使用单文件组件，需要配合webpack来使用
如果想了解服务器端的webpack配置，可以看这个官方提供的工程：服务器端webpack配置网址
下载官网提供的项目包
vs code安装插件来查看项目 @recommended

nuxt

网址： nuxt网址

1. Nuxt的使用

npm v5.2.0引入的一条命令（npx）,引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验
举例：使用express-generator创建项目
老方法：

npm install express-generator -g
express app

npx方式

npx express app

npx可以减少我们全局安装脚手架

2. nuxt 安装

我们使用脚手架 create-nuxt-app
避免全局安装，我们使用npx

npx create-nuxt-app app
npm i
cd app
yarn run dev

3. nuxt-目录结构

4. nuxt-配置 - nuxt.config.js

nuxt-配置：nuxt-配置
举例：配置 scss

// 1. 在assets 目录中新建css目录，在css目录中新建 main.scss 文件
main.scss
body: {
background: red;
}
// 2. 命令行安装loader
yarn add node-sass sass-loader scss-loader -D
// 3. 在 nuxt.config.js 文件中引入scss文件
css: [
'element-ui/lib/theme-chalk/index.css',
{
src: '@/assets/css/main.scss',
lang: 'scss'
}
],
//