问题描述
我知道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>