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

Question

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

• 更新：我使用了客户端所需的包检查，但出现错误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 完美配合，如所示。

---

如果您需要将 jQuery 安装到 Nuxt 项目中（我不推荐），您可以按照我的回答。不过，在我看来，不使用 jQuery 的替代方案将非常受欢迎，如果您只是使用它来选择 DOM 中的元素，则更是如此。值20kb吗？

如果您想针对组件中可用的特定元素，请使用

$refs

语法，如本其他答案中所述。而不是通常的查询选择器。

require

是基于节点的，你应该使用

import

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

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 自己编写也是完全可行的，并且在我看来会提供最好的结果。