Nuxt.js 教程点亮你的Vue技术栈

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

现在 Vue.js 大多数用于单页面应用，随着技术的发展，单页面应用已不足以满足需求。并且一些缺点也成为单页面应用的通病，单页面应用在访问时会将所有的文件进行加载，首屏访问需要等待一段时间，也就是常说的白屏，另外一点是总所周知的 SEO 优化问题。

Nuxt.js 的出现正好来解决这些问题，如果你的网站是偏向社区需要搜索引擎提供流量的项目，那就再合适不过了。

Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网

Nuxt.js 教程点亮你的Vue技术栈_nodejs

1.安装nuxt.js

1.npm install create-nuxt-app -g

新建一个文件夹不能有中文和空格不然会出错

3. 在新建的文件夹执行npx create-nuxt-app

2.nuxt.js 的路由是自动生成

1. 页面跳转用的是<nuxt-link :to="{name:"页面的地址"}>

注：<router-link> 也可以也可以用函数编程this.$router.push

正如官方所说<nuxt-link>使用方式和用途<router-link>是一致的。

但，后面说将来我们会为<nuxt-link>组件增加更多的功能特性，例如资源预加载，用于提升 nuxt.js 应用的响应速度。

当写这篇文章时，nuxt.js 官方已经实现了如它所说的将来功能特性。也许API文档没有及时更新吧！

所以特性正如上面前面的问题。

2. validate 函数可以拦截跳转的页面

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。

validate({ params, query }) {
  return true // 如果参数有效
  return false // 参数无效，Nuxt.js 停止渲染当前页面并显示错误页面
}


//promise
validate({ params, query, store }) {
  return new Promise((resolve) => setTimeout(() => resolve()))
}

//正则
validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
}

3.asyncData

async asyncData() {
       return  await new Promise((resolve, reject) => {
            setTimeout((_) => {
                resolve({
                    data: {
                        message: "菜菜大佬",
                    },
                });
            }, 2000);
        });
    },

注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

4.自定义error页面

新建文件夹根目录下面/layouts/error.vue

props:['error'] 接受错误信息

页面传递

async asyncData(ctx) {
        return await new Promise((resolve, reject) => {
            setTimeout((_) => {
                reject({
                    data: {
                        message: "菜菜大佬",
                    },
                });
                ctx.error({
                    message:"失败"
                })
            }, 2000);
        });
    },

5.Loading配置

this.$nuxt.$loading.start();
 this.$nuxt.$loading.finish()

Nuxt js config Loading 配置

键	类型	默认值	描述
`color`	String	`'black'`	进度条的颜色
`failedColor`	String	`'red'`	页面加载失败时的颜色（当 `data` 或 `fetch` 方法返回错误时）。
`height`	String	`'2px'`	进度条的高度 (在进度条元素的 `style` 属性上体现)。
`throttle`	Number	`200`	在ms中，在显示进度条之前等待指定的时间。用于防止条形闪烁。
`duration`	Number	`5000`	进度条的最大显示时长，单位毫秒。Nuxt.js 假设页面在该时长内加载完毕。
`continuous`	Boolean	`false`	当加载时间超过`duration`时，保持动画进度条。
`css`	Boolean	`true`	设置为false以删除默认进度条样式（并添加自己的样式）。
`rtl`	Boolean	`false`	从右到左设置进度条的方向。

6. head函数

1.动态修改页面title

head () {
       return {
           title:"菜菜大佬威武霸气"
       }
    },

7.middleware 中间件

nuxt.js 配置

router: {
    middleware: "index"
  }

//js文件
export default function ({ route }) {
    console.log(route.path,'zzzz')
}

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: vue

返回列表

上一篇：小满Vue3第四十三章（webpack 构建 Vue3项目）为什么要手写webpack 不用cli （脑子有病）并不是其实是为了加深我们对webpack 的了解方便以后灵活运用webpack 的技术

下一篇：Nodejs 爬虫

“Nuxt.js 教程点亮你的Vue技术栈” 的相关文章

VUEX state 的使用学习二1年前 (2023-02-02)

3分钟让你学会axios在vue项目中的基本用法（建议收藏）1年前 (2023-02-02)

[VueJsDev] 基础知识 - CommonJs VS ES Module1年前 (2023-02-02)

[VueJsDev] 快速入门 - vue项目根目录配置文件1年前 (2023-02-02)

Vue技术教程（2023-1-11）1年前 (2023-02-02)

VUE|后台管理项目——动态路由权限管理1年前 (2023-02-02)

vue关于通过下标更改数组的理解1年前 (2023-02-02)

Vue全家桶 Pinia状态管理1年前 (2023-02-02)

unplugin-vue-components 不能识别组件的自动导入的类型 (pnpm)1年前 (2023-02-02)

Vue3响应式原理解析1年前 (2023-02-02)

Nuxt.js 教程 点亮你的Vue技术栈