01 - server rendering technology

02-Nuxt. Introduction to JS

1, Installation and operation

Online installation method: Reference: https://zh.nuxtjs.org/docs/2.x/get-started/installation
We can directly unzip nuxt app zip

2, Page, navigation and routing

1. Page

Create the pages directory, and create the index in the pages directory vue

<template>
  <h1>Hello world!</h1>
</template>

Start project

npm run dev

Access project: http://localhost:3000/
Then create an about. In the pages directory The Vue page is used for later tests

<template>
  <h1>About us</h1>
</template>

Access page: http://localhost:3000/about

2. Navigation

Using tags can navigate between different pages in the program, which is equivalent to the role of < a > tags. In general, we use different routing addresses inside the connection program, and use < a > tags to connect the addresses outside the station.

pages/index.vue

<template>
  <div>
    
    <NuxtLink to="/about">
      About us
    </NuxtLink>
    <NuxtLink to="/lend">
      I want to invest
    </NuxtLink>
    <NuxtLink to="/user">
      User center
    </NuxtLink>
    <a href="http://atguigu. com" target="_ Blank "> Shang Silicon Valley</a>
      
    <h1>Home page</h1>  
  </div>
</template>

3. Automatic routing

In the vue project, we need to create pages and configure routes for each page, and Nuxt will automatically generate route configurations according to the pages in the pages path.
Basic route 1: / user points to pages / user Vue page

<template>
  <div>
    <h1>User center</h1>
  </div>
</template>
Basic route 2: /lend point pages/lend/index.vue page
<template>
  <div>
    <h1>List of investment products</h1>
    <NuxtLink to="/lend/1">
      Product 1
    </NuxtLink>
    <NuxtLink to="/lend/2">
      Product 2
    </NuxtLink>  
  </div>
</template>

Dynamic routing: / len / 1, len / 2, etc. point to pages / len/_ Id.vue page, and through this$ route. params. Id get dynamic path

<template>
  <h1>Investment products {{ id }}</h1>
</template>

<script>
export default {
  data() {
    return {
      id: null,
    }
  },

  created() {
    this.id = this.$route.params.id
  },
}
</script>

Nested Routing: if pages / user Vue and pages / user / index Vues exist at the same time. We can use nested routing
pages/user.vue

<template>
  <div>
    <h1>User center</h1>
    <NuxtLink to="/user">
      User information
    </NuxtLink>
    <NuxtLink to="/user/account">
      User account
    </NuxtLink>  
      
    <!-- user Routing exit of pages under directory -->  
    <NuxtChild />
  </div>
</template>

pages/user/index.vue

<template>
  <h1>User information</h1>
</template>
pages/user/account.vue
<template>
  <h1>User account</h1>
</template>

3, Layout layout

1. Default layout

If you want to have a unified page style, such as a consistent header and footer, you can use Layout. The default name of the Layout file is default Vue, put it in the layouts directory

Note: the newly created layout is applied after restarting the front-end server

layouts/default.vue

<template>
  <div>
    <Nuxt />
    <div>default footer</div>
  </div>
</template>

2. Custom layout
You can also customize Layout: layouts / my vue

<template>
  <div>
    <Nuxt />
    <div>my footer</div>
  </div>
</template>

Use the layout attribute in the page to specify the layout file: pages / user vue

<script>
export default {
  layout: 'my',
}
</script>

3. Restart service test

4, Configuration file

1,Meta Tags and SEO

We can do it in Nuxt config. JS, Nuxt will automatically generate the label of the website, which is also a necessary means of search engine optimization.

module.exports = {
  head: {
    title: 'Shang Rongbao',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'meta-key-words',
        name: 'keywords',
        content:
          'Shangrongbao official website_Listed companies on the New York Stock Exchange and online lending platform to solve the problems of personal small loans and short-term loans. Capital bank deposit and security.',
      },
      {
        hid: 'description',
        name: 'description',
        content:
          'Shangrongbao official website_Listed companies on the New York Stock Exchange and online lending platform to solve the problems of personal small loans and short-term loans. Capital bank deposit and security.',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
}

Note: / favicon ICO is placed in the static directory

2. Style

step1: create assets / CSS / main css

body {
  background-color: pink;
}

Step 2: in nuxt config. JS (same level as head)

css: [
    // CSS file in the project
    '~/assets/css/main.css',
],

3. Port number
In nuxt config. JS

server: {
    port: 3001, // default: 3000
},