添加 jQuery UI

好的，jQuery UI 是一套构建在 jQuery 之上的用户界面 (UI) 交互、效果、小部件和实用程序。对于设计师和开发人员来说，它都是一个有用的工具。就像 Motion UI 和 Foundation 一样，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>

同样，它与 Foundation 类似。当你想要将 jQuery UI 与 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' },
    ]
  }
}

好的，明白了。就像与 Foundation 集成一样，不鼓励以这种方式进行集成。以下是正确的方法：

在终端中使用 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 章 “编写插件和模块” 中更详细地介绍插件。

在 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>
在这个例子中，我们使用了 jQuery UI 的一个部件（Accordion）来显示可折叠的内容面板。你可以在 https://jqueryui.com/accordion/ 找到 HTML 代码的详细信息。

除了部件，jQuery UI 还提供了诸如动画缓动效果之类的效果。让我们看看如何在以下步骤中使用缓动效果创建动画：

在 /pages/ 目录下创建一个新的页面 animate.vue，并在 <template> 块中添加以下元素：
```
// pages/animate.vue
<h1>Hello jQuery UI</h1>
```

使用 jQuery 的 animate 函数和 jQuery UI 的缓动效果创建动画，如下所示，在 <template> 块中：

// 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。文本颜色也是如此，在元素被点击时在红色和黑色之间动画。

刷新你的浏览器，你应该看到我们已经将动画和缓动效果应用到了 H1 元素上。

要了解更多缓动效果，请访问 https://api.jqueryui.com/easings/，而有关 jQuery animate 函数的更多信息，请访问 https://api.jquery.com/animate/。

如果你想了解 jQuery UI 的其余效果、部件和实用工具，请访问 https://jqueryui.com/。

即使你可以使用 CSS 的 Motion UI 创建动画和过渡效果，jQuery UI 也是另一种使用 JavaScript 将动画应用于 HTML 元素的选择。除了 jQuery 和 jQuery UI 之外，还有其他 JavaScript 库可以帮助我们以特定的方式交互式且有趣地呈现内容，例如在向上或向下滚动页面以及从左向右或从右向左滑动内容时动画化我们的内容。接下来我们将介绍的最后两个动画工具是 AOS 和 Swiper。让我们在下一节中进行介绍。

你可以在我们的 GitHub 仓库的 /chapter-3/nuxt-universal/adding-jquery-ui/ 中找到本节中使用的所有代码。