Nuxt.js基础

2022-03-10 本文已影响0人丽__

一、Nuxt.js是什么

一个基于Vue.js生态的第三方开源服务端渲染应用框架
他可以帮助我们轻松的使用vue.js技术栈构建同构应用
中文文档
GitHub仓库

二、Nuxt.js的使用方式

初始项目
已有的Node.js服务端项目
- 直接吧Nuxt当做一个中间件集成到Node Web Server 中
现有的Vue.js项目
- 非常熟悉Nuxt.js
- 至少百分之十的代码改动

三、从头开始新建项目

 mkdir <项目名>     // 创建文件夹
 cd <项目名> // 进入文件目录
npm init -y  // 初始化package.json文件
npm install --save nuxt   // 安装nuxt包

// 修改package.json 文件，创建命令
// 下面的配置使得我们可以通过运行 npm run dev 来运行 nuxt。
{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

创建第一个页面 pages/index.vue

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

运行

npm run dev
// 现在我们的应用运行在 http://localhost:3000 上运行

四、NuxtJS案例代码分支说明

git init  // 初始化本地仓库

创建 .gitignore 文件把不需要git管理的资源文件排除

node_modules
.nuxt

查看

git status

添加所有文件至暂存区

git add .

提交

git commit -m '初始化Nuxt.js项目'

创建分支

git branch 02-router

查看分支

git branch

切换分支

git checkout 02-router

五、Nuxt.js 基础路由

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

六、路由-路由导航

切换并且新建分支

git checkout -b 03-路由导航

a标签：它会刷新整个页面，不要使用
nuxt-link组件
https://router.vuejs.org/zh/api/#router-link-props
要在页面之间使用路由，我们建议使用<nuxt-link> 标签。

<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>

编程式导航
https://router.vuejs.org/zh/guide/essentials/navigation.html

methods:{
        onClick(){
            this.$router.push('/')
        }
    }

七、路由-动态路由

Vue Router 动态路由匹配
Nuxt动态路由
以下目录结构：

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

Nuxt.js 生成对应的路由配置表为：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.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 的路由路径带有 :id? 参数，表示该路由是可选的。如果你想将它设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

路由参数校验

export default {
  validate({ params }) {
    // 必须是number类型
    return /^\d+$/.test(params.id)
  }
}

如果校验方法返回的值不为 true或Promise中 resolve 解析为false或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。
想了解关于路由参数校验的信息，请参考页面校验 API。

八、路由-嵌套路由

Vue Router嵌套路由
Nuxt.js嵌套路由
你可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

假设文件结构如：

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

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

router: {
  routes: [
    {
      path: '/users',
      component: 'pages/users.vue',
      children: [
        {
          path: '',
          component: 'pages/users/index.vue',
          name: 'users'
        },
        {
          path: ':id',
          component: 'pages/users/_id.vue',
          name: 'users-id'
        }
      ]
    }
  ]
}

九、路由-路由配置

参考文档
根目录新建 nuxt.config.js 文件

/**
 * Nuxt 路由配置
 * base 自定义根目录名称  整个单页面应用的所有资源可以通过 /demo/ 来访问
 */
module.exports = {
  router: {
    base: '/demo/',
    // routes  :  一个数组  路由配置表
    // resolve  :  解析路由组建路径
    extendRoutes(routes, resolve) {
      routes.push({
        path: '/hello',
        name: 'hello',
        component: resolve(__dirname, 'pages/about.vue'),
      })
    },
  },
}

十、视图-模板

image.png

十一、视图-布局

自定义布局
layouts 目录中的每个文件 (顶级) 都将创建一个可通过页面组件中的 layout 属性访问的自定义布局。

假设我们要创建一个并将其保存到layouts/blog.vue:

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt />
  </div>
</template>

然后我们必须告诉页面 (即pages/posts.vue) 使用您的自定义布局：

<template>
  <!-- Your template -->
</template>
<script>
  export default {
    layout: 'blog'
    // 当前默认父组件为blog
  }
</script>

十二、异步数据 - asyncData

文档
基本用法
- 它会将asyncData 返回的数据融合组件data方法返回数据一并给组件
- 调用时机：服务端渲染期间和客户端路由更新之前
注意事项
- 只能在页面组件中使用,子组件中不能使用
- 没有this,因为它是在组件初始化之前被调用的

<template>
  <div>
    <h1>页面</h1>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "homePage",
  /**
   * 当你想要动态页面内容有利于SEO
   * 或者是提升首屏渲染速度的时候
   * 就在asyncData中发请求拿数据
   *
   * 拿到的数据最终会合并到data中
   */

  async asyncData() {
    const res = await axios({
      method: "GET",
      url: "http://localhost:3000/data.json",
    });
    return res.data;
  },
  /***
   * 如果是非异步数据或者普通数据
   * 则正常初始化到data中即可
   */
  data(){
    return{
      foo:'bar'
    }
  }
};
</script>

<style>
</style>

十三、异步数据 - 上下文对象

执行上下文- api

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <div>{{ article.body }}</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "articalPage",
  async asyncData(context) {
    const { data } = await axios({
      method: "GET",
      url: "http://localhost:3000/data.json",
    });

    // context.params.id  参数
    const id = Number.parseInt(context.params.id);
    return {
      article: data.posts.find((item) => item.id === id),
    };
  },
};
</script>

<style>
</style>