Блог

Я знаю, что Javalin поддерживает Vue, и я использую его без проблем. Его легко настроить, мне нужно было только вызвать config.enableWebjars() , а использование Vue довольно простое и простое. Тем не менее, я хотел бы использовать другие инструменты, которые не глубоко интегрированы с Javalin. А именно, я хотел бы использовать bootstrap-vue для компонентов высокого уровня. Обычно, когда я использую его через npm и ручную настройку, также просто добавить поддержку в Vue:

 import Vue from 'vue'
import { BootstrapVue } from 'bootstrap-vue'

// Install BootstrapVue
Vue.use(BootstrapVue)
  

Однако это не может быть напрямую переведено на поддержку Javalin Vue, потому что, если я добавлю вышеуказанные строки на верхний уровень layout.html :

 <script>
    import { BootstrapVue } from 'bootstrap-vue'

    var vue = new Vue({el: "#main-vue"});
    Vue.filter("numFormat", function(value) {
        if (value == undefined) return ""
        else return value.toString().replace(/(d)(?=(d{3}) (?!d))/g, '$1,')
    });
    Vue.config.devtools = true
    Vue.use(BootstrapVue)

</script>
  

Я получу сообщение об ошибке: Uncaught SyntaxError: import declarations may only appear at top level of a module .

Я уверен, что я пропустил главное, поэтому я был бы очень признателен за любую помощь, как это сделать.

Это не совсем ответ на мой первоначальный вопрос (с использованием webjars), но решает проблему так просто, что я принимаю это как обходной путь.

«добавьте bootstrap-vue через CDN, добавив (например) https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js в качестве тега к вашему layout.html . Как только вы это сделаете, все компоненты bootstrap vue будут автоматически импортированы, и вы сможете использовать их как Привет, мир! внутри ваших компонентов «.

я работал с vue и Javalin в течение короткого времени, но я, наконец, понял, что, когда вы работаете с Vue с сервером Javalin, вы подчиняетесь правилам ES6, поэтому для импорта модуля с расширением .js вам нужно указать, что вы работаете с модулями, что-то вроде <script type="module">//Imports and code</script> . Теперь, если вам нужно импортировать из файла .vue, вы можете использовать http-vue-loader, вы можете получить зависимость maven здесь: https://mvnrepository.com/artifact/org.webjars.npm/http-vue-loader , вам нужно только заменить import { component } from 'module' на 'name of component':httpVueLoader('module route') . Небольшой пример, который работает для меня при импорте из файла js:

 <script type="module">
  import BarExample from '/componentsjs/BarExample.js'
  import LineExample from '/componentsjs/LineExample.js'
    Vue.component("charts-page", {
        template: "#charts-page",
        components: {
              BarExample,
              LineExample,
            },
            data: () => ({
                dataPoints: null,
                height: 20,
                labelsBar: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                dataBar: [40, 20, 12, 39, 11, 40, 39, 80, 40, 20, 12, 11]
              }
            ),
    });
</script>  

И пример импорта файлов .vue:

 <script type="module">
Vue.component("main-component-page", {
    template: "#main-component-page",
    components: {
        'app-header': httpVueLoader('/component/header.vue'),
        'app-ninjas': httpVueLoader('/component/ninjas.vue'),
        'app-footer': httpVueLoader('/component/footer.vue')
    },
});
</script>