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

编程问答 2022-06-13

问题描述

问题

此刻，我正在遵循下面显示的链接中的jqwidgets准则来构建下拉列表。他们设置的唯一问题是他们使用了IMPORT功能，由于我的技术主管的限制，我无法使用它。

我的问题

是否有办法使插件在我的html文件中工作，而没有通过CDN等IMPORT功能？

也许是一个更重要的任务，是否可以在不使用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>

解决方法

在目录中下载软件包，例如资源或静态文件，请使用<script src="path_to that dir/js_file_you_need" />使它可用于您的页面。 CSS也一样。

cdnjavascriptjqwidgetnpmnpmnpmvue.js