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

什么是SSR其实就是Server Side Render的简称,简单点说就是在服务器端填充数据,渲染页面然后吐到客户端来展示,为啥最近又开始提及服务器端渲染了呢?都是Vue啊,react 等等这些前端框

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

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

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

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

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

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

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

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

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

不做太多这个框架的介绍了,因为官网上的很详细了,总之是一个比较牛逼的团队他们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服务器端渲染之安装)由互联网用户自发贡献,该文观点仅代表作者本人,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件标题或链接至 service#hao123w.com ,本站将立刻删除。
(0)
上一篇 2019年9月3日 上午11:19
下一篇 2019年9月3日 下午12:59
hao123w, hao123生活号 - 让生活更简单!,更多信息请访问 http://www.hao123w.com/