Nuxt.js入门

vimerio
1,022 阅读6分钟

Nuxt.js入门

1.Nuxt.js是什么

image-20211030015106927

简单的来说，Nuxt.js可以静态化vue项目让他更好的被部署，同时做出了一些SEO优化（因为从SPA变成了多个静态HTML页面）

2. 下载安装初始化

首先需要下载vue-cli

npm install vue-cli -g

可以用 vue -V来查看vue-cli的版本

然后可以用脚手架工具初始化项目：

npx create-nuxt-app <项目名>

需要进行如下选择：①集成的服务器端框架② UI 框架③测试框架④Nuxt 模式等，自己选择想要的就可以了

image-20211030014950608

然后就可以npm run dev打开项目了，默认为3000端口

image-20211030015624099

3.目录结构

image-20211030020205264

static很明显是存放静态资源的，比如img或者Sass之类的，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

components很明显是存放组件的

plugins是存放插件的，比如之前配置的时候我选择了element作为ui，所以这里会有一个element-ui.js

store是关于vuex store文件的，不需要可以去除

image-20211030020534351

pages是最重要的部分，用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

这里体现了Nuxt.js的一个重要优势：自动配置路由

然后还可以配置assets、layouts、middleware，也很有用

别名

别名目录
~ 或 @srcDir
~~ 或 @@rootDir

默认情况下，srcDir 和 rootDir 相同。

提示: 在 vue 模板中, 如果需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

4.配置文件

在nuxt.config.js中可以进行很多配置

比如配置html的head内容等

具体配置可以在www.nuxtjs.cn/guide/confi…

除了常规的配置项，还能配置比如页面加载loading条，路由切换动画等css内容

名称作用
buildNuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
css该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
dev该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
env该配置项用于定义应用客户端和服务端的环境变量。
generate该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
head该配置项用于配置应用默认的 meta 标签。
loading该配置项用于个性化定制 Nuxt.js 使用的加载组件。
modules该配置项允许您将 Nuxt 模块添加到项目中。
modulesDir该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。
plugins该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
rootDir该配置项用于配置 Nuxt.js 应用的根目录。
router该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置
server此选项允许您配置 Nuxt.js 应用程序的服务器实例变量。
srcDir该配置项用于配置应用的源码目录路径。
dir此选项允许您配置 Nuxt.js 应用程序的自定义目录。
transition该配置项用于个性化配置应用过渡效果属性的默认值。

具体的配置文件使用会在之后详细介绍

5.路由

Nuxt.js一个直观的好处就是它自动配置了vue-router，只需要按照约定在pages文件夹下写vue文件即可。

比如下图的文档结构：

image-20211030105949829

我们可以找到index.html, blog.html和one/two.html

如果要在页面中切换路由，使用nuxt-link而不是router-link

<nuxt-link to="/one/two">跳转到one/two.html</nuxt-link>

动态路由

在很多时候我们需要动态路由来展示特定的内容（比如每篇博客、每条新闻、每件商品等等）

Nuxt.js中配置动态路由也非常简单，只需要特定的名称： _动态路由参数(即$route.params.XXX的XXX).vue，关键在于要在开头加下划线，比如 _id.vue

还可以用正则校验参数

validate({params}) {
    return /^\d+$/.test(params.id);
    // 检验参数为全数字，成功正常运行，失败进入404.html
}

路由动画效果

在assets/下新建main.css,下面是官网默认的动画效果

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

可以看出动画切换统一以.page开头，进入为.page-enter-active,离开为.page-leave-active

然后在nuxt.config.js中的css中引入：

image-20211030111823482

注意：只有使用nuxt-link标签才会触发动画效果，如果使用的是a标签则无法实现，推荐全部按照约定进行

6.默认模板和默认布局

定制化默认的 html 模板，只需要在 src 文件夹下（默认是应用根目录）创建一个 app.html 的文件。默认模板为：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

{{ HEAD }}引入了nxut.config.js中配置好的meta标签，而{{ APP }}就是每个页面具体的template

所以要在每个页面统一加上什么，就在body中写什么：

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
      <a href='www.baidu.com'>百度</a>	
    {{ APP }}
  </body>
</html>

注意：需要重启服务才能生效

实际上同样的功能也可以在默认布局中实现，因为是在template中的更改（默认布局无法定制body之外的东西）

可通过添加 layouts/default.vue 文件来扩展应用的默认布局。

提示: 别忘了在布局文件中添加 <nuxt/> 组件用于显示页面的主体内容。

<template>
  <a href='www.baidu.com'>百度</a>	
  <nuxt />
</template>

所以页面中更改的一般在默认布局中添加，默认模板主要是添加兼容性策略的：

<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

如果要定制错误页面（比如404,500），可以在layouts/error.vue中编写，这个vue会被视为一个真正的页面而不是一个布局（也可以理解成没有其他内容只有布局，因为没有引入<nuxt/>）

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">页面不存在</h1>
    <h1 v-else>应用发生错误异常</h1>
    <nuxt-link to="/">首 页</nuxt-link>
  </div>
</template>

<script>
  export default {
    props: ['error'],
    layout: 'blog' // 你可以为错误页面指定自定义的布局
  }
</script>

7.head定制

在SEO优化中，最重要的部分就是根据页面内容配置meta标签，但是在前文中我们的meta中的title、content等都是在nuxt.config.js中写死的，这很明显不太对劲

Nuxt.js提供了定制head的方法：只需要在page.vue中加入head方法就可以了：

data中的数据用插值表达式渲染到页面上，head方法中通过this取到data中的数据，并且可用meta直接配置标签，可以不使用this.data

<template>
  <h1>{{ title }}</h1>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello World!'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'My custom description'
          }
        ]
      }
    }
  }
</script>

8.异步数据

  1. 创建一个数据仓库（一个可以获取json文件的地址）

  2. 创建asyncData.vue

    1. 使用axios获取数据
    2. 使用asyncData方法获取数据（可以使用async await语法糖）
      async asyncData({ params }) {
    const { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { res: data.title }
  }

return的值会自动的在data中创建一个变量，在上例中就是创建了一个res，可以用this.res去访问，省去了自己绑定数据到data中的变量的操作

注意：asyncData方法实际上是在组件初始化之前被调用的，所以此时并不能使用this访问数据，但是会自动绑定数据

9.资源文件

全部推荐使用图床，自动化处理，但是这里可以理解一下Nuxt.js的目录结构

可以使用别名来访问诸如assets的文件夹，来方便的获取文件的相对路径，比如 ~assets/img/logo.png

在css中引入背景图片之类的也是一样的方法

可以使用live-serve来测试服务器，但是也可以直接使用gitee pages等静态页面

avatar
文章
阅读
粉丝