Nuxt.js

Nuxt.js

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

来个官方的说法

Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)

意思就是:Nuxt 是服务器呈现的简约应用程序的框架,通过对客户端和服务端基础架构的抽象,Nuxt.js 可以让开发者更专注于页面的UI渲染。作用就是在 node.js 上进一步封装,然后省去我们搭建服务端环境的步骤,只需要遵循这个库的一些规则就能轻松实现 SSR。

为什么使用nuxt.js?

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

  1. 由于资源请求量大,造成网站首屏加载缓慢,不利于用户体验。
  2. 由于页面内容通过js插入,对于内容性网站来说,搜索引擎无法抓取网站内容,不利于SEO。
    Nuxt.js 是一个基于Vue.js的通用应用框架,预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。可以将html在服务端渲染,合成完整的html文件再输出到浏览器。

除此之外,nuxt与vue还有一些其他方面的区别。

  1. 路由
    nuxt按照 pages 文件夹的目录结构自动生成路由
    vue需在 src/router/index.js 手动配置路由

  2. 入口页面
    nuxt页面入口为 layouts/default.vue
    vue页面入口为 src/App.vue

  1. webpack配置
    nuxt内置webpack,允许根据服务端需求,在 nuxt.config.js 中的build属性自定义构建webpack的配置,覆盖默认配置
    vue关于webpack的配置存放在build文件夹下

下图为关于nuxt的简单概述

图片来源:https://www.jianshu.com/p/b0626ba924c9

Vagrant中端口无法转发的终极解决方法

解决vagrant中的应用在宿主电脑上无法访问的情况。

Post Comment