Nuxt.js的基本操作

最新推荐文章于 2025-04-17 16:29:40 发布

在校大三生

最新推荐文章于 2025-04-17 16:29:40 发布

阅读量265

点赞数

分类专栏： Nuxt.js ajax 文章标签： vue html js

本文链接：https://blog.youkuaiyun.com/qq_46160521/article/details/116461929

版权

Nuxt.js 同时被 2 个专栏收录

2 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文详细介绍了Nuxt.js的基础知识和使用方法，包括如何创建项目、启动和访问，以及Nuxt.js的目录结构和路由规则。重点讲解了Nuxt.js中的axios整合、 vuex状态管理和fetch数据预加载。同时，还展示了如何自定义axios插件以提高代码维护性。通过实例，读者可以全面了解Nuxt.js在Vue.js应用开发中的强大功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Nuxt.js?

1.Nuxt.js 是一个基于 Vue.js 的通用应用框架。
2.通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。
3.Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

Nuxt.js的基本使用

创建项目

下载

npx create-nuxt-app  项目名

在这里插入图片描述

启动

npm run dev

访问

http://localhost:3000

目录结构

目录：
在这里插入图片描述

别名：

assets 资源的引用：~ 或 @

<img src="~assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="~/assets/13.jpg" style="height:100px;width:100px;" alt="">
<img src="@/assets/13.jpg" style="height:100px;width:100px;" alt="">

static 目录资源的引用：/ 直接引用

<img src="/12.jpg" style="height:100px;width:100px;" alt="">

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
页面位置：项目/pages/… ，根据目录结构自动生成路由

––规则1：一一匹配
pages/user/one.vue -----> http://localhost:3000/user/one
––规则2：默认文件
pages/user/index.vue -----> http://localhost:3000/user
––规则3：动态路由，文件名以_开头
pages/user/_id.vue -----> http://localhost:3000/user/123

获得动态路由路径参数

this.$route.params.变量名

––规则4：动态命名路径
pages/user/_id.vue -----> http://localhost:3000/user/123
pages/user/_name.vue -----> http://localhost:3000/user/jack

<nuxt-link :to="{name:'user-id',params:{id:'123'}}">
<nuxt-link :to="{name:'user-name',params:{id:'jack'}}">

––规则5：默认路由
页面位置：pages/_.vue，其他路径都不匹配时，将执行本路由

视图

––默认布局：
页面位置：项目/layouts/default.vue
内容：<nuxt /> ，用于显示组件
––自定义布局：
编写布局页面：项目/layouts/名称.vue
内容：使用 <nuxt /> 确定组件显示位置
组件设置： layout: ‘名称’

<script>
  export default {
    layout: '名称'
  }
</script>

整合axios

前提下载项目时选中了第三方axios

普通整合版的axios

<template>
  <div>{{msg}} </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  async mounted() {
    // 页面加载成功后，发送ajax
    let { data } = await this.$axios.get('/service-consumer/feign/echo/abc')
    this.msg = data
  },
}
</script>
<style>

</style>

asyncData 发送ajax

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  async asyncData( context ) {
    // 发送ajax
    let { data } = await context.$axios.get('/service-consumer/feign/echo/abc')

    // 返回数据
    return {
      msg : data
    }

  },
}
</script>

<style>

</style>

asyncData 多次发送ajax

使用 Promise.all( 多次请求 )

export default {
    async asyncData( content ) {
        let [{数据:别名1},{数据:别名2}] = await Promise.all([ ajax请求1, ajax请求2])
        return {
            变量1: 别名1,
            变量2: 别名2
        }
    },
}
//如下：
async asyncData ( context ) {
    let [ { data : feignEcho } , { data : restEcho } ] = await Promise.all([
      context.$axios.get('/service-consumer/feign/echo/abc'),
      context.$axios.get('/service-consumer/rest/echo/abc')
    ])
    // 返回结果
    return {
      feignEcho,
      restEcho
    }
  }

vuex

vuex 作用：在组件之间共享数据
目标：在vuex中管理数据（存放数据、获取数据）
vuex 位置：项目/store/index.js

export const state = () => ({
  str: '哈哈',
  num: 10
})

export const mutations = {
  setData (state, value) {
    state.str = value
  },
  setNum (state, value) {
    state.num = value
  }
}

体验

//修改和获取vuex中的数据
<template>
  <div>
    {{$store.state.str}} //获取vuex中的数据
    <input type="button" @click="changeData" value="点我修改数据" />
  </div>
</template>

<script>
export default {
  methods: {
    changeData() {
      // 通过提交vuex，执行mutations进行数据的修改
      this.$store.commit('setData', '呵呵呵')
    }
  },
}
</script>

<style>

</style>

Fetch 发送ajax

现象：在vuex中，如果页面一刷新，vuex中的数据重置。
目标：使用fetch提前将数据存放到vuex中

体验

编写fetch查询ajax，并将结果存放到vuex中
页面中获得vuex中的数据（数据为查询的结果，不是默认值）

<template>
  <div>
    {{$store.state.str}}
  </div>
</template>

<script>
export default {
  async fetch( {store, $axios} ) {  //变量context，并解构 store和$axios
    // 发送ajax
    let { data } = await $axios.get('/service-consumer/feign/echo/abc')
    // 将结果存放到vuex中
    store.commit('setData', data )
  }
}
</script>

<style>

</style>

插件：自定义axios

将所有的ajax的请求路径，都提取到api文件中，方便后期的维护。
采用nuxt提供插件机制，将已经整合到nuxt中axios，进行二级加工

体验

nuxt中配置插件

  plugins: [
    { src: '~plugins/api.client.js', mode: 'client' }
  ],

编写插件

// request变量是常量
const request = {
    test() {
      return axios.get('/service-consumer/feign/echo/abc')
    },
    test2() {
      return axios.get('/service-consumer/feign/echo/abc')
    }
  }
  
  
  //定义成员变量，保存axios对象
  var axios = null
  
  export default ( { $axios }, inject ) => {
  
    //3） 保存内置的axios
    axios = $axios
  
    //4) 将自定义函数交于nuxt
    // 使用方式1：在vue中，this.$request.xxx()
    // 使用方式2：在nuxt的asyncData中，content.app.$request.xxx()
  
    inject('request', request)
}

使用插件发送ajax

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: ''
    }
  },
  async mounted() {
    //发送ajax
    let { data } = await this.$request.test()
    this.msg = data
  },
}
</script>

<style>

</style>