尝试在不使用NPM或webpack的情况下使用Vue-js插件



问题

目前,我正在遵循下面显示的链接中的jqwidgets指南来构建一个下拉框。他们设置的唯一问题是他们使用了IMPORT功能,由于我的技术负责人的限制,我无法使用该功能。

我的问题

有没有一种方法可以让插件在我的html文件中工作,而不需要IMPORT功能,例如通过CDN?

也许还有一个更重要的问题,在不使用webpack和NPM的情况下,是否可以使用Vue JS及其插件?

Jqwidgets Vue

https://www.jqwidgets.com/vue-components-documentation/documentation/jqxdropdownlist/vue-dropdownlist-getting-started.htm?search=dropdown

我尝试过的关于CDN,我尝试过实现这一部分,但没有取得多大成功,下面是我当前的代码:

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style  src="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css"></style>
<script src="https://unpkg.com/vue@latest"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts@10.1.3/jqwidgets/jqx-all.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="app">
<jqx-DropDownList @select="onSelect($event)"
:width="200" :height="25"
:source="source" :selectedIndex="1">
</jqx-DropDownList>
</div>

<script type="text/javascript">

var filter = new Vue({
el: '#app',
components: {
'jqx-dropdownlist': httpVueLoader('https://cdn.jsdelivr.net/npm/jqwidgets-scripts@10.1.3/jqwidgets-vue/vue_jqxdropdownlist.vue')
},
data: function () {
return {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Café Bombón',
'Café au lait',
'Caffé Corretto',
'Café Crema',
'Caffé Latte',
'Caffé macchiato',
'Café mélange',
'Coffee milk',
'Cafe mocha',
'Cappuccino',
'Carajillo',
'Cortado',
'Cuban espresso',
'Espresso',
'Eiskaffee',
'The Flat White',
'Frappuccino',
'Galao',
'Greek frappé coffee',
'Iced Coffee',
'Indian filter coffee',
'Instant coffee',
'Irish coffee',
'Liqueur coffee'
]
}
},
beforeCreate: function () {            
// Add here any data where you want to transform before components be rendered
},
methods: {
methods: {
onSelect: function () {
this.$refs.dropdownlist.close();
}
}
},
events: {
dataplotRollover: function (ev, props) {
chart.displayValue = props.displayValue
}
}
});
</script>
</body>
</html>

在webroot中的目录(例如assets或static(中下载包,并使用<script src="path_to that dir/js_file_you_need" />使其可用于您的页面。CSS也是如此。

相关内容

  • 没有找到相关文章

最新更新