我是 vuejs 的新手。 我有一个网站,我想在某些页面中使用 vuejs。 该页面由 laravel、jquery 等构建,我想在该页面的特定区域使用 vuejs 可拖动组件。
https://kutlugsahin.github.io/vue-smooth-dnd
https://github.com/SortableJS/Vue.Draggable
大家都说Vuejs好,轻松上手跑服务。但不适合我。 我想在没有 WebPack 构建过程的情况下在我现有的 HTML 页面中使用上面的 vue 组件。
也就是说,我只会用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只是简单的 html 和 js。 (如果可能,不要使用导入的东西)
我读了文章How to use a VueJS .vue component in a HTML page without a WebPack build process? ,
他们说“poi”是最好的解决方案。 最后的答案,他们说我必须使用 "import Component from ..." .
我不能在我当前的纯 html 页面上使用“导入”。 (因为我不使用 webpack 等)
有没有人可以轻松告诉我真正的解决方案?
最佳答案
如果您不使用 Webpack,那么您可以只将 .js 文件包含到您的 HTML 页面中 - 使用 CDN 或本地文件(您可以通过输入以下链接获取它们并另存为.. ):
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
简单示例:
var vm = new Vue({
el: '#app',
data() {
return {
list: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE', 'FFF']
};
}
});
body {
font-family: "Open Sans", sans-serif;
}
.drag-container {
margin: 5px 10px;
display: flex;
}
.drag-item {
border: 1px solid grey;
padding: 2px;
margin: 5px;
cursor: move;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>
<div id="app">
<h1>Vue Dragable Test</h1>
<draggable :list="list" class="drag-container">
<div v-for="item in list" class="drag-item">{{ item }}</div>
</draggable>
</div>
关于vue.js - 如何在我的静态 HTML 中直接使用其他 vuejs 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51053951/