Nuxt.js 综合案例

本章的目标是，通过一个简单的案例，让大家熟悉Nuxt.js的使用

起步

安装

npm install --save nuxt
复制代码

然后对我们的package.json文件上添加：

"dev": "nuxt"
复制代码

pages 目录

创建一个简单的页面demo
路径：pages/index.vue

<template>
  <div>
    <head>
      <h1>Hello world!</h1>
    </head>
    <body>
      <div class="home">首页</div>
    </body>
  </div>
</template>
<script>
export default {
  name: 'HomePage',
  components: {},
  props: {},
  data () {
    return {}
  }
}
</script>
复制代码

那这里就ok了，我们就先启动一下项目，查看一下运行效果吧

这里我们的项目初始化就ok了

导入页面模板

本小结的主要目标是完成如下的内容：

导入样式资源
配置页面布局组件
配置页面组件

导入样式资源

文档路径：www.nuxtjs.cn/guide/views
本文的资源：

字体图标

<link href="https://cdn.jsdelivr.net/npm/ionicons@2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
复制代码

谷歌字体文件

<link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
复制代码

然后我们要重新启动一下服务

配置页面布局组件

文件：pages 下创建 layout 文件夹

<template>
  <div>
    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-light">
     ...
    </nav>
    <!-- /顶部导航栏 -->

    <!-- 子路由 -->
    <nuxt-child/>
    <!-- /子路由 -->

    <!-- 底部 -->
    <footer>
    ...
    </footer>
    <!-- /底部 -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'LayoutIndex',
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style>

</style>

复制代码

虽然布局文件是创建好了，但是并不是我们需要的效果，我们希望不管是在首页、还是在任何页面，布局内容都可以存在，而且基于 nuxt路由生成规则，当前我们还可以通过访问localhost:3000/layout进行访问布局页面，所以我们还需要做一些改造

改造路由

这里我们使用extendRoutes属性，戳我看文档

添加自定义路由:

nuxt.config.js

/**
 * Nuxt.js 配置文件
 */

module.exports = {
  router: {
    linkActiveClass: 'active',
    // 自定义路由表规则
    extendRoutes (routes, resolve) {
      // 清除 Nuxt.js 基于 pages 目录默认生成的路由表规则
      routes.splice(0)

      routes.push(...[
        {
          path: '/',
          component: resolve(__dirname, 'pages/layout/'),
          children: [
            {
              path: '', // 默认子路由
              name: 'home',
              component: resolve(__dirname, 'pages/home/')
            }
          ]
        }
      ])
    }
  },
}
复制代码