Question

这是我的设置：

现有的前端应用程序（带有很多jQuery）
带有Webpack和vue-loader的Vue.js 2.5
某些具有CSP限制的环境

要逐步转换应用程序，我开始创建第一个单个文件组件，并将其添加到现有HTML几次。因为我已有服务器端模板渲染，所以无法添加包装器并将所有html移动到Vue模板中。

我只是将新的自定义元素添加到现有HTML中，并希望Vue.js在Document.ready之后替换它们并“注入”逻辑。

所以我有两个问题：

在DOM中安装我的新元素的所有外观
使用预渲染的模板函数来避免CSP问题

因此，我最终构建了此文件（针对我的新自定义元素）：

import Vue from 'vue';
import ProductFavorite from './ProductFavorite/ProductFavorite.vue';

const toCamelCase = (string) => string.replace(/-([a-z])/g, g => g[1].toUpperCase());

const modulesToMount = [
  {
    domSelector: 'product-favorite',
    vueModule: ProductFavorite
  }
];


// For all Modules
modulesToMount.forEach(module => {

  // For each appear of the element in de DOM
  document.querySelectorAll(module.domSelector).forEach(e => {

    // Create Props-Object from HTML
    const bindProps = {};
    for (let i = 0; i < e.attributes.length; i++) {
      bindProps[toCamelCase(e.attributes[i].name)] = e.attributes[i].value;
    }

    // Init the Module
    new Vue({
      el: e,
      render: h => h(module.vueModule, { props: bindProps })
    });
  });

});

我感觉Vue.js已经实现了又一遍（例如从html节点创建道具或找到所有要绑定的元素）。

还有其他方法可以解决此问题吗？

Vue.js：使用不带“根”元素的预完成模板

0 个答案: