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

【问题标题】：Trying to use Vue js plug-ins without the use of NPM or webpack尝试在不使用 NPM 或 webpack 的情况下使用 Vue js 插件
【发布时间】：2020-09-17 07:59:03
【问题描述】：

问题

此时我正在按照下面显示的链接中的 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>

【问题讨论】：

这不是你要解决的问题，而是你的技术主管，因为他们是施加限制的人。基本上，您不能在模块外部使用import 语句，并且您正在加载的组件在内部使用import 命令。
感谢您的帮助，但解决这个问题是“我的任务”：/
你可以实现这个例子吗？

标签： javascript vue.js npm cdn jqwidget

【解决方案1】：

将包下载到一个目录中，例如assets 或 static，在您的 webroot 中并使用 <script src="path_to that dir/js_file_you_need" /> 使其可用于您的页面。 CSS 也一样。

【讨论】：