Nuxt.js安装与使用

1.Nuxt.js 是什么？
Nuxt.js 是一个基于 Vue.js 的通用应用框架。
通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。
Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
流程图

2.安装

npx create-nuxt-app <项目名称>
 yarn create nuxt-app <项目名>

3.路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
要在页面之间使用路由，我们建议使用 标签。

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

（1）基础路由

<template>
  <div class="container">
    <div>
      <h1 class="title">
        首页
      </h1>
      <div class="wrap">
        <nuxt-link to="/Logo">登录 </nuxt-link>
        <nuxt-link to="/reg">注册</nuxt-link>
        <nuxt-link to="/user/two">two</nuxt-link>
        <nuxt-link to="/user/one">one</nuxt-link>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>

<style>

</style>

（2）嵌套路由
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
在父组件(.vue文件) 内增加 用于显示子视图内容。

 <div class="wrap">
        <nuxt-link to="/Logo">登录 </nuxt-link>
        <nuxt-link to="/reg">注册</nuxt-link>
        <nuxt-link to="/user/two">two</nuxt-link>
        <nuxt-link to="/user/one">one</nuxt-link>
        <nuxt-child  to="/users/_id" />
        <nuxt-child to="/users/index" />
      </div>