您当前的位置:首页 > 电脑百科 > 站长技术 > 服务器

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

时间:2019-09-25 10:20:14  来源:  作者:

什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端框架闹的,在这些框架没有出现之前,很多页面也都是服务器端渲染,然后ajax的出现让服务器的的工作一部分交给了前端,前端发请求,服务器端吐数据,增强了页面交互性,服务器端因此也不完全渲染页面了,也可以说只是渲染部分页面。

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

 

Vue更是厉害直接使用虚拟DOM,那么什么是虚拟DOM呢?

这么说吧,我们直接在html页面里写的都是真实的DOM元素,都是网络爬虫可以抓取到的。

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

 

如果你用js写的一段代码生成的DOM元素然后插进页面里去的,那么爬虫是抓取不到的,如果抓取不到那么seo怎么做呢?

所以说虚拟DOM的SEO是很渣很渣的。当如如果你不在乎seo那自然是无所谓的了。再说虚拟DOM也并非一无是处,它避免大量无谓的计算量,让页面显示速度更快。

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

 

如果在乎SEO那就的想想怎么才能对爬虫更友好,让广大网友更容易更快的找到你的网站,而不是其他人的。这对网站推广非常重要。

当然我们还是希望能够使用Vue的,那么Nuxt.js是你实现服务器端渲染SSR的首选框架了。

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

 

不做太多这个框架的介绍了,因为官网上的很详细了,总之是一个比较牛逼的团队他们Wie什么开发这个框架,做了哪些优化和配置,然后巴拉巴拉一堆吧。

本次我们重点聊下安装,带领大家做一次最初的体验,当然如果你还没有使用过Vue,那么可以先不看这篇文章了,等体验过了Vue的使用再过来读吧。

首先,你的开发系统中需要有Node环境,可以使用yarn或者 npm进行安装 ,最好再整一个 n (Node.js版本管理工具)

然后执行以下步骤

1.用npm来安装vue-cli这个框架,如果你已经安装过了,可以省略这步。

npm install vue-cli -g

多数情况下比较慢,建议使用cnpm进行安装。安装成功后可以使用

vue -V 

查看验证安装是否完成

然后使用官网提供的脚手架就可以完成项目搭建了

确保安装了npx(npx在NPM版本5.2.0默认安装了):

$ npx create-nuxt-App <项目名>

或者用yarn :

$ yarn create nuxt-app <项目名>

安装的过程中一般都让你选择用什么做为服务端语言 一般都会选koa,当然你也可以选其他的。然后选哪个UI 模板,一般的elementUI居多,还会问你要不进行服务端渲染,这么不是废话吗?完成之后执行

npm run dev 就会运行起来了。你会看到大概下面这样的一个网页,然后可以查看一下源代码,就会发现和之前的Vue不一样了吧,你的htm了都出现了

使用 Nuxt.js来实现Vue的SSR服务器端渲染之安装

 

抓紧玩儿起来。最后祝大家在像素世界里玩儿的开心。



Tags:Nuxt.js   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
官网:https://nuxtjs.org/github:https://github.com/nuxt/nuxt.js什么是Nuxt.js易于使用的Vue 框架,使用 NuxtJS 充满信心地构建您的下一个 Vue.js 应用程序。 一个 开源 框架...【详细内容】
2021-03-22  Tags: Nuxt.js  点击:(315)  评论:(0)  加入收藏
什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端...【详细内容】
2019-09-25  Tags: Nuxt.js  点击:(160)  评论:(0)  加入收藏
▌简易百科推荐
阿里云镜像源地址及安装网站地址https://developer.aliyun.com/mirror/centos?spm=a2c6h.13651102.0.0.3e221b111kK44P更新源之前把之前的国外的镜像先备份一下 切换到yumcd...【详细内容】
2021-12-27  干程序那些事    Tags:CentOS7镜像   点击:(1)  评论:(0)  加入收藏
前言在实现TCP长连接功能中,客户端断线重连是一个很常见的问题,当我们使用netty实现断线重连时,是否考虑过如下几个问题: 如何监听到客户端和服务端连接断开 ? 如何实现断线后重...【详细内容】
2021-12-24  程序猿阿嘴  CSDN  Tags:Netty   点击:(12)  评论:(0)  加入收藏
一. 配置yum源在目录 /etc/yum.repos.d/ 下新建文件 google-chrome.repovim /etc/yum.repos.d/google-chrome.repo按i进入编辑模式写入如下内容:[google-chrome]name=googl...【详细内容】
2021-12-23  有云转晴    Tags:chrome   点击:(7)  评论:(0)  加入收藏
一. HTTP gzip压缩,概述 request header中声明Accept-Encoding : gzip,告知服务器客户端接受gzip的数据 response body,同时加入以下header:Content-Encoding: gzip:表明bo...【详细内容】
2021-12-22  java乐园    Tags:gzip压缩   点击:(9)  评论:(0)  加入收藏
yum -y install gcc automake autoconf libtool makeadduser testpasswd testmkdir /tmp/exploitln -s /usr/bin/ping /tmp/exploit/targetexec 3< /tmp/exploit/targetls -...【详细内容】
2021-12-22  SofM    Tags:Centos7   点击:(7)  评论:(0)  加入收藏
Windows操作系统和Linux操作系统有何区别?Windows操作系统:需支付版权费用,(华为云已购买正版版权,在华为云购买云服务器的用户安装系统时无需额外付费),界面化的操作系统对用户使...【详细内容】
2021-12-21  卷毛琴姨    Tags:云服务器   点击:(6)  评论:(0)  加入收藏
参考资料:Hive3.1.2安装指南_厦大数据库实验室博客Hive学习(一) 安装 环境:CentOS 7 + Hadoop3.2 + Hive3.1 - 一个人、一座城 - 博客园1.安装hive1.1下载地址hive镜像路径 ht...【详细内容】
2021-12-20  zebra-08    Tags:Hive   点击:(9)  评论:(0)  加入收藏
以下是服务器安全加固的步骤,本文以腾讯云的CentOS7.7版本为例来介绍,如果你使用的是秘钥登录服务器1-5步骤可以跳过。1、设置复杂密码服务器设置大写、小写、特殊字符、数字...【详细内容】
2021-12-20  网安人    Tags:服务器   点击:(7)  评论:(0)  加入收藏
项目中,遇到了一个问题,就是PDF等文档不能够在线预览,预览时会报错。错误描述浏览器的console中,显示如下错误:nginx代理服务报Mixed Content: The page at ******** was loaded...【详细内容】
2021-12-17  mdong    Tags:Nginx   点击:(7)  评论:(0)  加入收藏
转自: https://kermsite.com/p/wt-ssh/由于格式问题,部分链接、表格可能会失效,若失效请访问原文密码登录 以及 通过密钥实现免密码登录Dec 15, 2021阅读时长: 6 分钟简介Windo...【详细内容】
2021-12-17  LaLiLi    Tags:SSH连接   点击:(16)  评论:(0)  加入收藏
相关文章
    无相关信息
最新更新
栏目热门
栏目头条