浅谈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目前来说在大型项目中应用较少，只是比较适用于轻量级的，偏展现型的网站。