Nuxt.js教程

Nuxt.js

Nuxt.js是一个基于Vue.js、Node.js、Webpack和Babel.js的免费且开放源码的web应用架构,该框架被宣传为“通用应用程序的元框架”。这里使用术语“通用”,其含义是该框架的目标是使用户能够利用熟悉的Vue.js单文件组件系统在JavaScript中创建Web视图,该系统既可以作为浏览器内单页面应用程序(SPA)视图,以及服务器呈现的Web视图,然后(在服务器呈现之后“rehydrated”到完整的SPA功能。

此外,该框架使用户能够在服务器上完全预呈现内容或部分内容,并以静态站点生成器的方式提供服务。

除了其他原因之外,与SPA相比,这种方法的好处是减少了交互时间和改进了SEO,因为在执行任何客户端JavaScript之前,Web服务器正在让每个页面的内容完整显示出来。另外,可以保持传统服务器端呈现的HTML页面的优点,以及改进的SPA的交互性和高级用户界面。

Nuxt.js框架本身的核心优势在于它使这些应用程序的配置和设置简化并且无缝地应用于程序开发人员,后者可以简单地开发应用程序的UI部分,就像它是一个更常见的Vue.js单个文件一样使用。

为什么要用Nuxt.js

Nuxt.js 是一个基于Vue.js的通用应用框架,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染,合成完整的html文件再输出到浏览器。

原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题。

vue单页面应用渲染是从服务器获取所需js,在客户端将其解析生成html挂载于id为app的DOM元素上,这样会存在两大问题。

  1. 由于资源请求量大,造成网站首屏加载缓慢,不利于用户体验。

  2. 由于页面内容通过js插入,对于内容性网站来说,搜索引擎无法抓取网站内容,不利于SEO。

Nuxt.js 官网