尝试在不使用npm或webpack的情况下使用vue js插件

Question

问题

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

我的问题

有没有办法让插件在我的 html 文件中工作，而不需要通过 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>

Answer 1

在目录中下载包，例如资产或静态，在您的 webroot 中，并使用 <script src="path_to that dir/js_file_you_need" /> 使其可用于您的页面。 CSS.

也一样

尝试在不使用npm或webpack的情况下使用vue js插件

Trying to use Vue js plug-ins without the use of NPM or webpack

javascript

cdn

npm

jqwidget

vue.js