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

Question

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

javascriptvue.jsvuejs2vue-componentgithub-pages

3

我建立了一个 Vue组件 ，它被打包到 "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 CLI、Webpack等的 Vue 应用程序。 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。

有什么想法或建议吗？

- Yann Masoch

1

那是一个公共的 Github 网站吗？如果是，请包含链接。 - Paul

1

请注意，my-component本身不是一个有效的标识符; 它是一个二进制表达式 my - component。这可能会导致引用错误。请尝试使用window['my-component']。 - Christian C. Salvadó

@Paul 这个组件已经在 GitHub 上公开了，但是页面上还没有（目前）。供参考，GitHub 链接为 https://github.com/yannmasoch/vue-image-alpha - Yann Masoch

@CMS 我会尝试使用 window['my-component'] - Yann Masoch

1

@CMS 你对组件名称的看法是正确的。所以有两种解决方案：使用 window['my-component'] 或者重新打包具有有效名称（例如 myComponent - myComponent.umd.js）的组件。请在下面编写您的答案/解决方案，我会进行验证。 - Yann Masoch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DevHowTo · Answer 1

尝试将脚本放在应用代码之前的正文部分。否则，Vue库可能会在运行应用程序代码后加载。

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  ...
  </head>

  <body>
    ...
    <div id="app">..</div>
    ...
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/my-component.umd.js"></script> 
    <script type="module">
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        },
        components: {
          myComponent: my-component   
        }
      })
    </script>
  </body>
</html>