Nuxt.js 服务端渲染框架入门-一一网

这是我参与更文挑战的第19天，活动详情查看：更文挑战。

Nuxt.js 是什么

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

Nuxt.js 框架是如何运作的？

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

Vue 2
Vue-Router
Vuex (当配置了 Vuex 状态树配置项时才会引入)
Vue 服务器端渲染 (排除使用 mode: ‘spa’)
Vue-Meta

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

特性

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
es6 语法支持
支持 http/2推送
…

目录结构

-
|- static/ 静态文件目录，服务器启动的时候，该目录下的文件会映射至应用的根路径 /
|- assets/ 资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
|- layouts/ 布局
|- middleware/ 中间件
|- plugins/
|- components/ 组件目录，没有页面组件的 asyncData 方法的特性
|- pages/ 页面目录
|- nuxt.config.js 配置文件
|- app.html 模板
复制代码

路由

<template>
    <nuxt-link to="/">首页</nuxt-link>
</template>
复制代码

类似<router-link to="/">首页</router-link>

基础路由

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
复制代码

自动生成路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}
复制代码

动态路由

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
复制代码

对应的路由配置：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}
复制代码

视图

模板

定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件

默认模板：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
复制代码

布局

Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局。

默认布局

<template>
  <nuxt />
</template>
复制代码

自定义布局

blog.vue

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>
复制代码

使用自定义布局：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>
复制代码

异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData

asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。

注意：由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：

返回 Promise
使用 async/await
使用回调函数

Vuex 状态树

使用状态树

Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

引用 vuex 模块
将 vuex 模块加到 vendors 构建配置中去
设置 Vue 根实例的 store 配置项

Nuxt.js 推荐使用模块模式来使用 store：store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块（当然，index 是根模块）

文章版权归作者所有，未经允许请勿转载。

THE END

前端

浏览器中的Event Loop

次元壁纸v2.2.7 老司机二次元的图片天堂

前端网络进阶知识点

一个 Vuer 初学 React

记：用c#实现记事本

SysWhispers：如何通过直接系统调用实现AVEDR绕过

Nuxt.js 服务端渲染框架入门