Nuxt.js comprehensive case

The goal of this chapter is to familiarize you with the use of nuxt.js through a simple example

start

Nuxt. Js’s official website

The installation

npm install --save nuxt
Copy the code

Then add to our package.json file:

"dev": "nuxt"
Copy the code

Pages directory

Create a simple page demo path: pages/index.vue

<template>
  <div>
    <head>
      <h1>Hello world!</h1>
    </head>
    <body>
      <div class="home">Home page</div>
    </body>
  </div>
</template>
<script>
export default {
  name: 'HomePage'.components: {},
  props: {},
  data () {
    return{}}}</script>
Copy the code

Ok, so let’s start the project and see how it works

Here our project initialization is ok

Importing a Page Template

The main objective of this summary is to accomplish the following:

  • Importing style resources
  • Configure the page layout components
  • Configuration page components

Importing style resources

This article’s resources: document path: www.nuxtjs.cn/guide/views

  • The fonts icon
<link href="https://cdn.jsdelivr.net/npm/[email protected]/css/ionicons.min.css" rel="stylesheet" type="text/css">
Copy the code
  • Google Fonts file
<link href="/ / fonts.googleapis.com/css?family=Titillium+Web:700 | Source + + Pro Serif: 400700 | Merriweather + Sans: 400700 | Source Sans + + Pro: Italic 400300600700300 italic, 400, 600 italic, 700 italic" rel="stylesheet" type="text/css">
Copy the code

Then we need to restart the service

Configure the page layout components

File: Create a Layout folder under Pages

<template>
  <div>
    <! Top navigation bar -->
    <nav class="navbar navbar-light">.</nav>
    <! -- / Top navigation bar -->

    <! -- Subroute -->
    <nuxt-child/>
    <! -- / subroute -->

    <! -- -- -- > at the bottom of the
    <footer>.</footer>
    <! -- / bottom -->
  </div>
</template>

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

<style>

</style>

Copy the code

Although the layout file is created, it is not what we want. We want the layout content to exist on the home page and on any page. Based on nuXT routing generation rules, we can also access the layout page by visiting localhost:3000/layout. So we still need to make some modifications

Modified routing

Here we use the extendRoutes property to poke me through the document

Adding a custom route:

nuxt.config.js

/** * nuxt.js configuration file */

module.exports = {
  router: {
    linkActiveClass: 'active'.// Customize routing table rules
    extendRoutes (routes, resolve) {
      // Clear routing table rules generated by nuxt.js based on the pages directory by default
      routes.splice(0)

      routes.push(...[
        {
          path: '/'.component: resolve(__dirname, 'pages/layout/'),
          children: [{path: ' '.// Default child route
              name: 'home'.component: resolve(__dirname, 'pages/home/')}]}])}},}Copy the code

This allows the page to be routed through the template

At this point, our simple nuxt.js simulation is over

【Demo address 】:gitee.com/liuyinghao1… If you’re interested, fork a copy and test it locally