Nuxt.js 综合案例

·  阅读 969
Nuxt.js 综合案例

Nuxt.js 综合案例

本章的目标是,通过一个简单的案例,让大家熟悉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了,我们就先启动一下项目,查看一下运行效果吧

image.png

这里我们的项目初始化就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/')
            }
          ]
        }
      ])
    }
  },
}
复制代码

这样我们就能让页面都可以在模板中路由中进行了

到这,我们简单的Nuxt.js的模拟就已经结束了

【Demo地址】:gitee.com/liuyinghao1… 有兴趣可以 fork 一份到本地测试一下

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改