在 nuxt 中导入 vue 包的正确方法是什么？

Question

我尝试将 this 包导入到我的 nuxt 项目中。可以找到我所有的编码实验 here。我会参考不同的分支。

有几种方法可以这样做：

只需在 here (master 分支之类的页面中直接导入即可)

这种方式效果很好。您可以通过主页上的按钮进入上传页面。

直到您手动刷新页面

然后你会得到这个错误SyntaxError Cannot use import statement outside a module

当您尝试构建它时会发生同样的错误。

通过 plugins (like in plugin-use 分支导入它，在构建中有或没有供应商选项）

我遇到了同样的错误。

通过带有一些 options (like in plugin-options 分支的插件导入它）

然后包仅在您刷新页面时加载，并且仅在开发模式下加载。

如果您将转到主页上的那个按钮（之前引用过）- 将出现一个空白页面。

通过模块导入它（就像在 modules 分支中）。

然后nuxt根本无法加载，出现这个错误SyntaxError: Invalid or unexpected token

您能否评论一下每种方法以及为什么它不起作用？如何正确导入？

Answer 1

作为插件使用。

在插件文件夹中，创建一个名为vue-upload-multiple-image.js

的文件

//vue-upload-multiple-image.js

import Vue from 'vue'
import {VueUploadMultiple} from 'vue-upload-multiple-image'
Vue.use(VueUploadMultiple)

将其列在 nuxt.config.js

的插件块下

//nuxt.config.js

plugins: [ 
      { src: '~plugins/vue-upload-multiple-image', ssr: false }
]

因此您将能够在项目的任何组件上使用该包

Answer 2

最终答案如下（我查过使用这个包的项目）

Nuxt 上有一个 project 运行。

这些是您应该添加到@tamzid-oronno 的答案中的更改

//vue-upload-multiple-image.js

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import VueUploadMultipleImage from 'vue-upload-multiple-image'

Vue.use(VueLazyload) // this is from the package installation guide
Vue.component('VueUploadMultipleImage', VueUploadMultipleImage)

并以同样的方式在插件中列出。

//nuxt.config.js
plugins: [ 
      { src: '~plugins/vue-upload-multiple-image', ssr: false }
]

这样您就可以使用该包而无需将其作为标签导入到页面中。这是在 plugin_plus_lazy 分支中实现的。

两个标签都可以工作 vue-upload-multiple-image 和 VueUploadMultipleImage。

//your-index-file.vue
<template>
  <div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
    <vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      :data-images="images"
      idUpload="myIdUpload"
      editUpload="myIdEdit"
      dragText = "Drag an image here"
      browseText = "(or click here to browse)"
      primaryText = "Default Image"
      markIsPrimaryText = "Set as default image"
      popupText = "This image will be set as default"
      dropText = "Drag and drop"
      accept = image/jpeg,image/png,image/jpg,image/tif,image/tiff
    ></vue-upload-multiple-image>
  </div>
</template>

<script>

export default {
  name: "AppUpload",
  data(){
    return{
      file:"",
      images: []
    }
  },
  methods:{

    uploadImageSuccess(formData, index, fileList) {    },
    beforeRemove (index, done, fileList) {    },
    editImage (formData, index, fileList) {   },
  }
}
</script>

<style scoped>

</style>

要创建静态版本并在本地机器上测试它，请执行以下操作：

$ npm run generate
# test the project
$ npm install http-server
$ cd dist
$ http-server -p 3000

我还有一个问题 - 为什么它有效？ :)

在 nuxt 中导入 vue 包的正确方法是什么？

What is the right way to import vue package in nuxt?

vue.js

npm

nuxt.js

npm-package