在vue组件中加载美人鱼(webpack)

Question

我正在将一个使用美人鱼的vue项目从CDN迁移到webpack。我对它完全陌生。我在项目文件夹中安装了npm并保存了美人鱼。

如果我将美人鱼cdn加载为静态js (在/public/index.html中)，它会崩溃一些图形(显示炸弹图标，表示语法错误)

如果在webpack中，它不会显示为美人鱼图形，但似乎加载为空(使用浏览器工具检查生成的html )。无控制台错误

<svg id="mermaidChart0" width="100%" xmlns="http://www.w3.org/2000/svg"><g><g class="output"><g class="clusters"></g><g class="edgePaths"></g><g class="edgeLabels"></g><g class="nodes"></g></g></g></svg>

已尝试: //package.json

...
  "dependencies": {
    "axios": "^0.21.0",
    "core-js": "^3.6.5",
    "mermaid": "^8.8.2",

在component.vue中

<template>
...
      <div class="mermaid m-5">
        graph LR

        B(dsfgdsfgsd <br>) --> Bo(gdfshfghfdh <br>)
...


<script>

    import mermaid from 'mermaid'
    
    export default {
      data: function() {
        return {}
      },
      mounted() {
        this.init();
      },
      methods: {
        init: function() {
          mermaid.initialize({
            theme: 'forest',
    
            htmlLabels: true,
            //startOnLoad: true
          });
          console.log(mermaid);
          mermaid.init(undefined, document.querySelectorAll('.mermaid'));
        }
      }
    }

Answer 1

如果你想要一个现成的解决方案，你可以使用my component vue-mermaid-string。它会为你做内部工作。

通过NPM安装，然后通过CDN脚本或通过添加组件将其添加到您的项目中，然后按如下方式使用：

<template>
  <vue-mermaid-string :value="diagram" />
</template>

<script>
export default {
  computed: {
    diagram: () => 'graph TD\n  A --> B',
  },
}
</script>