Nuxtjs学习

---

官网介绍

关于 Nuxt.js

---

2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。

Nuxt.js 是什么？

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

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

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：nuxt generate ，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxtjs特性

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送*

Nuxtjs 和 Vue的区别

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

• nuxt nuxt 类似 router-view , nuxt-link 类似 router-link

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

• 项目入口 nuxt: 没有main.js入口文件，项目初始化的操作需要通过nuxt.config.js进行配置指定。 vue: /src/main.js，在main.js可以做一些全局注册的初始化工作；

• 网页渲染流程 vue: 客户端渲染，先下载js后，通过ajax来渲染页面； nuxt： 服务端渲染，可以做到服务端拼接好html后直接返回，首屏可以做到无需发起ajax请求；

• build后目标产物不同 vue: dist uxt: .nuxt

安装

$ npx create-nuxt-app <项目名>
//  或
$ yarn create nuxt-app <项目名>

目录结构

• 资源目录
  assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
• 组件目录
  components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
• 布局目录
  layouts 用于组织应用的布局组件。
• middleware 目录
  用于存放应用的中间件。
• 页面目录 pages
  用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
• 插件目录 plugins
  用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
• 静态文件目录 static
  用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
• store 目录
  用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
• nuxt.config.js
  文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

 <template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

举例

• pages 文件下

  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'
      }
    ]
  }

动态路由

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'
    }
  ]
}