Question

我构建了一个Vue component打包的"build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue"。在dist文件夹中，我有：

demo.html
my-component.common.js
my-component.udm.js
my-component.udm.min.js

现在，对于GitHub Page出版物，我正在构建一个页面，解释该组件的详细信息和功能。我将使用/docs文件夹作为GitHub Page的根目录（我不想使用gh-pages分支）。

为此，我必须构建一个没有Vue，Vue CLI左右的基本Webpack应用。

index.html看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/my-component.umd.js"></script> 
  ...
  </head>

  <body>
    ...
    <div id="app">..</div>
    ...
    <script type="module">
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        },
        components: {
          myComponent: my-component   
        }
      })
    </script>
  </body>
</html>

信息：我将dist/my-component.umd.js复制到了docs/js文件夹中，以便拥有一个独立的文件夹。

如果我不使用Vue脚本中的组件，则该页面会很好地工作（Vue正常工作）。但是，当我使用组件时，页面显示此错误(index):199 Uncaught ReferenceError: vue is not defined，该错误直接指向myComponent: my-component。

有什么想法或建议吗？

Answer 1

尝试将脚本放在应用代码之前的主体部分中。否则，可以在运行您的应用程序代码后

加载Vue库

r'(?=.*[a-zA-Z])(\S+\S+\S+

如何在基本的Vue html文件中使用Vue组件（.udm.js）？

1 个答案: