vue 三、添加 UI 框架

三、添加 UI 框架

在本章中，我们将指导您完成在 Nuxt 项目中安装一系列前端 UI 框架的过程，这些框架将为您的应用模板提供样式。我们在本书中选择的框架是设计布局的基础，创建动画的运动 UI，更少的样式表语言，jQuery UI，用于在 DOM 中添加动画，AOS 用于滚动滚动内容，以及用于创建旋转木马图像的 SKIP。这些框架可以加速 Nuxt 项目中的前端开发，使其变得有趣和简单。

我们将在本章中介绍的主题如下：

增加基础和动作 UI
添加更少的（精简的样式表）
添加 jqueryui
添加 AOS
添加开关

增加基础和动作 UI

基金会是创建响应网站的前端框架。它附带用于网格布局、排版、按钮、表格、导航、表单等的 HTML 和 CSS 模板，以及可选的 JavaScript 插件。它适用于任何设备，移动设备或台式机，是 Bootstrap（的替代品 https://getbootstrap.com/ ），另一种流行的前端框架。我们专注于本书的基础。因此，正如在上一章中一样，我们有一个建议的 UI 框架列表，当使用create-nuxt-app脚手架安装 Nuxt 项目的框架时，您可以为应用选择这些框架。我们应该选择 AuthT1，以便我们可以添加基础作为 UI 框架：

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  ...

一旦您在安装过程中回答了问题，导航到您的项目目录，然后您可以安装和集成基金会到您的 NUXT 应用。最简单的方法是使用内容交付网络（CDN），但不鼓励使用。最简单的原因是，如果您在脱机开发，CDN 链接将无法工作。此外，您将失去对源文件的控制，因为它们由大型网络公司（如谷歌、微软和亚马逊）处理。但是，如果您想在 Nuxt 项目中使用 CDN 快速启动，只需将 CDN 源添加到 Nuxt 配置文件中的head选项中，如下所示：

// nuxt.config.js
export default {
  head: {
    script: [
      { src: 'https://cdn.jsdelivr.net/.../foundation.min.js' },
    ],
    link: [
      { rel: 'stylesheet', href: 
      'https://cdn.jsdelivr.net/.../foundation.min.css' },
    ],
  },
}

You can find the latest CDN links from the official Foundation site at https://get.foundation/sites/docs/installation.html#cdn-links.

那很容易，不是吗？但是，如果您想在本地托管源文件，这并不理想。让我们通过以下步骤找到与 Nuxt 集成的正确方法：

在终端上通过 NPM 安装基础及其依赖关系（jQuery 和什么输入）：

$ npm i foundation-sites
$ npm i jquery
$ npm i what-input

将 NoXT 配置文件中的基础 CSS 源添加到 NUXT 配置文件中的 OutT1 选项中：

// nuxt.config.js
export default {
  css: [
    'foundation-sites/dist/css/foundation.min.css'
  ],
}

使用以下代码在/plugins/目录中创建一个foundation.client.js文件：

// plugins/client-only/foundation.client.js
import 'foundation-sites'

这个插件将确保基础只在客户端运行。我们将在第 6 章、编写插件和模块中更详细地介绍插件。

在 NUXT 配置文件中的 FROUT0AY 选项中登记前面的基础插件如下：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/client-only/foundation.client.js',
  ],
}

然后，您可以使用基础 java T0 的插件 JavaScript 插件，在任何需要的页面中，例如：

// layouts/form.vue
<script>
import $ from 'jquery'

export default {
  mounted () {
    $(document).foundation()
  }
}
</script>

就这样。您已经在 Nuxt 项目中成功安装并集成了它。现在，让我们来探讨如何在下一节中创建基础结构布局和网站导航，以加速前端 Web 开发。

用基础创建网格布局和网站导航

我们首先要看的是网格系统从基础，这就是所谓的 XY 网格。在 web 开发中，网格系统是将 HTML 元素构造成基于网格的布局的系统。基金会附带 CSS 类，我们可以用来轻松地、轻松地构建 HTML 元素，例如：

<div class="grid-x">
  <div class="cell medium-6">left</div>
  <div class="cell medium-6">right</div>
</div

这将相应地将我们的元素在大屏幕（例如 iPad、Windows Surface）上分为两列，但在小屏幕（例如 iPhone）上分为一列。让我们按照以下步骤在默认的index.vue页面中创建一个响应性布局，并在create-nuxt-app脚手架工具生成的default.vue布局中创建网站导航：

删除/components/目录中的Logo.vue组件。
移除/pages/目录中index.vue页面中的<style>和<script>块，但将<template>块替换为以下元素和网格类：

// pages/index.vue
<template>
  <div class="grid-x">
    <div class="medium-6 cell">
      <img src=img/img/sample-01.jpg">
    </div>
    <div class="medium-6 cell">
      <img src=img/img/sample-02.jpg">
    </div>
  </div>
</template>

在这个模板中，当页面加载到大屏幕上时，图像是并排排列的。但当页面被调整到或加载到小屏幕上时，它们会相互堆叠。

移除/layouts/目录中default.vue布局中的<style>和<script>块，但将<template>块替换为以下导航：

// layouts/default.vue
<template>
  <div>
    <ul class="menu align-center">
      <li><nuxt-link to="/">Home</nuxt-link></li>
      <li><nuxt-link to="/form">Form</nuxt-link></li>
      <li><nuxt-link to="/motion-ui">Motion UI</nuxt-link></li>
    </ul>
    <nuxt />
  </div>
</template>

在这个新的布局中，我们刚刚创建了一个基本的网站水平菜单，其中有一个<ul>元素，通过在<ul>元素中添加一个.menu类来填充三个<li>元素和<nuxt-link>组件。我们还通过在.menu类后面添加.align-center将菜单项对齐到中间。

就这样。现在，您有了一个具有导航功能的响应式布局，可以在任何设备上完美运行。您可以看到，无需自己编写任何 CSS 样式，就可以以多快的速度完成。很甜，不是吗？但是 JavaScript 呢？基金会附带一些 JavaScript 实用工具和插件，我们也可以利用它们。让我们在下一节中找到答案。

For more information about the XY gridand navigation in Foundation, please visit https://get.foundation/sites/docs/xy-grid.html. and https://get.foundation/sites/docs/menu.html.

使用 JavaScript 工具和基础插件

基金会有许多有用的 JavaScript 实用程序，比如 MyMaQueLy。此 MediaQuery 实用程序可用于获取屏幕大小断点（小、中、大、超大），以便在应用中创建响应性布局。让我们通过以下步骤了解如何利用它：

创建一个utils.js文件，将您的自定义全局实用程序保存在/plugins/目录中，并添加以下代码：

// plugins/utils.js
import Vue from 'vue'
Vue.prototype.$getCurrentScreenSize = () => {
  window.addEventListener('resize', () => {
    console.log('Current screen size: ' +
     Foundation.MediaQuery.current)
  })
}

在这段代码中，我们创建了一个全局插件（这是一个 JavaScript 函数），它将从 MediaQuery 实用程序中的current属性获取当前屏幕大小，并在浏览器的屏幕大小更改时记录输出。通过使用 JavaScriptEventTarget方法addEventListener将调整大小事件侦听器添加到窗口对象。然后将【命名】注入到 Vue 实例中。

在默认布局中调用此$getCurrentScreenSize函数，如下所示：

// layouts/default.vue
<script>
export default {
  mounted () {
    this.$getCurrentScreenSize()
  }
}
</script>

因此，如果您在 Chrome 浏览器上打开 console 选项卡，在调整屏幕大小时，您应该会看到当前屏幕大小的日志，例如Current screen size: medium。

For more information about Foundation MediaQuery and other utilities, please visit https://get.foundation/sites/docs/javascript-utilities.html#mediaquery and https://get.foundation/sites/docs/javascript-utilities.html.

For more information about the JavaScript EventTarget and addEventListener, please visit https://developer.mozilla.org/en-US/docs/Web/API/EventTarget and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener.

除了 JavaScript 实用工具外，还有许多 JavaScript 插件附带基础，比如下拉菜单，用于创建下拉导航，遵守表单验证，以及工具提示，用于在 HTML 页面中显示元素上的扩展信息。只需将它们的类名添加到元素中，就可以激活这些插件。此外，您可以通过编写 JavaScript 来修改它们并与之交互，就像我们在本节中向您展示的那样。让我们看看下面的步骤：

在/pages/目录中创建一个包含以下 HTML 元素的form.vue页面，以创建一个包含两块.grid-container元素的表单：

// pages/form.vue
<template>
  <form data-abide novalidate>
    <div class="grid-container">
      <div class="grid-x">
        <div class="cell small-12">
          <div data-abide-error class="alert callout" 
           style="display: none;">
            <p><i class="fi-alert"></i> There are errors in your 
             form.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="grid-container">
      <div class="grid-x">
        //...
      </div>
    </div>
  </form>
</template>

在此表单中，第一个网格容器包含常规错误消息，而第二个容器将包含表单输入字段。我们只需在表单元素中添加data-abide就可以激活这个插件。我们还向表单元素添加了一个novalidate属性，以防止浏览器进行本机验证，从而可以将作业传递给插件。

创建一个包含.cell和.small-12类的<div>块，其中包含一个 email<input>元素和<span>元素中的两条默认错误消息，如下所示：

// pages/form.vue
<div class="cell small-12">
  <label>Email (Required)
    <input type="text" placeholder="hello@example.com" required
      pattern="email">
    <span class="form-error" data-form-error-on="required">
      Sorry, this field is required.
    </span>
    <span class="form-error" data-form-error-on="pattern">
      Sorry, invalid Email
    </span>
  </label>
</div>

在此单元格块中，有三个来自 Foundation 的自定义属性：pattern属性用于验证电子邮件字符串，data-form-error-on属性用于显示响应required和pattern属性的输入错误，placeholder属性用于在输入字段中显示输入提示。注意，required属性是 HTML5 的默认属性。

创建两个包含两个 Tyl T1 元素的用于收集密码的两个 To.T0.块，其中使用第二个密码来匹配第一个密码，通过从基础添加到第二个密码 To3 T3 元素的 AUT2 T2 属性如下：

// pages/form.vue
<div class="cell small-12">
  <label>Password Required
    <input type="password" placeholder="chewieR2D2" required >
    <span class="form-error">
      Sorry, this field is required.
    </span>
  </label>
</div>
<div class="cell small-12">
  <label>Re-enter Password
    <input type="password" placeholder="chewieR2D2" required
      pattern="alpha_numeric"
      data-equalto="password">
    <span class="form-error">
      Sorry, passwords are supposed to match!
    </span>
  </label>
</div>

创建包含提交按钮和重置按钮的最后一个<div>块，如下所示：

// pages/form.vue
<div class="cell small-12">
  <button class="button" type="submit" value="Submit">Submit</button>
  <button class="button" type="reset" value="Reset">Reset</button>
</div>

在安装 VUE 组件时，在 java T0 区块中启动基础 JavaScript 插件：

// pages/form.vue
<script>
import $ from 'jquery'

export default {
  mounted () {
    $(document).foundation()
  }
}
</script>

就这样。在不编写任何 JavaScript 的情况下，您只需添加带有类和属性的 HTML 元素，就创建了一个漂亮的前端表单验证。这是非常有用的！

For more information about the Abide plugin in Foundation, please visit https://get.foundation/sites/docs/abide.html.

除了 JavaScript 实用程序和插件之外，ZURB 基金会还有一些有用的库，我们可以从其中创建 SASS/CSS 动画的运动 UI、用于创建页面和可重用部分的布局的 PANNI、以及为您的代码库创建样式指南的样式 SelpA。在下一节中，我们将探讨如何使用运动 UI 创建 CSS 动画和过渡。让我们看看！

使用运动 UI 创建 CSS 动画和过渡

运动 UI 是从 Zurb 基金会创建的一个方便的 SASS 库，用于快速创建 CSS 转换和动画。您可以从 Motion UI 站点下载初学者工具包，并对其进行处理，但这缺乏您自己的控制，因为它具有许多内置默认值和您必须遵守的效果。因此，如果您想拥有更多的控制权并充分利用 Motion UI，您必须知道如何自己定制和编译 Sass 代码。让我们通过以下步骤了解如何编写 Sass 动画：

通过终端上的 npm 安装运动 UI 及其依赖项（Sass 和 Sass loader）：

$ npm i motion-ui --save-dev
$ npm i node-sass --save-dev
$ npm i sass-loader --save-dev

img/目录的/css/文件夹中创建一个main.scss`文件，导入动作界面如下：

// img/scss/main.scss
@import 'motion-ui/src/motion-ui';
@include motion-ui-transitions;
@include motion-ui-animations;

然后是自定义 CSS 动画，如下所示：

// img/scss/main.scss
.welcome {
  @include mui-animation(fade);
  animation-duration: 2s;
}

在 Nuxt 配置文件的css选项中注册自定义运动 UI CSS 资源：

// nuxt.config.js
export default {
  css: [
    'img/scss/main.scss'
  ]
}

使用其类名将动画应用于任何元素，例如：

// pages/index.vue
<img class="welcome" src=img/img/sample-01.jpg">

然后，您应该看到，无论何时加载页面，前面的图像都需要 2 秒钟才能逐渐淡入。

Motion UI 还提供了两个公共功能，我们可以与之交互以触发其内置动画和过渡：animationIn和animateOut。让我们在以下步骤中了解如何使用它们：

使用以下代码在/plugins/目录中创建一个motion-ui.client.js文件：

// plugins/client-only/motion-ui.client.js
import Vue from 'vue'
import MotionUi from 'motion-ui'
Vue.prototype.$motionUi = MotionUi

此插件将确保运动 UI 仅在客户端运行。我们将在第 6 章、编写插件和模块中更详细地介绍插件。

在 Nuxt 配置文件的plugins选项中注册前面的运动 UI 插件，如下所示：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/client-only/motion-ui.client.js',
  ],
}

在模板中的任意位置使用运动 UI 功能，例如：

// pages/motion-ui.vue
<template>
  <h1 data-animation="spin-in">Hello Motion UI</h1>
</template>

<script>
import $ from 'jquery'

export default {
  mounted () {
    $('h1').click(function() {
      var $animation = $('h1').data('animation')
      this.$motionUi.animateIn($('h1'), $animation)
    })
  }
}
</script>

在该页面中，我们将过渡名称spin-in存储在元素的data属性中，然后将其传递给运动 UIanimateIn函数，以便在单击元素时应用动画。注意，我们使用 jQuery 从data属性获取数据。

If you want to find out the rest of the built-in transition names, please visit https://get.foundation/sites/docs/motion-ui.html#built-in-transitions.

很酷，不是吗？如果您需要在元素上使用 CSS 动画或转换，并且不需要自己编写大量 CSS 行，那么它会很方便。这可以使您的 CSS 样式保持较小，并将重点放在模板的主要和自定义表示上。谈到保存和不必编写遗传代码自己，值得一提的共同图标字体提供的 Zurb 基金会以及基础图标字体 3。让我们在下一节中了解如何从中受益。

For more information about Motion UI, please visit https://get.foundation/sites/docs/motion-ui.html. As for Panini and Style Sherpa, please visit https://get.foundation/sites/docs/panini.html and https://get.foundation/sites/docs/style-sherpa.html.

添加图标与基础图标字体 3

基金会图标字体 3 是一个有用的图标字体集，我们可以与 CSS 一起使用，用于前端开发项目。它可以避免您自己创建常见图标，例如社交媒体图标（Facebook、Twitter、YouTube）、箭头图标（向上箭头、向下箭头等）、辅助功能图标（轮椅、电梯等）、电子商务图标（购物车、信用卡等）和文本编辑器图标（粗体、斜体等）。让我们通过以下步骤了解如何为 Nuxt 项目安装它：

通过 NPM 安装基础图标字体 3：

$ npm i foundation-icon-fonts

在 NUXT 配置文件中添加基础图标字体的全局路径：

// nuxt.config.js
export default {
  css: [
    'foundation-icon-fonts/foundation-icons.css',
  ]
}

使用前缀为fi的图标名称将图标应用于任何<i>元素，例如：

<i class="fi-heart"></i>

You can find out the rest of the icon names at https://zurb.com/playground/foundation-icon-fonts-3.

做得好！在本节和前几节中，为您的 NUXT 项目添加基础，您已经成功地使用网格系统来构造布局和 SASS 以创建具有运动 UI 的 CSS 动画。但是，添加网格系统和编写 CSS 动画对于构建应用来说是不够的；我们需要特定的 CSS 来描述 Nuxt 应用中 HTML 文档和 Vue 页面的表示。我们可以在整个项目中使用 SASS 来创建自定义样式，这是不能仅仅通过使用基础来完成的，但是让我们尝试另一个流行的样式预处理器并将其添加到 Nuxt 项目中。让我们在下一节中找到答案。

You can find all the example code that you have learned so far on Foundation in /chapter-3/nuxt-universal/adding-foundation/ in our GitHub repository.

添加更少的（更精简的样式表）

Less 是 CSS 的语言扩展，代表更精简的样式表。它看起来就像 CSS，所以在“更少”的时间内就可以非常容易地找到它。Less 只对 CSS 语言进行了一些方便的添加，这也是它可以快速学习的原因之一。在编写 CSS 时，您可以使用更少的代码编写变量、混合、嵌套、嵌套规则和冒泡、操作、函数等；例如，以下是变量的外观：

@width: 10px;
@height: @width + 10px;

这些变量可以像其他编程语言中的变量一样使用；例如，您可以在普通 CSS 中以以下方式使用前面的变量：

#header {
  width: @width;
  height: @height;
}

前面的代码将转换为以下 CSS，我们的浏览器可以理解：

#header {
  width: 10px;
  height: 20px;
}

这很简单也很整洁，不是吗？在 Nuxt 中，通过使用<style>块中的lang属性，您可以使用 Less 作为 CSS 预处理器：

<style lang="less">
</style>

如果您想将本地样式应用于特定页面或布局，这种方法是好的且易于管理的。您应该在lang属性之前添加scoped属性，以便本地样式在本地应用于特定页面，并且不会干扰其他页面中的样式。但是，如果有多个页面和布局共享一个公共样式，则应在项目 img/`目录中全局创建样式。因此，让我们通过以下步骤了解如何使用较少的资源创建全局样式：

通过终端上的 npm 安装 Less 及其网页包加载器：

$ npm i less --save-dev
$ npm i less-loader --save-dev

img/目录中创建main.less`文件，并添加以下样式：

// img/less/main.less
@borderWidth: 1px;
@borderStyle: solid;

.cell {
  border: @borderWidth @borderStyle blue;
}

.row {
  border: @borderWidth @borderStyle red;
}

在 Nuxt 配置文件中安装上述全局样式，如下所示：

// nuxt.config.js
export default {
  css: [
    'img/less/main.less'
  ]
}

在项目中的任何位置应用上述样式，例如：

// pages/index.vue
<template>
  <div class="row">
    <div class="grid-x">
      <div class="medium-6 cell">
        <img class="welcome" src=img/img/sample-01.jpg">
      </div>
      <div class="medium-6 cell">
        <img class="welcome" src=img/img/sample-02.jpg">
      </div>
    </div>
  </div>
</template>

当您在浏览器上启动应用时，您应该可以看到刚刚添加到 CSS 类中的边框。这些边界在开发布局时可以用作指导，因为网格系统下的网格线是“不可见的”，如果没有任何可见线，则很难将其可视化。

You can find the preceding code in /chapter-3/nuxt-universal/adding-less/ in our GitHub repository.

由于我们在本节介绍 CSS 预处理器，因此值得一提的是，我们可以使用任何预处理器，无论是在<style>块、<template>块还是<script>块中，例如：

如果您想用 CoffeeScript 编写 JavaScript，可以按如下方式进行：

<script lang="coffee">
export default data: ->
  { message: 'hello World' }
</script>

For more information about CoffeeScript, please visit https://coffeescript.org/.

如果您想在 Nuxt 中使用 Pug 编写 HTML 标记，可以按如下操作：

<template lang="pug">
  h1.blue Greet {{ message }}!
</template>

For more information about Pug, please visit https://coffeescript.org/.

如果您想使用 Sass（语法上非常棒的样式表）或 Scss（Sassy 级联样式表）而不是更少的样式表来编写 CSS 样式，您可以按如下方式执行：

<style lang="sass">
.blue
  color: blue
</style>

<style lang="scss">
.blue {
  color: blue;
}
</style>

For more information about Sassand Scss, please visit https://coffeescript.org/.

在本书中，我们在整个章节中使用了较少的普通 HTML 和 JavaScript（主要是 ECMAScript 6 或 ECMAScript 2015）。但是您可以自由选择我们提到的任何预处理器。现在让我们看一看在 Nuxt 项目 jQuery UI 中添加效果和动画到 HTML 元素的另一种方法。

添加 jqueryui

jQueryUI 是在 jQuery 之上构建的一组用户界面（UI）交互、效果、小部件和实用程序。对于设计师和开发人员来说，它都是一个有用的工具。就像运动 UI 和基础一样，jQuery UI 帮助您编写更少的代码，并对项目中的元素做更多的工作。通过使用其 CDN 资源和 jQuery 作为其依赖项，可以轻松地将其添加到普通 HTML 页面，例如：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div id="accordion">...</div>

<script>
  $('#accordion').accordion()
</script>

同样，它与基金会一样。当您想要将 jQueryUI 与 Nuxt 集成时，这有点复杂。我们可以使用前面的 CDN 资源，并将它们添加到 Nuxt 配置文件中的head选项中，如下所示：

// nuxt.config.js
export default {
  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/.../jquery.min.js' },
      { src: 'https://code.jquery.com/.../jquery-ui.js' },
    ],
    link: [
      { rel: 'stylesheet', href: 
       'https://code.jquery.com/.../jquery-ui.css' },
    ]
  }
}

但是，就像与基金会的整合一样，不鼓励这样做。以下是正确的方法：

在终端上通过 npm 安装 jQuery UI：

$ npm i jquery-ui-bundle

将 jQuery UI 的 CSS 源从/node_modules/文件夹添加到 Nuxt 配置文件中的css选项：

// nuxt.config.js
module.exports = {
  css: [
    'jquery-ui-bundle/jquery-ui.min.css'
  ]
}

在/plugins/目录中创建一个名为jquery-ui-bundle.js的文件，导入 jQuery UI，如下所示：

// plugins/client-only/jquery-ui-bundle.client.js
import 'jquery-ui-bundle'

同样，该插件将确保 jQuery UI 仅在客户端上运行，我们将在第 6 章编写插件和模块中更详细地介绍插件。

**4. 在 Nuxt 配置文件的plugins选项中注册前面的 jQuery UI 插件，如下所示：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/client-only/jquery-ui-bundle.client.js',
  ],
}

现在，您可以在任何地方使用 jQuery UI，例如：

// pages/index.vue
<template>
  <div id="accordion">...</div>
</template>

<script>
import $ from 'jquery'

export default {
  mounted () {
    $('#accordion').accordion()
  }
}
</script>

在本例中，我们使用 jQueryUI 中的一个小部件 Accordion 来显示可折叠的内容面板。您可以在找到 HTML 代码的详细信息 https://jqueryui.com/accordion/ 。

除了小部件，jQueryUI 还提供了动画效果等效果。让我们通过以下步骤了解如何创建具有缓和效果的动画：

在/pages/目录中创建一个新页面animate.vue，在<template>块中包含以下元素：

// pages/animate.vue
<h1>Hello jQuery UI</h1>

使用 jQueryanimate函数在<template>块中创建动画，该函数具有 jQuery UI 放松效果，如下所示：

// pages/animate.vue
import $ from 'jquery'

export default {
  mounted () {
    var state = true
    $('h1').on('click', function() {
      if (state) {
        $(this).animate({
          color: 'red', fontSize: '10em'
        }, 1000, 'easeInQuint', () => {
          console.log('easing in done')
        })
      } else {
        $(this).animate({
          color: 'black', fontSize: '2em'
        }, 1000, 'easeOutExpo', () => {
          console.log('easing out done')
        })
      }
      state = !state
    })
  }
}

在这段代码中，单击元素时使用easeInQuint缓和效果，再次单击元素时使用easeOutExpo缓和效果。元素的字体大小在单击时从2em到10em进行动画设置，再次单击时从10em到2em进行动画设置。文本颜色也一样，单击元素时，文本颜色在red和black之间设置动画。

刷新浏览器，您应该会看到我们已将动画和缓和效果应用于H1。

For more easing effects, please visit https://api.jqueryui.com/easings/, while for more information about the jQuery animate function, please visit https://api.jquery.com/animate/.

If you want to find out the rest of the effects, widgets, and utilities from jQuery UI, please visit https://jqueryui.com/.

尽管您可以使用 CSS 使用运动 UI 创建动画和过渡，但 jQuery UI 是使用 JavaScript 将动画应用于 HTML 元素的另一个选项。除了 jQuery 和 jQueryUI 之外，还有其他 JavaScript 库，我们可以从中受益，以特定的方式以交互和有趣的方式展示我们的内容，例如在向上或向下滚动页面时设置内容动画，以及从左或右滑动内容。我们将研究的最后两个动画工具是 AOS 和 Swiper。那么，让我们在下一节中这样做。

You can find all the code we have used for this section in /chapter-3/nuxt-universal/adding-jquery-ui/ in our GitHub repository.

添加 AOS

AOS 是一个 JavaScript 动画库，当您向下（或向上）滚动页面时，可以将 DOM 元素漂亮地动画显示在视图中。它是一个小型库，在您滚动页面时很容易触发动画，而无需自己编写动画代码。要设置元素的动画，只需使用data-aos属性：

<div data-aos="fade-in">...</div>

就像这样简单，当您滚动页面时，元素将逐渐淡入。您甚至可以设置动画完成的时间（以秒为单位）。因此，让我们通过以下步骤了解如何将此库添加到 Nuxt 项目中：

通过终端上的 npm 安装 AOS：

$ npm i aos

将以下元素添加到index.vue中，如下所示：

// pages/index.vue
<template>
  <div class="grid-x">
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src=img/img/sample-01.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src=img/img/sample-02.jpg">
    </div>
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src=img/img/sample-03.jpg">
    </div>
  </div>
</template>

在这个模板中，我们使用 FULL 将网格结构添加到元素中，并使用 Adple T1 属性来在每个元素上应用 AOS Stutt0 动画。

在<script>块中导入 AOS JavaScript 和 CSS 资源，并在安装 Vue 组件时启动 AOS：

// pages/index.vue
<script>
import 'aos/dist/aos.css'
import aos from 'aos'

export default {
  mounted () {
    aos.init()
  }
}
</script>

当你刷新屏幕时，当你向下滚动页面时，你会看到元素依次向上淡入。它能让你毫不费力地把你的内容呈现得美丽动人，这真是太棒了，不是吗？

但是，如果您有多个页面也要设置动画，那么我们刚才应用 AOS 的方式就不好了。您必须将前面的脚本复制到需要 AOS 动画的每个页面。因此，如果您有多个页面需要使用 AOS 设置动画，那么您应该注册并全局启动它。让我们通过以下步骤了解如何完成此操作：

在/plugins/目录下创建aos.client.js插件，导入 AOS 资源，启动 AOS，如下所示：

// plugins/client-only/aos.client.js
import 'aos/dist/aos.css'
import aos from 'aos'

aos.init({
  duration: 2000,
})

在这个插件中，我们指示 AOS 花 2 秒钟来制作元素的动画——全局动画。您可以在找到其余的设置选项 https://github.com/michalsnik/aos#1-初始化 aos。

在 Nuxt 配置文件的plugins选项中注册前面的 AOS 插件，如下所示：

// nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/client-only/aos.client.js',
  ],
}

就这样。现在，您可以将 AOS 动画应用于多个页面，而无需复制脚本。

请注意，我们直接在 AOS 插件中导入 CSS 资源，而不是通过 NUXT 配置文件中的 OutT0 选项导入全局，而不是在过去的章节中为基础和动作 UI 做了什么。所以，如果你想为基础做同样的事情，你可以直接将它的 CSS 资源导入插件文件：

// plugins/client-only/foundation-site.client.js
import 'foundation-sites/dist/css/foundation.min.css'
import 'foundation-sites'

然后，您不必在 Nuxt 配置文件中使用全局css选项。如果您希望保持配置文件“精简”，并将 UI 框架的 CSS 和 JavaScript 资源保留在插件文件中，则最好使用这种方法。

You can find the source code of this example Nuxt app in /chapter-3/nuxt-universal/adding-aos/ from our GitHub repository.

If you want to find out more information about AOS and the rest of its animation names, please visit https://michalsnik.github.io/aos/.

现在，让我们来探索最后一个有助于加速前端开发的 JavaScript 助手——Swiper。

添加开关

Swiper是一款 JavaScript 触摸滑块，可用于现代网络应用（桌面或移动）和移动原生或混合应用。它是框架 7（的一部分 https://framework7.io/ 和离子骨架（https://ionicframework.com/ 用于构建移动混合应用。我们可以使用其 CDN 资源轻松地为 web 应用设置 Swiper，就像我们在过去的章节中对其他框架和库所做的那样。但是，让我们通过以下步骤了解如何使用 Nuxt 以正确的方式安装和使用它：

**1. 通过终端通过 npm 在 Nuxt 项目中安装 Swiper：

$ npm i swiper

添加以下 HTML 元素以在<template>块中创建图像滑块：

// pages/index.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img 
       src=img/img/sample-01.jpg">
      </div>
      <div class="swiper-slide"><img 
       src=img/img/sample-02.jpg">
      </div>
      <div class="swiper-slide"><img 
       src=img/img/sample-03.jpg">
      </div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

根据这些元素，我们希望创建一个图像滑块，其中包含三个可以从左或右滑入视图的图像，以及两个按钮–下一个按钮和上一个按钮。

在<script>块中导入 Swiper 资源，并在页面挂载时创建一个新的 Swiper 实例：

// pages/index.vue
<script>
import 'swiper/swiper-bundle.css'
import Swiper from 'swiper/bundle'

export default {
  mounted () {
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  }
}
</script>

在这个脚本中，我们将图像滑块的类名提供给 Swiper，以便启动一个新实例。此外，我们还通过 Swiper 的pagination选项将下一个和上一个按钮注册到新实例。

You can find the rest of the setting options for initializing Swiper and the API that you can use to interact with the instantiated instance at https://swiperjs.com/api/.

添加以下 CSS 样式以自定义<style>块中的图像滑块：

// pages/index.vue
<style>
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

在这种风格中，我们只想使用 CSSwidth和height属性的 100%使幻灯片完全占据屏幕，并使用 CSSflex属性将图像集中在滑块容器中。

现在您可以运行 Nuxt 并在浏览器上加载页面，您应该会看到一个交互式图像滑块工作得很好。

You can find out about some great example slides from the Swiper official website at https://swiperjs.com/demos/.

请注意，我们刚才使用 Swiper 的方式仅适用于单个页面。如果您想在多个页面上创建滑块，则可以通过插件全局注册 Swiper。因此，让我们通过以下步骤了解如何做到这一点：

在/plugins/目录中创建swiper.client.js插件，导入 Swiper 资源，创建一个名为$swiper的属性。将 Swiper 附加到此属性并将其注入 Vue 实例，如下所示：

// plugins/client-only/swiper.client.js
import 'swiper/swiper-bundle.css'
import Vue from 'vue'
import Swiper from 'swiper/bundle'

Vue.prototype.$swiper = Swiper

在 Nuxt 配置文件的plugins选项中注册此 Swiper 插件：

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/client-only/swiper.client.js',
  ],
}

现在您可以通过this关键字调用$swiper属性，在应用的多个页面中创建 Swiper 的新实例，例如：

// pages/global.vue
<script>
export default {
  mounted () {
    var swiper = new this.$swiper('.swiper-container', { ... })
  }
}
</script>

同样，我们在插件文件中组织了 CSS 资源，而不是通过 Nuxt 配置文件中的css选项全局注册它。但是，如果您想全局覆盖这些 UI 框架和库中的某些样式，则可以通过在css选项中全局注册 CSS 资源，然后 img/`目录中存储的 CSS 文件中注册自定义样式，从而更容易覆盖这些样式。

You can download the source code of this chapter in /chapter-3/nuxt-universal/adding-swiper/ from our GitHub repository. If you want to find out more information about Swiper, please visit https://swiperjs.com/.

做得好！我们为您选择了一些流行的 UI 框架和库，以加速前端开发。我们希望它们在您将来创建的 Nuxt 项目中有用。在接下来的章节中，我们将偶尔使用其中一些框架和库，特别是在最后一章——第 18 章、创建一个带有 CMS 和 GraphQL的 Nuxt 应用。现在，让我们总结一下您在本章学到的知识。

总结

在本章中，您已经在 Nuxt 项目中安装了基础作为主 UI 框架，并使用 Foundation 的网格系统、JavaScript 实用工具和插件创建简单的网格布局、窗体和导航。您已经使用基金会的运动 UI 来创建 SASS 动画和转换和基础图标字体 3，也从基金会，为您的 HTML 页面添加常用的和有用的图标。您已经安装了 Less 作为样式预处理器，并在 Less 样式表中创建了一些变量。

您已经安装了 jQuery UI，将其手风琴小部件添加到应用中，并使用其缓和效果创建了动画。您已经安装了 AOS，并使用它在向下或向上滚动页面时为视口中的元素设置动画。最后，您安装了 Swiper，用于创建简单的图像幻灯片。最后但并非最不重要的一点是，您已经了解了如何通过 Nuxt 配置文件全局安装这些框架和库，或者仅在特定页面上单独本地使用它们。

在下一章中，我们将介绍 Nuxt 中的视图、路由和转换。您将创建自定义页面、路由和 CSS 转换，并学习如何使 img/目录为图像和字体等资产提供服务。此外，您还将了解如何自定义默认布局并在/layouts/`目录中添加新布局。给你一个简单的例子，你可以从 Nuxt 网站上了解到所有这些功能。因此，让我们在下一章中进一步探讨 Nuxt！**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/12877.html

vue 查看更多书籍

《NuxtJS Web 开发实用指南》

分类

最近更新

vue 三、添加 UI 框架

三、添加 UI 框架

增加基础和动作 UI

用基础创建网格布局和网站导航

使用 JavaScript 工具和基础插件

使用运动 UI 创建 CSS 动画和过渡

添加图标与基础图标字体 3

添加更少的（更精简的样式表）

添加 jqueryui

添加 AOS

添加开关

总结

留言

联系客服

数据知识

系统公告

开发文档

vue查看更多书籍

《NuxtJS Web 开发实用指南》

vue 三、添加 UI 框架

三、添加 UI 框架

增加基础和动作 UI

用基础创建网格布局和网站导航

使用 JavaScript 工具和基础插件

使用运动 UI 创建 CSS 动画和过渡

添加图标与基础图标字体 3

添加更少的（更精简的样式表）

添加 jqueryui

添加 AOS

添加开关

总结

留言

联系客服

vue 查看更多书籍