Nuxt Vue2 应用，添加 Vue-Touch 包

Question

我想获取触摸“平移”事件的 xy 坐标数据，用户在该事件中按下手指并拖动它。我正在使用带有 Nuxt 的 Vue2 并尝试添加 Vue-Touch Package。

我使用 npm 安装了该软件包，然后通过在“plugins”文件夹中添加一个“touch”文件夹（包括一个“index.js”文件）向我的 Nuxt 设置添加了一个插件：

import Vue from 'vue'; 
import VueTouch from 'vue-touch';
Vue.use(VueTouch, {name: 'v-touch'});
export { VueTouch };
export default VueTouch;

然后，我在我想要画布的页面中创建了一个元素<v-touch v-on:tap="myClickEvent">My Element</v-touch>。我正在尝试注册一个点击事件，以确保包在我移动到平底锅之前正常工作。

当我运行我的项目时，出现两个错误：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

&

[Vue warn]: Unknown custom element: <v-touch> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

对让我的 Vue-Touch 包正常工作有什么建议吗？

提前致谢。

Answer 1

您是否将配置添加到nuxt.config.js 文件的plugins 部分？

module.exports = {
  plugins: [{
    src: '~plugins/touch',
    ssr: false
  }]
}