NuxtJS：在页面组件中使用香草JS库(Pickr)

Question

我正试图实现一个 香草JS库 (特别是Pickr[]。https:/simonwep.github.iopickr])到我的NuxtJS项目中。

我使用NPM来安装它。

npm install @simonwep/pickr

在我的NuxtJS create.vue页面，我做了如下操作。

<template>
    <div>
        ..other HTML elements..
        <span class="color-picker"></span>
        ..other HTML elements..
    </div>
</template>

<script>
    import '@simonwep/pickr/dist/themes/classic.min.css';
    import Pickr from '@simonwep/pickr'

    export default {
        mounted() {
            // code below is taken from Github 
            const pickr = Pickr.create({
                el: '.color-picker',
                theme: 'classic', // or 'monolith', or 'nano'

                swatches: [
                    'rgba(244, 67, 54, 1)',
                    'rgba(233, 30, 99, 0.95)',
                    'rgba(156, 39, 176, 0.9)',
                    'rgba(103, 58, 183, 0.85)',
                    'rgba(63, 81, 181, 0.8)',
                    'rgba(33, 150, 243, 0.75)',
                    'rgba(3, 169, 244, 0.7)',
                    'rgba(0, 188, 212, 0.7)',
                    'rgba(0, 150, 136, 0.75)',
                    'rgba(76, 175, 80, 0.8)',
                    'rgba(139, 195, 74, 0.85)',
                    'rgba(205, 220, 57, 0.9)',
                    'rgba(255, 235, 59, 0.95)',
                    'rgba(255, 193, 7, 1)'
                ],

                components: {

                    // Main components
                    preview: true,
                    opacity: true,
                    hue: true,

                    // Input / output Options
                    interaction: {
                        hex: true,
                        rgba: true,
                        hsla: true,
                        hsva: true,
                        cmyk: true,
                        input: true,
                        clear: true,
                        save: true
                    }
                }
            });

        }
    }
</script>

当我导航到导入这个插件的页面时，我得到以下错误。

问题1:

我猜测这是因为它在试图找到 <span class="color-picker></span> 那是还没有的。我以为 "挂载 "是在模板渲染后执行的。我不明白的是什么？我该如何解决这个问题？

问题二：请问有什么方法可以将一个vanilla JS库作为插件使用？

有没有一种正确的方法可以把一个vanilla JS库作为插件使用？我看了这个 https:/nuxtjs.orgguideplugins。 但我不清楚这是哪种情况。很明显，这不是一个Vue插件，而是一个ES6插件，位于node_modules中。那么，如果我们想从每个页面都能访问这个插件，我们该如何解决这个问题呢？

问题3:

当我重启服务器（CMD+C，npm运行dev[服务器和客户端编译都OK]），并访问到了 http:/localhost:3000dashboardageRangescreate。，该库工作正常。

如果我重新加载该页面，就会出现之前的错误。

知道为什么吗？

Answer 1

似乎Picker本身也在访问窗口。所以即使在服务器端模式下导入也会导致错误。

这可以解决，但很棘手。基本上你需要把导入移到插件中，插件只在客户端模式下加载。

你可以使用我在下面的答案中提出的相同方法如何在nuxt中用ssr添加ckeditor的插件？(同样的问题，库正在访问窗口对象)