Use Nuxt

Nuxt.js document: https://zh.nuxtjs.org/guide/

Start

Initialize Nuxt project

npx create-nuxt-app 

// or yarn create nuxt-app  

Run h3>

npm run dev

Routing

Basic routing

Nuxt.js is based on pages The directory structure automatically generates the routing configuration of the vue-router module.

For example, pages is as follows:

pages/
--| user/ -----| index.vue -----| one.vue --| index.vue < /span>

Then, the routing configuration automatically 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'}]}  

Routing parameters

Because in Nuxt.js, there is no need to configure vue-router, The routing configuration completely depends on the structure of the pages directory. So it is no exception when transferring parameters.

In vue-router, parameters are defined by path:'/route/:param', while in Nuxt.js, parameters are defined by _ Vue files or directories named by the prefix.

Get the parameter value through $route.params. parameter name.

layout

In a project, there are usually some components that can be reused by multiple pages, such as header, footer, nav, etc. These components can collectively form a layout.

In the Nuxt project structure, there is a /layouts folder, and layout files are written in this folder. It is usually to import the components in /components and add .

Example:

<template> <div class="mLayout"> <m-header />  <nuxt /> div> template> <script> // A small detail that needs attention is in the Nuxt project~ represents the root directoryimport mHeader from '~/components/mHeader.vue' export default {components: {'m-header': mHeader}} < /script > < /span>

Use Element-UI in the project

Install element-ui

npm i element-ui -S

Create ElementUI.js

Under the /plugins folder, create the ElementUI.js file.

import Vue from 'vue' < span class="hljs-keyword">import ElementUI from 'element-ui' Vue.use(ElementUI) 

Add configuration in nuxt.config.js

css: ['element-ui/lib/theme-chalk/index.css' ], plugins: [< span class="hljs-regexp">// ssr: true means this plug-in only works on the server side{src: '~/plugins/ElementUI', ssr: true} ], build: {// Prevent element-ui from being packaged multiple timesvendor: ['element-ui']} < /span>

Use axios in the project

Install axios

npm i axios -S

Create axios.js

Under the /plugins folder, create the axios.js file.

import axios from 'axios' < span class="hljs-comment">// Set baseURL axios.defaults.baseURL = 'http://localhost:3301' // Create an axios object and expose export default axios.create()  span>

Add configuration in nuxt.config.js

Prevent duplicate packaging

build: {vendor: ['axios']}  

Use

In any Vue file of the project, introduce the generated axios object:

import axios from '~/plugins/axios'  

If you did not create axios.js in advance, you can also directly import the axios module to use:

import axios from 'axios' 

First create axios.js to generate the axios object The advantage is that you can do some configuration, such as baseURL.

SEO optimization

Global

Modify the nuxt.config.js configuration file, the Will add this configuration in.

head: {
    // title: pkg.name, title: 'The title you want to be favored by Baidu', meta: [{charset: 'utf-8' }, {name: 'viewport', content: 'width=device-width, initial- scale=1' }, {hid: 'description', name: 'description', content: pkg.description }, // Others are already there, and the added content is here {name: 'keywords', content: 'Many, many keywords, many, many keywords, many, many keywords'} ], link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }] }, 

partial

In a Vue file:

<script> export default {layout: 'mLayout', // SEO optimization head () {return {title: 'title', meta: [{ name: 'keywords', content: 'many Many, many keywords, many, many keywords, many, many keywords'}]}}} script> < /span>

A small pit of Mark Eslint

In the Nuxt project, I personally experienced Eslint convulsion In case, an error such as Attribute "for" should be on a new line vue/max-attributes-per-line was reported, and eslint could not format the code correctly.

Resolve

Modify the configuration of the .eslintrc.js file and add the following configuration to rules, and no error will be reported.

'vue/max-attributes-per-line': [2, {singleline: 1, multiline: {max: 1, allowFirstLine: true}} ]