但是当我们详细理解Vue.js往后，会创造一个很尴尬的问题，那便是Vue.js的页面是采取客户端渲染的，它不像PHP、JSP那样是做事器端渲染，搜索引擎无法收录网站的内容。
那有没有办法既能用上Vue.js，又能实现做事器端渲染呢？不用担心，Nuxt.js框架便是一个基于Vue.js的做事器端渲染方案。
一、客户端渲染和做事器端渲染的差异
两种渲染办法的差异在于：首次加载出来的页面中，是否含有数据。这里所说的数据，是指页面中详细的笔墨内容。
从下面这张图可以比较两种渲染办法的差异。
1.客户端渲染
客户端渲染的情形下，浏览器首次加载出来的是空的网页模板和JavaScript程序，这个页面是不包含数据的，数据须要通过Ajax再次要求做事器得到。此时用户会看到一个Loading加载提示页，或者是一个空缺页，等待数据加载完成后页面才会完全显示出来。
2.做事器端渲染
做事器端渲染时，浏览器首次加载出来的便是一个包含数据的完全页面，但这些数据并不是开拓职员手动填进去的，而是由做事器预先完成渲染（也便是把数据添补到网页模板中），把渲染结果返回给浏览器。这样用户会觉得到网页的打开速率很快，搜索引擎也能精确识别网页中的数据。
也便是说，做事器端渲染并不是什么新技能，以前的网页全都是做事器端渲染的，只不过用前端技能实现做事器端渲染有点困难。有了Nuxt.js框架往后，就很随意马虎实现了。
二、如何判断网页是不是做事器端渲染当我们在浏览器上打开网页后，单击鼠标右键，选择“查看网页源代码”，然后看一下源代码中是否包含数据。如果源代码中有数据，那么网页便是做事器端渲染的；如果源代码中没有数据，而页面中有数据的话，那么数据便是通过Ajax异步加载出来的，这样的网页便是客户端渲染。
三、快速体验Nuxt.js
Nuxt.js是事情在做事器真个，它依赖于Node.js。我们先确保Node.js已经安装了，然后我们利用npx命令来创建一个项目。这里我们假设安装到D:\demo命令下，创建一个nuxt-demo的项目。
（1）利用VS Code打开D:\demo目录。
（2）打开终端，实行命令，创建项目：
npx create-nuxt-app nuxt-demo
（3）在创建项目过程中，会讯问选择哪个包管理器，在这里选择利用npm：
? Choose the package manager (Use arrow keys)
Yarn
> Npm
（4）讯问选择哪个渲染模式，在这里选择利用SSR（代表做事器端渲染）：
? Choose rendering mode (Use arrow keys)
> Universal (SSR)
Single Page App
（5）安装配置完成后，启动项目，命令如下：
cd nuxt-demo
npm run dev
（6）通过浏览器访问http://localhost:3000/，查看启动后的项目。
四、目录构造
我们看一下Nuxt目录构造中的关键文件的浸染：
assets：存放待编译的静态资源，如Less、Sass。
static：存放不须要webpack编译的静态文件，做事器启动的时候，该目录下的文件会映射至运用的根路径“/”下。
components：存放自己编写的Vue组件。
layouts：布局目录，用于存放运用的布局组件。
middleware：用于存放中间件。
pages：用于存放运用的路由及视图，Nuxt.js会根据该目录构造自动天生对应的路由配置。
plugins：用于存放须要在根Vue运用实例化之前须要运行的JavaScript插件。
nuxt.config.js：用于存放Nuxt.js运用的自定义配置，以便覆盖默认配置。
关于Nuxt.js的先容就到这里了。实在Nuxt.js的利用还是非常大略的，但是在口试中，许多前端口试官都会提问这个技能点，大家想要深入学习的话可以参考Nuxt.js的官方文档。
