如何与nuxtjs一起使用vue-color

Question

如何将Vue-Color导入我的项目？当我尝试导入和渲染组件时，

<template>
  <div class="helloWorld">
    <Chrome />
  </div>
</template>

<script>
  import { Chrome } from 'vue-color'

  export default {
    components: {
      'chrome-picker': Chrome
    },
  }
</script>

我会收到此错误，

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <Chrome> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Anonymous>
       <Root>

如何导入Vue-Color并将其在我的nuxt.js/vue.js项目中使用？

Answer 1

事实证明，Vue-Color不支持服务器端渲染，这是NUXT.JS遇到此组件问题的地方。您需要仅在客户端上渲染组件，这比将直接导入到文件中要多一些。

首先，您需要在插件目录中创建一个新文件，称为“ myplugin.client.js”。通过添加client.js零件，我们告诉nuxt.js，此插件仅在客户端上呈现。 （注意：还有一个.server.js扩展名仅用于服务器渲染）。

在此文件中，我们需要将我们的选择器添加到我们的项目中，并

import Vue from 'vue'
import { Chrome } from 'vue-color'

Vue.component('chrome-picker', Chrome)

保存以下文件，然后我们需要在nuxt.config.js中导入该文件。在该文件中，找到您的“插件”并添加文件。 在这种情况下，您的插件属性应该喜欢这样的东西

plugins: [
  { src: '~/plugins/ColorPicker.client.js', mode: 'client'},
],

，“模式：'client'”有些多余，因为我们已经指定给NUXT，我们的插件仅在.client.js.js扩展很好地衡量。

现在，要引用我们的新组件，我们将在您的vue-color组件中添加以下代码，

<client-only>
  <chrome-picker :value="primaryColor" @input="updateColor" class="colorPicker"/>
</client-only>

现在应该按计划渲染。我希望这对我感到非常困惑，对此有所帮助。

Answer 2

您的答案假设您将使用插件中的包装，这意味着：

• 它将在您的应用程序中全球可用（而不是仅在一个地方），
• 它将在整体上增加加载时间，因为
• 在这种情况下最初加载了插件，添加很好
  25.5kb

如果要在一个地方加载vue-color，也可以使用一个地方，则可以使用在一个地方使用的解决方案我的在此处回答 aka aka

export default {
  components: {
    // a destructuring step may be further needed here? like { Chrome }
    [process.client && 'chrome-picker']: () => import('vue-color'),
  }
}

这将确保仅在客户端和该页面/组件上本地加载软件包。