在没有 webpack 的情况下使用 Vue js 组件答案

【问题标题】：Using Vue js component without webpack在没有 webpack 的情况下使用 Vue js 组件
【发布时间】：2019-02-09 01:43:44
【问题描述】：

尝试从 jQuery 网页迁移到 VueJs。

我认为将网页完全重建为基于 vue-cli 的模板代码可能很困难。

所以第一步是在没有 webpack 的情况下将 jQuery 迁移到 vuejs。这意味着所有页面都保留单个页面而不是 SPA。所以每个页面都包含带有<script>标签的vue.js。

我坚持使用 jQuery 滑块。

原始代码看起来像$( ".slider" ).slider({...。

将 jQuery 的滑块转换为 vue-slider-component 卡住了，因为我不知道如何从 vue 组件中制作静态 js。

我的期望在下面。

<head>
<script src="https://unpkg.com/vue"></script>
<script src="vue-slide.js"></script> <-- like this
</head>
<body>
 <vue-slider v-ref:slider :value.sync="value"></vue-slider>
 ...
 <script>
  new Vue({ ...
 </script>
</body>

这是愚蠢的想法吗？

在不付出高昂成本的情况下将 jQuery 转换为 vuejs 的最佳实践是什么？

【问题讨论】：

jQuery 和 Vue 之间没有一对一的转换，它们的工作方式和做的事情完全不同。你必须决定是想让整个网页由一个主 Vue 实例控制，还是只希望网页的某些部分成为 Vue 组件；我猜你想要后者，这不是典型的 Vue 设置。
是的，没错。我希望以后只有网页的某些部分是 Vue 组件。我的幼稚想法是在需要修改时一页一页地迁移。
这篇文章很好地总结了你的可能性，我建议你使用选项3（x-templates）：vuejsdevelopers.com/2017/03/24/vue-js-component-templates。您上面的代码不起作用，因为您需要在使用之前初始化 Vue 实例和模板。

标签： javascript jquery vue.js webpack

【解决方案1】：

直到现在，我经常使用内联 vuejs。我认为这是从遗留代码迁移到完整 SPA 的不错选择。

例如，以下代码是我用于迁移的代码。

<head>
    <script src="lib/vue.min.js"></script>
    <script src="lib/bootstrap-vue.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#slider').nivoSlider({
            pauseTime: 3000
        });
    });
    </script>
</head>

<body>
    <div id="app">
        <div v-cloak>
            <div id="header">
                <div class="nav" style="display: block;">
...
    </div>
    <script language="javascript" type="text/javascript">
    Vue.component('room', {

...

    })

    const app = new Vue({
        el: "#app",
        component: [
            'room'
        ],
...

    </script>
</body>

</html>
...

【讨论】：