Question

尝试从jQuery网页迁移到VueJs。

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

第一步是将jQuery迁移到不带Webpack的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的最佳实践是什么？

Answer 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>
...

在不使用Webpack的情况下使用Vue js组件

1 个答案: