在Javalin和Vue中使用webjars

如何解决在Javalin和Vue中使用webjars

我知道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）的完整答案，但是解决了这个问题，所以我只接受作为一种解决方法。

”通过将CD https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js作为标签添加到您的layout.html中，通过CDN添加bootstrap-vue。完成此操作后，所有bootstrap vue组件都会自动导入，并且您可以在组件内部使用它们，例如Hello，world！。”

我已经使用 vue 和 Javalin 工作了很短的时间，但我终于明白了，当你在 Javalin 服务器上使用 Vue 时，你是在 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,80,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>