Nuxt学习_基础知识（一）

文章学习来源，nuxt中文网

1. 安装nuxt

• 指令
  • npx create-nuxt-app t_nuxt
  • 或
  • yarn create nuxt-app f_nuxt
• 执行指令后按需选择添加自己所需要的相关依赖，若安装出现报错等问题
  • 清除npm、yarn缓存 npm cache clean --force yarn cache clean
  • 切换安装命令
  • 切换包管理工具
• cd t_nuxt -> npm run dev

2. 路由信息

• 无需配置路由信息，在pages下面创建文件自动生成对应的路由配置
• 若pages下面是文件夹/页面.vue，会识别成 /文件夹/页面.vue路径

2.1 根据目录生成路由信息

通过pages下面的目录结构，会自动生成对应的路由信息，无需单独设置路由文件并在其中定义规则，动态路由以下划线_为开头

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue

以上页面结构对应的路由信息是

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'
    },
        {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

你会发现动态路由，如果作为结尾出现，那么就是可选的，比如/users/:id?'，如果想将其设置为必选的，需要在其对应的目录下一级，创建一个index.vue文件，比如/:slug

2.2 路由参数校验

若我们想要在详情页中，规定了对应的详情页根据列表中具体的某个id来实现跳转，为了保障合法性，规定id只为纯数字类型，那么我们在对应动态路由页面可以对当前页面路由进行参数校验。

在对应动态路由页面增加validate方法，按照自定义规则对内容进行校验，如果校验结果为true，则正常运行与展示，如果返回结果为false，nuxt将自动加载错误页面

  validate({params}) {
    return /^\d+$/.test(params.id)
  },

3. 实现页面切换时的动画效果

3.1 nuxt.config.js 配置全局css文件

  css: [
    '@/assets/css/main.css'
  ],

3.2 全局css文件定义

• assets/css/main.css

.page-enter-active, .page-leave-active {
  transition: opacity 0.5s;
}
.page-enter, .page-leave-to /* .page-leave-active 在 <2.1.8 版本中 */ {
  opacity: 0;
}

.test-enter-active,
.test-leave-active {
  transition: opacity 0.5s;
}
.test-enter,
.test-leave-active {
  opacity: 0;
}

我们看到有两种动画过渡样式，page-X代表页面间切换默认的动画效果，若还有其他类型的切换效果，比如下面的test-X，我们可以在对应页面中进行配置

export default {
	transition: 'test'
}

3.3 页面跳转

• <nuxt-link to="/">返回首页</nuxt-link>
• this.$router.push('/')

4. 路由中间件

中间件允许您定义一个自定义函数在一个页面或一组页面渲染之前，中间件放置在middleware目录下，文件名称就是中间件的名称，例如：我们可以在页面渲染前确认当前页面是否有访问权限。中间件可以修改context中的内容信息

4.1 定义中间件功能

export default function (context) {
  console.log(context, '获取到的context指的是什么')
}

4.2 全局应用中间件

全局中间件在nuxt.config.js中定义

export default {
  router: {
    middleware: 'globalSolve', // 中间件的名称就是定义中间件那个文件的文件名
  },
}

4.3 部分页面应用中间件

在页面中配置middleware

export default Vue.extend({
	middleware: 'auth',
})

4.4 中间件执行流程顺序

• nuxt.config.js
• 匹配布局
• 匹配页面

4.5 中间件异步执行

中间件可以异步执行，只需要返回一个Promise或使用第二个callback作为第一个参数

import axios from 'axios'

export default function ({ route }) {
  return axios.post('http://my-stats-api.com', {
    url: route.fullPath
  })
}

5. 视图布局

页面布局代码，放置在layouts文件夹中，常见的布局方式有导航栏、侧边栏、底部栏等等，我们可以在layouts中将不同类型的布局进行定义，在对应页面中进行引入

5.1 全局默认layouts

layouts布局分为全局和部分，layouts/default.vue为全局默认布局，在所有页面都自动应用，除非在页面的layout中定义了其他的layout，不配置的默认全部执行default.vue

layouts/default.vue

<template>
  <div class="flex">
    <div class="left">
      定义一个侧边栏吧
    </div>
    <div class="right">
      <nuxt /> // 表示布局中将自定义内容在此处显示，如若不加nuxt占位符，只会展示这个default.vue中的内容，不会展示对应路由页面文件中定义的内容
    </div>
  </div>
</template>
<style scoped>
.flex {
  display: flex;
}
.left {
  width: 300px;
  min-height: 100vh;
  background-color: aqua;
}
.right {
  flex: 1;
  background-color: antiquewhite;
}
</style>

5.2 自定义布局

全局有默认布局，但如果部分页面有其他的布局方式，可以在页面中设置layout来覆盖全局默认的布局方式

例如只有部分页面有header，我们在layouts/header.vue中定义header方式的布局

layouts/header.vue

<template>
  <div>
    <div class="top">
      顶部导航栏
    </div>
    <div>
      <nuxt />
    </div>
  </div>
</template>
<style scoped>
.top {
  height: 88px;
  width: 100vw;
  background-color: burlywood;
}
</style>

在对应使用页面中应用header布局方式
pages/xx.vue页面中

export default Vue.extend({
  name: 'IndexPage',
  layout: 'header',
})

5.3 错误页面

5.3.1 默认错误页面

当跳转过程中有发生错误页面时，可以有一个默认的全局错误页面，但如果在不同的错误情形中有一些自定义的错误展示时，此时我们可以通过定制错误模板传参数的方式实现自定义错误页面

layouts/error.vue

<template>
  <div>
    <h1>当前页面似乎发生了一些问题</h1>
    <nuxt-link to="/">返回至首页</nuxt-link>
  </div>
</template>

5.3.2 自定义错误页面

• layouts/error.vue 错误信息页面

<template>
  <div>
    <h1 v-if="error.statusCode === 404">页面未找到</h1>
    <h1 v-else>发生错误</h1>
    <nuxt-link to="/">返回首页</nuxt-link>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: ['error'],
  layout: 'error-layout'
})
</script>

• layouts/error-layout.vue 错误信息模板页面

<template>
  <div>
    <h1>公共错误页面头部</h1>
    <nuxt />
    <h1>公共错误页面底部</h1>
  </div>
</template>

5.4 页面

nuxt中page页面组件实际上是Vue组件，在nuxt.js中为这些页面中增加了一些新的配置项（对应了nuxt.js提供的功能特性），方便我们可以快速开发

5.5 注意事项

• 布局layout中一定要增加<nuxt />标签，标签所占的位置就是页面除了布局外其他定义的内容所在的位置，相当于slot，若无该标签，则所有页面都展示布局内容，其他内容无法显示

6.注意事项

• index页面无需路由拼接，直接/路径
• pages页面不可名称重复，识别重复不区分大小写
• <template>模板之间只有一个根标签
• 在页面中使用components组件，无需import，直接使用即可
• 在components中，若想对组件用文件夹分类，直接使用文件夹中页面.vue组件的名称即可完成使用，也无需import
• 使用this.$router.push等方法在TypeScript状态下会有警告，可以通过以下方法来进行解决

  import Vue from "vue";
  export default Vue.extend({
    methods: {
      backToHome() {
        this.$router.push('/')
      }
    }
  })
  

如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~