使用Nuxt

Nuxt.js文档：​​https://zh.nuxtjs.org/guide/​​

开始

初始化Nuxt项目

npx create-nuxt-app <项目名>

// or

yarn create nuxt-app <项目名>


运行

npm run dev


路由

基础路由

Nuxt.js依据 ​​pages​​ 目录结构自动生成 ​​vue-router​​ 模块的路由配置。

举例， ​​pages​​ 如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue


那么，Nuxt.js 自动生成的路由配置如下：

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'
    }
  ]
}


路由传参

由于在Nuxt.js中，不需要配置 ​​vue-router​​ ，路由配置完全依赖 ​​pages​​ 目录的结构。所以传参时也不例外。

在 ​​vue-router​​ 中，通过 ​​path: '/route/:param'​​ 定义参数，而在Nuxt.js中，通过 ​​_​​ 为前缀命名的Vue文件或目录。

通过 ​​$route.params.参数名​​ 取到参数值。

layout

在项目中，通常有一些组件，可以被多个页面复用，如 header、footer、nav 等，这些组件可以共同组成一个布局。

在Nuxt项目结构中，有 ​​/layouts​​ 文件夹，在这个文件夹中写布局文件。通常是引入 ​​/components​​ 里的组件，再加上 ​​<nuxt />​​。

举例：

<template>
  <div class="mLayout">
    <m-header />
    <!-- 这个是“坑”，使用了这个布局文件的页面生成的内容，将出现在下面的这个“坑”里面 -->
    <nuxt />
  </div>
</template>

<script>
// 需要注意的一个小细节 在Nuxt项目中 ~ 代表根目录
import mHeader from '~/components/mHeader.vue'

export default {
  components: {
    'm-header': mHeader
  }
}
</script>


在项目中使用Element-UI

安装element-ui

npm i element-ui -S


创建ElementUI.js

在 ​​/plugins​​ 文件夹下面，创建 ElementUI.js 文件。

import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)


在nuxt.config.js中添加配置

css: [
  'element-ui/lib/theme-chalk/index.css'
],
plugins: [
  // ssr: true表示这个插件只在服务端起作用
  {src: '~/plugins/ElementUI', ssr: true }
],
build: {
  // 防止element-ui被多次打包
  vendor: ['element-ui']
}


在项目中使用axios

安装axios

npm i axios -S


创建axios.js

在 ​​/plugins​​ 文件夹下面，创建 axios.js 文件。

import axios from 'axios'

// 设置baseURL
axios.defaults.baseURL = 'http://localhost:3301'

// 创建axios对象，暴露
export default axios.create()


在nuxt.config.js中添加配置

防止重复打包

build: {
  vendor: ['axios']
}


使用

在项目的任意一个Vue文件中，引入生成了的axios对象：

import axios from '~/plugins/axios'


如果没有事先创建axios.js，也可以直接引入axios模块来使用：

import axios from 'axios'


先创建axios.js，生成axios对象的好处是，可以做一些配置，如baseURL等。

SEO优化

全局

修改 nuxt.config.js 配置文件，项目生成的每一个 html 文件的 ​​<head>​​ 中都会加入此配置。

  head: {
    // title: pkg.name,
    title: '想被百度垂青的标题',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description },
      // 其它那些是本来就有的，加上的内容在这里
      {
        name: 'keywords',
        content:
          '很多个很多个关键词很多个很多个关键词很多个很多个关键词'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },


局部

某个 Vue 文件中：

<script>
export default {
  layout: 'mLayout',
  // SEO优化
  head () {
    return {
      title: '标题',
      meta: [
        {
          name: 'keywords',
          content: '很多个很多个关键词很多个很多个关键词很多个很多个关键词'
        }
      ]
    }
  }
}
</script>


马克Eslint的一个小坑

在Nuxt项目中，个人出现了Eslint抽风的情况，报了诸如 ​​Attribute "for" should be on a new line vue/max-attributes-per-line​​ 的error，并且eslint不能正确地格式化代码。

解决

修改 .eslintrc.js 文件的配置，在 ​​rules​​ 中加上以下配置，就不会报错了。

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