如何用Nuxt.js构建项目,SSR官网项目搭建流程

SSR渲染

现在Vue，React，angular等三大框架引领的单页面应用大行其道，使用这单页面技术构建的项目比比皆是。这些流行的框架给我们带来的好处显而易见，不仅是开发，维护成本都大大地获得了优化。但是并不能说它是一个完美无缺的技术，其中还存在着首屏优化缓慢和不利于SEO等缺陷。那么如何解决这样的一个问题，从此就引入了SSR渲染的方案。

SSR服务器端渲染的大概含义指的就是，我们原本从服务器端获取到的页面静态代码，现在统一由后端先把数据渲染到页面上对应的位置后，再将页面组合成功后的Html页面返回给我们用户浏览器。这样子的操作类似于JSP和PHP前后端不分离所作的行为，通过模仿这样的行为，我们最终可以解决单页面带来的问题。

Nust.js

既然我们需要服务器端帮我们渲染页面，包括页面的数据，那么我们便需要使用官方给我们推荐的后端配套技术–node.js。造轮子的过程会耗费我们大量的时间精力，我们只需要用到服务器端渲染页面的一个功能，并没有打算用它来直接地对接数据和数据库，所以这样子的行为是可以被常规化的，于是乎我们的Nust.js应运而生。

通过Nust.js，我们可以不用花费大量精力去关注服务器端渲染的过程，只需要把工作的重心放在我们的前端页面开发，就如同开发一个Vue的项目一样去执行编码，最后在项目打包的时候，只要我们的配置项没有出现问题，就可以成功获取到一个服务端的应用包，其中就包裹了我们的前端项目。之所以能够像Vue一样去操作Nust，我们可以认为Nust只是对Vue的一个扩展提升，它就相当于Vue的一个框架。

开始一个Nust.js的项目

1.首先就像我们新建vue项目一样，在我们想要放项目的位置打开命令行工具，执行以下命令：

yarn create nuxt-app <项目名>

2.执行完新建的命令后，需要对以下的一些选项进行选择
①项目名称确认？
②JS or TS？
③包管理工具的选择
④UI框架的选择
⑤需要装载的一些模块
⑥编码规范工具的选择
⑦测试框架的选择
⑧服务器端渲染或者静态（静态就是一个单页面应用）
⑨部署目标，服务器端部署 or 静态部署
后面的不重要了，看就明白了，就是代码管理工具之类的东西

3.新建完项目，我们就可以得到一个全新的nuxt项目目录，如下：

4.以下是添加了部分可能所需的内容，构成的一个可能运行的整体项目。

其实整体上跟一个Vue项目是差不多，可能需要额外去注意到的点就是pages，layouts，components这几个文件夹和nuxt.config.js。

layouts：布局文件夹，可以编写我们的布局，相当于可以在view页面外再做一个整体的架构，加个全局的header和footer都行；
pages：该文件夹的vue文件相当于我们的每个页面，文件夹相当于我们的页面路径，项目在运行的时候会根据这个文件夹的结构去构建路由；
components：在此文件夹下定义的vue文件都会自动注册为我们的组件直接使用，可以关闭这个功能，在我们的nuxt.config.js中。

nuxt.config.js：整个项目的配置文件，可以配置一些参数，定义我们的页面meta还有引入全局文件等等。结构非常简单，一目了然。

引入一些官网常用的插件（推荐文章链接）

swiper：轮播插件
配置项目的swiper，按照步骤来就行
wow.js+animate:动画插件
Nuxtjs上使用wow.js+animate.css实现滚动加载动画

结语

前端的技术总是在与时俱进，我们需要不断去更新我们的技术栈，Vue的SSR在前端技术栈来说不一定是个必需品，当我们的后端技术是php和jsp的时候，我们完全可以达到同样的效果，只是过程可能相对有些不太顺手，或者说更趋近原生的代码对我们来说可能变得更加的陌生。所以如果想要舒舒服服地像用Vue一样去开发项目，同时也不用因为后端技术的局限而困扰，学习这门扩展性的框架还是有一定的帮助的。