将webjars与Javalin和Vue结合使用

Question

我知道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支持，因为如果我将上面几行代码添加到顶层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。

我确信我没有抓住要点，所以我非常感谢任何人的帮助，如何做到这一点。

Answer 1

这并不完全是我最初问题的答案(使用webjars)，但它解决了这个问题，所以我接受作为一种变通办法。

“通过CDN添加bootstrap-vue，将(例如) 作为标签添加到您的layout.html中。完成此操作后，所有bootstrap vue组件都会自动导入，您可以像Hello，world！一样在组件中使用它们。”

Answer 2

我使用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，你只需要用'name of component':httpVueLoader('module route')替换import { component } from 'module'。下面是一个适用于我从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>

​