浅谈NUXT - 基于vue.js的服务端渲染框架

Vue因其简单易懂的API、高效的数据绑定和灵活的组件系统，受到很多前端开发人员的青睐。国内很多公司都在使用vue进行项目开发，我们正在使用的简书，便是基于Vue来构建的。

我们知道，SPA前端渲染存在两大痛点：（1）SEO。搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息，使网站无法在搜索引擎中被用户搜索到。（2）用户体验。大型webApp打包之后的js会很庞大，于是就有了按模块加载，像require.js一样，异步请求。webpack盛行，就变成了代码分割。即便如此，受制于用户设备，页面初次渲染还是有可能很慢，白屏等待时间太长，对日益挑剔的用户群体来说，无法接受。

因此，对于那些展示宣传型页面，如官网，必须进行服务端渲染（SSR）。

Vue官方SSR文档的配置太过繁琐，需要对node和webpack有相当不错的使用经验，对于一个前端小白而言，官方推荐NUXT。

NUXT是一款基于vue的服务端渲染框架，跟React的NEXT异曲同工。暂时的版本是0.10.6，其github主页显示很快就会发布1.0版。

$ vue init nuxt/starter <project-name>  //nuxt快速启动模版

$ cd <project-name> //进入目录

$ npm install //安装依赖

$ npm run dev //运行

浏览器打开localhost:3000即可。

目录结构

pages文件夹：nuxt会自动将pages文件夹内的*.vue文件根据路径到对应路由。默认是index.vue。我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行。Nuxtjs 会监听pages文件夹下所有文件，当有文件变动时，浏览器对应的页面也会自动刷新，这极大的简化了我们开发的步骤。

配置文件

目录下的nuxt.config.js是我们唯一的配置入口，可以覆盖nuxt的默认配置。nuxt.config.js 的全部的配置如下:

cache：该配置项让你开启组件缓存策略以提升渲染性能。

loading：该配置项用于个性化定制 Nuxt.js 使用的加载组件。

css：该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。

plugins：该配置项用于配置那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件。

head：这里可以写入页面的meta信息

build：允许你在自动生成的vendor.bundle.js文件中添加一些模块，以减少应用 bundle 的体积

dev ：该配置项用于配置 Nuxt.js 应用是开发还是生产模式。

env ：该配置项用于定义应用客户端和服务端的环境变量。

generate：该配置项用于定义每个动态路由的参数。

rootDir ：该配置项用于配置 Next.js 应用的根目录。

srcDir：该配置项用于配置应用的源码目录路径。

transition：该配置项用于个性化配置应用过渡效果属性的默认值。

vuex：Nuxt.js 会尝试找到应用根目录下的store目录，如果该目录存在，它将做以下的事情：引用vuex模块，将vuex模块 加到 vendors 构建配置中去，设置Vue根实例的store配置项。

这些内容都可以在官网上找到，建议详细阅读官网文档及github仓库。

为什么选择使用NUXT做SSR？

1.配置非常简单：我们只需关注前端内容，不需要对服务端的内容了解很多就可以完成服务端渲染。

2.文档友好：开发文档通熟易懂，非常详细，内容完善。

3.无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装

4.内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件。

5.不用写路由，自动根据目录结构生成路由。

小结

框架本身还有很多地方需要优化，所以也只能踩一个坑补一个坑，有时间要多看看源码，改源码。

NUXT目前来讲在大型项目中应用较少，只是比较适用于轻量级的，偏展示型的网站。