Vuejs和drupal

Question

我正在开发一个Drupal项目，我们用webpack编译主题的js和sass。当我们在不久的将来移动到其他后端（Laravel）时，我们的想法是在前端使用vuejs。所以在我们看来，一个好主意，同时，开始在一些页面和组件中使用vuejs，所以我们可以开始学习它。我有角度和反应的经验但没有vue。我添加它vue，vue-loader等，但似乎很难使它工作，我不确定哪个可能是在这个方案中实现/添加vuejs的最佳方式。任何推荐或链接都会对我们非常有帮助。

Answer 1

简介

Vue是不错的选择，因为在你的情况下有两个原因：

1）学习比Angular和React

最简单

2）它是渐进式的 - 这意味着您只能在现有项目的受约束部分轻松使用它。

如果你看一下Vue实例生命周期的停靠点

  

https://vuejs.org/v2/guide/instance.html

您将看到创建模板的一些选项，并将其与vue实例连接。

a）by＆＃34; el＆＃34;选项 - 从dom中选择现有元素

b）通过模板选项

• 包括模板作为字符串

• 按类型text/x-template

的脚本ID选择模板

您可以在页面加载后立即使用Vue或稍后安装它，以便您具有灵活性。

实施例

我理解你的问题是关于将vue与drupal集成的最简单方法。我认为这些在简单的html页面上使用Vue的例子对你有帮助。

最简单的方式

最简单的方法是使用el选项并从cdn加载Vue。 （记得关于将cdn改为生产时缩小）

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app" v-cloak>
    <h1>{{ heading }}</h1>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data: { heading: "Hello World" }
    });
</script>

使用text/x-template

<div id="app"></div>

<script id="app-template" type="text/x-template">
    <div>
        <h1>{{heading}}</h1>
    </div>
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<script>
    let v = new Vue({
        template: `#app-template`,
        data: { heading: "Hello World" }
    });

    v.$mount();

    document.querySelector("#app").appendChild(v.$el);
</script>