Nuxt.js

3. Run the flow chart

The following diagram illustrates the process of nuxt.js from a full server to rendering (the process of switching routes to render pages)

1. Use the official scaffolding create-NuxT-app

NPX create-nuxt-app < project name >Copy the code

After the execution, you are given a few choices

After the project is created, you will have the following directory structure (except for the selected ones that you added)

1. Assets

Like a Vue project, it is used to place uncompiled static resources such as LESS, SASS, or JavaScript.

2. Components

Component directory Components is used to organize vue.js components of an application. Nuxt.js does not extend and enhance vue.js components in this directory, that is, they do not have the asyncData method features of page components.

3. Layouts

The layouts directory is used to place the layout components of your application.

4. Middleware Directory

Middleware directory to place the project (not currently used)

5. Pages

Create application routes through the Pages directory. Nuxt.js will read all the. Vue files under Pages and automatically generate the corresponding route configuration, without manually adding routes

6. Plugins

Used to place plug-ins that are used before Vue instantiation.

7. Static Resource directory

As with the VUE project, it is used to store static resource files

8. Nuxt. Config. Js file

Set the application’s personalization Settings

routing

Nuxt.js automatically generates the route configuration of vue-Router module based on the Pages directory structure. Use labels between pages

1. Basic routes

<nuxt-link to="user"> Personal center </nuxt-link>Copy the code

If the Pages directory looks like this:

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
Copy the code

The route configuration generated by nuxt.js is as follows:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

Copy the code

pages/
--| user/
-----| _id.vue
--| index.vue
Copy the code

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user-id',
      path: '/user/:id?',
      component: 'pages/user/_id.vue'
    },
  ]
}
Copy the code

The plug-in

In the component lifecycle of Vue, only the beforeCreate and Created methods are called on the client and server side; the rest of the lifecycle runs only on the client side. If you want to use element-ui, create plugins/element-ui.js first:

import Vue from 'vue'
import Element from 'element-ui'
// import locale from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, { locale })

Copy the code

Then configure the plugins in nuxt.config.js as follows:

 plugins: [
 	{src:'@/plugins/element-ui',ssr:false,},
 ]
Copy the code

Global CSS

We can configure the CSS in nuxt.config.js as follows:

css: [
	'@/static/css/base.css',
]
Copy the code

1. Global configuration

Configure in nuxt.config.js

module.exports = { head: { script:[ { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}], link: [{rel:' stylesheet, href: 'https://fonts.googleapis.com/css?family=Roboto' } ] } }Copy the code

<template> <h1> </h1> <script> export default {head: {script: [{SRC: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'}], link: [{rel:' stylesheet, href: 'https://fonts.googleapis.com/css?family=Roboto' } ] } }Copy the code

The Window or Document object is undefined

Because there is no Winddow or Document on the server, and then some plug-ins use it, these client-only plug-ins can only be imported through the process.client variable.

if(process.client) {
	require('external_library')
}
Copy the code

☞Nuxt.js only records some of the problems encountered by the author.