尝试从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的最佳实践是什么？
到目前为止，我经常使用内联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>
...
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句