Что такое правильный способ, чтобы импортировать пакет Vue в nuxt?


Что такое правильный способ, чтобы импортировать пакет Vue в nuxt?

01.10.2020 05:01:51 Просмотров 3 Источник

Я пытаюсь импортировать этот пакет в свой проект nuxt. Все мои эксперименты по кодированию можно найти здесь. Я буду ссылаться на разные отрасли.

Есть несколько способов сделать это:

  1. Просто импортируйте его прямо на страницу, как здесь (главная ветвь)

Этот способ работал хорошо. Вы можете перейти на страницу загрузки с помощью кнопки на домашней странице.

home page example

Пока вы не обновите страницу вручную refresh page

Тогда вы получите эту ошибку SyntaxError Cannot use import statement outside a module

error message

Та же ошибка возникает, когда вы пытаетесь построить его.

  1. Импортируйте его через плагины (например, в ветке plugin-use с опцией vendor или без нее в build)

У меня та же ошибка.

  1. Импортируйте его через плагины с некоторыми опциями (например, в ветке plugin-options)

Затем пакет загружается только при обновлении страницы и только в режиме dev.

Если вы перейдете к этой кнопке на домашней странице ( на которую ссылались ранее) - там будет пустая страница.

  1. Импортируйте его через модули (например, в ветке модулей).

Тогда nuxt вообще не может загрузиться, эта ошибка происходит SyntaxError: Invalid or unexpected token

Не могли бы вы прокомментировать каждый метод и почему он не работает? Как правильно его импортировать?

У вопроса есть решение - Посмотреть?

Ответы - Что такое правильный способ, чтобы импортировать пакет Vue в nuxt? / What is the right way to import vue package in nuxt?

Tamzid Oronno

01.10.2020 06:43:59

Используйте его как плагин.

  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

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

Таким образом Вы сможете использовать пакет на любом компоненте вашего проекта

Является ответом!
Eugene

02.10.2020 07:49:41

Окончательный ответ следующий (я просмотрел проекты, которые используют этот пакет).

used by

Был проект, который работал на 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, 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

У меня все еще есть вопрос-почему это работает? :)

Помочь в развитии проекта:
Закрыть X