Nuxt.js基础

作者: 丽__ | 来源:发表于2022-03-10 17:46 被阅读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-路由导航
<template>
  <nuxt-link to="/">首页</nuxt-link>
</template>
methods:{
        onClick(){
            this.$router.push('/')
        }
    }

七、路由-动态路由

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 路由配置
 * 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>

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

<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>

相关文章

  • Nuxt.js SSR与权限验证

    原文Nuxt.js — SSR & Authentication Nuxt.js是一个建立在Vue.js基础上的服...

  • 用 Nuxtjs 写个单页面应用

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织,Nuxt.js ...

  • Nuxt.js基础

    Nuxt.js工作流 Nuxt.js目录 路由&示例 新建好即等于配置好 页面模版&示例 模版是layouts 异...

  • Nuxt.js基础

    一、Nuxt.js是什么 一个基于Vue.js生态的第三方开源服务端渲染应用框架 他可以帮助我们轻松的使用vue....

  • 关于nuxt.js

    Nuxt.js官网 什么是Nuxt.js? nuxt.js是一个基于Vue.js的服务端渲染应用框架, 同于基于r...

  • 【Nuxt.js 极速指南】进阶篇

    上接《【Nuxt.js 极速指南】基础篇》,这篇文章你将会学习到: 异步数据 资源文件 插件 命令 异步数据 Nu...

  • Nuxt.js教程(入门篇)

    目录一、路由二、视图三、异步数据四、插件 系列教程Nuxt.js教程(初识篇) 一、路由 1、基础路由 2、动态路...

  • 尝试在Nuxt.js v2.11.X中支持TypeScript和

    在Nuxt.js v2.11.0 中支持TypeScript和Express.js。 主要环境 Nuxt.js v...

  • NUXT.js

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,##Nuxt....

  • 【Nuxt.js 极速指南】基础篇

    这篇文章你将会学习到: 如何安装 Nuxt.js Nuxt.js 项目结构 配置 路由 视图 安装 新手可以通过 ...

网友评论

    本文标题:Nuxt.js基础

    本文链接:https://www.haomeiwen.com/subject/elptdrtx.html