Как добавить компонент NPM vuejs в конце HTML-страницы

Question

У меня есть PHP-приложение, созданное на основе MVC. На некоторых страницах у меня есть сложные, высокоинтерактивные компоненты, которые были созданы с помощью vuejs. Компоненты написаны как однофайловые компоненты и связаны с веб-пакетом. Это работает очень хорошо. Внизу html-страницы я загружаю компонент такой строкой:

<script src="js/my_vue_component"></script>

Теперь я хочу дополнить это, используя компоненты Vue на специальной основе. Например, я мог бы использовать компонент Vue Date Picker в форме. В этих случаях я не хочу создавать дополнительные файлы-компоненты.

Какой лучший способ сделать это? Vue и его сторонние пакеты управляются через NPM.

Я попытался загрузить код следующим образом:

<script>
    import Vue from "vue";
    import DatePicker from "vuejs-datepicker";
    const date1 = new Vue({
        el: '#respond_by',
        components: {
            'date-picker' : DatePicker
        }
    });
</script>

Но я получил сообщение о том, что import declarations may only appear at top level of a module.

Затем я попытался «требовать» vue и vuejs-datepicker, но обнаружил, что require is not defined.

Есть ли простой способ сделать это, не прибегая к CDN, или я должен просто вернуться к компонентам с одним файлом?

Answer 1

Прочитайте это: https://vuejs.org/v2/guide/components-registration.html#Local-Registration

Внутри тега сценария компонентов:

<template>
    <div>
        <date-picker></date-picker>
    </div>
</template>

<script>
import DatePicker from "vuejs-datepicker";    
export default {
  components: {
    'date-picker': DatePicker
  }
}
</script>

Вы также можете зарегистрировать компонент глобально, объявив его в своем основном файле JavaScript, где вы создаете Vue.

Новые компоненты НЕ создают новый экземпляр Vue.