在没有 webpack 的情况下使用 Vue js 组件
Posted
技术标签:
【中文标题】在没有 webpack 的情况下使用 Vue js 组件【英文标题】：Using Vue js component without webpack 【发布时间】：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 实例和模板。 【参考方案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 组件的主要内容，如果未能解决你的问题，请参考以下文章
在没有 webpack 的情况下使用 VueJs 和 Typescript
不使用 webpack 或 browserify 将 .vue 文件编译成 .js 文件
72.vue开发工具node.js以及构建工具webpack