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

编程问答 2022-06-11

问题描述

我尝试将this软件包导入我的nuxt项目。 我所有的编码实验都可以在here中找到。我将引用不同的分支。

有几种方法可以这样做：

  1. 只需将其导入到页面中即可，例如here（master分支）

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

home page example

直到您手动刷新页面

refresh page

然后您将收到此错误SyntaxError Cannot use import statement outside a module

error message

尝试构建它时也会发生相同的错误。

  1. 通过plugins进行导入（例如在plugin-use分支中，在构建中有无卖方选项的情况下）

我有同样的错误。

  1. 通过带有某些options的插件（例如在plugin-options分支中）导入

然后，仅当刷新页面且仅在开发模式下，程序包才会加载。

如果您要转到主页上的该按钮（之前已引用），则会有一个空白页。

  1. 通过模块（如modules分支中的模块）导入。

然后nuxt根本无法加载，发生此错误SyntaxError: Invalid or unexpected token

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

解决方法

将其用作插件。

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

    //vue-upload-multiple-image.js

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

  2. 在nuxt.config.js上的plugins块下列出它

    //nuxt.config.js

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

因此您将可以在项目的任何组件上使用该程序包

,

下面是最终答案（我已经查找了使用此软件包的项目）。

used by

有一个project在Nuxt上运行。

这些更改应该添加到@ 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,editImage (formData,fileList) {   },}
}
</script>

<style scoped>

</style>

要创建静态版本并在本地计算机上对其进行测试，请执行以下操作：

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

我还有一个问题-为什么起作用？ ：）

npmnpmnpmnpm-packagenuxt.jsvue.js