Vuejs和drupal

Question

我正在做一个Drupal项目，在那里我们和webpack一起编写了主题的js和sass。随着我们在不久的将来转移到其他后端(Laravel)，我们的想法是在前端使用vuejs。因此，在我们看来，这是一个好主意，同时，在一些页面和组件中开始使用vuejs，这样我们就可以开始了解它了。我有棱角和反应的经验，但对vue却没有经验。我添加了vue、vue-加载器等，但似乎无法使其工作，我不确定在这个escenario中实现/添加vuejs的最佳方法是什么。任何推荐或链接，我们将非常有帮助。

Answer 1

引言

Vue是很好的选择，因为在您的案例中有两个原因：

1. 它是最简单的学习比角度和反应
2. 它是渐进的-它意味着你可以很容易地使用它只在你现有项目的约束部分。

如果您查看Vue实例的生命周期的坞

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

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

a) "el“选项-从dom中选择现有元素

( b)按模板选择

• 将模板包含为字符串
• 用text/x-template类型按脚本id选择模板

您可以在页面加载后立即使用Vue，或者稍后再挂载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>