vue服务渲染框架nuxtjs

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;
        });
      });
    },
  },
};