文章/答案/技术大牛

发布

社区首页 >问答首页 >尝试使用Vue js插件，而不使用NPM或webpack。

问尝试使用Vue js插件，而不使用NPM或webpack。
EN

Stack Overflow用户

提问于 2020-09-17 07:59:03

回答 1查看 145关注 0票数 1

问题

此时，我正在遵循下面显示的链接中的jqwidget指南来构建一个下拉列表。它们设置的唯一问题是它们使用了由于来自我的技术领先的限制而无法使用的导入功能。

我的问题

是否有一种方法可以使插件在我的html文件中工作，而不需要通过例如CDN的导入功能？

也许更重要的是，如果不使用webpack和NPM，是否有可能利用Vue JS和它的插件？

Jqwidgets

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>

jqwidget

javascript

vue.js

npm

cdn

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-17 09:15:42

在webroot中下载目录中的包(例如资产或静态包)，并使用<script src="path_to that dir/js_file_you_need" />将其提供给您的页面。CSS也是如此。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63933700

复制

相似问题

问尝试使用Vue js插件，而不使用NPM或webpack。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用Vue js插件，而不使用NPM或webpack。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用Vue js插件，而不使用NPM或webpack。
EN