web前端技术（主流前端技术讲解）

Vue.js是Web前端的一个框架，用来快速开发单页面应用。当Vue.js开发变成主流的时候，许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发。

但是当我们详细了解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的官方文档。