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

什么是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了都出现了