Nuxt.js试用小结

Posted by ngtmuzi on 2017-09-04
班门弄斧

以下为个人使用Nuxt.js的一些体会总结,并不全面,并且该项目还在频繁更新中(目前是v1.0.0-rc8),文档/中文文档并不完善,可以在小项目中先试手

什么是Nuxt.js

Nuxt.js官网

Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。
我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

可以把它认为是更完善的vue开发脚手架,但比之脚手架它提供了更多概念上的抽象定义,也实现了一些更高级的特性诸如服务端渲染

安装

官方推荐使用vue-cli来安装

1
2
3
$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install

概念介绍

主要摘录和总结自官方文档,但由于文档/中文文档更新速度没更上代码的速度,可能有部分出入

页面(page)

本质是vue组件,其文件在pages目录中的所处的路径决定了在url中访问的路径,并且Nuxt.js在其中新增了一些新属性,官方文档

比较需要注意的就是asyncDatalayout,前者用于在显示页面前获取异步的数据,后者指定渲染的布局

asyncData方法

官方文档

page组件传入vue渲染前会调用asyncData方法,其接受Promise的返回,当然现在更好的选择是使用async/await特性,最终返回的结果会并入page组件的data属性中

注意该方法传递的第一个参数是Nuxt.js提供的该页面的context对象,其提供了不少常用的属性和方法,如判断当前渲染环境,以及路由跳转,跳到错误页面等,但比较神奇的一点是你除了在asyncData里,好像没法在别的地方找到这个context,我们可以在外部定义一个变量去指向它,以便在其他时候去使用(更坑的一点是,当使用服务端渲染时,前端是不会调用asyncData的,也就无法获得context

布局(layout)

在外部包裹page的布局主体(参考其他服务端渲染的框架如ejs),一些公共的,例如声明全局组件之类的语句可以放在这层

一些坑

以下为使用v1.0.0-rc6版本遇到的一些问题,不确定新版本是否有修复,或者是否是个人理解有误

服务端渲染

作为一个node后端开发,我至今无法在官方文档中找到一个简单明了的示例告诉我如何使用服务端渲染的功能,在官方的诸如expresskoa示例程序中,我能看到的只有类似app.use(nuxt.render)的这种写法,这意味着我们并不能像传统的服务端渲染框架(以ejs为例)那样,传递一个包含着所有服务端数据的对象(res.local)给render函数

据我的理解,Nuxt.js致力完成的是“通用”的vue框架,它想使这个框架无论是前端还是后端渲染,都使用同样的代码,也就是说它始终在asyncData函数中去获取数据,这使得我们原本的node后端连简单地传递一个内存变量都很难做到

这是非常坑的一点,当nuxt.config.js中的mode处于universal时(默认是这个),前后端都有可能调用asyncData函数,Nuxt.js的示例里充斥着axios模块的引用,只是因为它在浏览器和node都可以运行,换句话来说,万一我们在asyncData使用的模块并不支持浏览器/node环境,就会出现问题

因此我现在只将Nuxt.js视为一个前端spa应用脚手架(在nuxt.config.js中设置mode='spa'),而不会去用于服务端渲染,也只有在设置mode='spa'之后,我们才能使用nuxt generate来正确生成一个单页静态前端项目

plugins和modules

官方建议我们把会反复用到的模块写在plugins里,甚至还要指明哪些是仅限服务端用的,哪些是浏览器用的,但却没有具体示例指出具体用途,至今还是很难理解这个逻辑

最近的版本还出现了modules目录,看起来是用于放置服务端的模块,具体文档太少也无法理解

前端动态路由

我们应该这样理解:所有页面的路由逻辑都交给前端,如果后端找不到url对应的接口/文件(即匹配不到任何路由,需要返回404的时候),应该渲染首页,由前端来告诉用户该页面不存在(Nuxt.js内置了错误页面)

使用总结

个人用它结合ElementUI开发了一个简单的报表显示页面,不得不说预置layout+page的方式使得开发方便不少,但asyncData的运行环境问题还是一直在困扰我,最终还是抛弃了与印象中有很大出入的“服务端渲染”,设置mode='spa'来生成静态前端页面,将它视为一个高级脚手架来用还是很不错的

目前该项目还在频繁更新,尚未发布正式版1.0,文档更新滞后且稍显混乱,部分细节没有介绍,因此目前不建议用于正式项目