如何在 Nuxt 中拥有像 turn.js 这样的动画书？

Question

如何将 turn.js 导入到 nuxt.js 项目。当我通过插件使用时，错误 Window 未定义，即使我在客户端模式下使用它

更新：我使用了必需的包检查是客户端，但我收到错误 jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...)。 turn 不是函数

<template>
    <div id="flipbook">
        <div class="hard">
            Turn.js
        </div>
        <div class="hard" />
        <div> Page 1 </div>
        <div> Page 2 </div>
        <div> Page 3 </div>
        <div> Page 4 </div>
        <div class="hard" />
        <div class="hard" />
    </div>
</template>

<script>
    import $ from 'jquery';

    if (process.client) {
        require('turn.js');
    }

    export default {
        mounted() {
            console.log($('#flipbook').turn('page'));
            $('#flipbook'.turn({
                width: 400,
                height: 300,
                autoCenter: true,
            }));
        },

    };
</script>

Answer 1

编辑 + TLDR：使用 flipbook-vue 因为它确实在任何方面都更好（重量、维护、灵活性，不依赖于 jQuery等等……）。
这也与 Nuxt 完美配合 shown here.

如果你需要安装jQuery到你的Nuxt项目中（我不推荐），你可以按照。不过，没有 jQuery 的替代方案将不胜感激 IMO，如果您仅使用它来选择 DOM 中的元素，则更是如此。值 20kb 吗？

如果您希望将特定元素定位到您的组件中，请使用 $refs syntax, as explained in this other answer。而不是通常的 querySelector。

require 是 node-based，您应该使用 import，因为在使用 Vue 时您处于基于现代浏览器的生态系统中。因此，使用在本地导入您的包仍然是最好的方法。

TLDR：像这样的东西通常足以让它工作

<template>
  <div id="flipbook" ref="flipbook">
    <div class="hard">
      Turn.js
    </div>
    <div class="hard" />
    <div> Page 1 </div>
    <div> Page 2 </div>
    <div> Page 3 </div>
    <div> Page 4 </div>
    <div class="hard" />
    <div class="hard" />
  </div>
</template>

<script>
export default {
  async mounted () {
    if (process.client) {
      const turnJs = await import('turn.js')
      this.$refs.flipbook.turnJs.turn({
        width: 400,
        height: 300,
        autoCenter: true,
      })
    }
  }
}
</script>

同时，该项目已经 10 年没有得到任何更新，所以我想你可以传递这个。

用一点 CSS + JS 编写自己的代码也是完全可行的，并且会提供 IMO 的最佳结果。

如何在 Nuxt 中拥有像 turn.js 这样的动画书？

How to have a flipbook like turn.js in Nuxt?

javascript

jquery

vuejs2

nuxt.js