vue服务渲染框架nuxtjs

by: kelen / 2017-05-14


nuxtjs简介

nuxtjs是vuejs服务端渲染框架,是一个通用应用构建框架,利用它可以生成vuejs服务端渲染所需的所有配置,集成了vue全家桶,提供了满足日常开发的功能,例如异步数据加载、中间件支持、布局支持等

入门模板

通过模板 starter 或者通过 vue-cli 来创建项目的框架

vue init nuxt/starter <project-name>

在根目录,安装依赖并命令启动项目

$ cd <project-name>
$ npm install

接着通过以下命令启动项目:
$ npm run dev

nuxt generate

nuxt提供了基于 Vue.js 的应用提供生成对应的静态站点的功能,可以对 Vue.js 应用,生成对应的静态文件,整个项目都是静态文件,用来开发是向开发集成各种微服务

nuxt generate路由

例如一个用户列表页,对应的用户信息详情页,由于是静态化项目,在 Nuxt.js 执行 generate 命令时,动态路由 会被忽略

所以需要重新获取对应的用户 id 去生成对应的静态文件目录

nuxt.config.js

const axios = require('axios')

module.exports = {
  generate: {
    routes: function () {
      return axios.get('https://my-api/users')
      .then((res) => {
        return res.data.map((user) => {
          return '/users/' + user.id
        })
      })      
    }
  }
}