Nuxt.js快速构建教程

最新推荐文章于 2024-09-27 15:22:09 发布

lmy233

最新推荐文章于 2024-09-27 15:22:09 发布

阅读量629

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43588821/article/details/109124925

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言
VUE开发一个单页面应用有个不好的点就是对搜索引擎SEO十分不友好，我们的网站要想在搜索引擎中排名靠前，少不了SEO优化，而Nuxt.js就是VUE用来解决这个问题的。它是在服务端渲染SSR后直接返回已经渲染好的页面，页面就不再只是一个div标签。详细介绍：Nuxt.js是什么？

快速构建

利用Nuxt.js团队提供的脚手架工具 create-nuxt-app，前提确保安装了npx（npm5.2.0默认安装了npx）
npx create-nuxt-app <项目名>
或者用
yarn yarn create nuxt-app <项目名>
接下来会提示你安装哪些包，根据自己的代码习惯进行选择即可。
在这里插入图片描述
等到安装完成后，运行npm run dev启动项目。

目录机构介绍

在这里插入图片描述
assets 用于存放需要编译的静态资源如 LESS、SASS 或 JavaScript；
components 用于存放可以被复用的组件，但是这里不能使用nuxt.js的相关扩展（如不可使用asyncData方法）；
layouts 用于存放布局组件，所有页面都会加载到default.vue中的里，该目录名为Nuxt.js保留的，不可更改；
middleware 用于存放项目中所用到的中间件；
pages 用于存放组织应用的路由及视图。Nuxt.js 会读取该目录下所有的 .vue 文件并自动生成对应的路由配置；
plugins 用于组织那些需要在根vue.js应用实例化之前需要运行的 Javascript 插件；
static 用于存放静态资源，该目录下的文件不会经过nuxt.js进行编译；
store 组织应用的 Vuex 状态树文件。 Nuxt.js 框架集成了 Vuex 状态树的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。该目录名为Nuxt.js保留，不可更改。
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。该文件名不可更改。官方配置介绍
别名：~ 或 @ 表示src目录，~~ 或 @@表示根目录。默认情况下，src目录和根目录相同。
提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

路由介绍

nuxt.js会根据page文件夹下面的目录结构自动生成vue-router模块的路由配置。要在页面之间使用路由，我们建议使用标签。
基础路由：
在这里插入图片描述

动态路由： 在这里插入图片描述
获取路由路径： $n u x t .$ route.path；获取路由名： $n u x t .$ route.name；获取路由参数： $n u x t .$ route.params.参数名
路由参数校验:
Nuxt.js支持在动态路由组件中用validate方法进行参数校验

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

如果返回的值不为 true或Promise中resolve 解析为false或抛出Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。
路由嵌套:
先添加一个.vue文件，然后再.vue文件的同级目录下创建一个与.vue文件同名的文件夹来存放子视图组件。
Warning: 别忘了在父组件(.vue文件) 内增加用于显示子视图内容。
在这里插入图片描述
动态嵌套路由:
在动态路由下配置动态子路由，这种应用场景较为少见，但Nuxt.js仍然支持。

SPA fallback：
动态路由可以启用SPA fallback模式，在使用mode:'spa’模式下，Nuxt.js将输出一个与index.html相同的额外文件。如果没有文件匹配，大多数静态托管服务可以配置为使用SPA模板。生成文件不包含头信息或任何HTML，但它仍将解析并加载API中的数据。
在这里插入图片描述
过渡动效:
Nuxt.js 使用 Vue.js 的组件来实现路由切换时的过渡动效。
全局过渡动效配置
提示 :Nuxt.js 默认使用的过渡效果名称为 page

页面过渡动效配置：

关于过渡效果 transition 属性配置的更多信息可参看页面过渡效果API。

中间件：
可以自定义一个函数运行在一个或多个页面之前。中间件需要放在/middleware目录下，文件名就是中间件的名称。每个中间件都将接收一个context作为第一个参数，如下图。它也可以异步执行,只需要返回一个 Promise 或使用第2个 callback 作为第一个参数。
中间件的执行流程顺序：nuxt.config.js --> 布局 --> 页面
官方例子：
在这里插入图片描述
如果你想看到一个使用中间件的真实例子，请参阅在 GitHub 上的example-auth0。