Javascript 如何在基本Vue html文件中使用Vue组件（.udm.js）？_Javascript_Vue.js_Vuejs2_Vue Component_Github Pages

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

javascript vue.js vuejs2

Javascript 如何在基本Vue html文件中使用Vue组件（.udm.js）？,javascript,vue.js,vuejs2,vue-component,github-pages,Javascript,Vue.js,Vuejs2,Vue Component,Github Pages,我构建了一个Vue组件，它与的“构建包”打包在一起：“Vue cli服务构建--目标库--命名我的组件。/src/myComponent.Vue”。在dist文件夹中，我有： demo.html my-component.common.js my-component.udm.js my-component.udm.min.js 现在，对于GitHub页面出版物，我正在构建一个页面，解释组件的细节和特性。我将使用/docs文件夹作为GitHub页面的根目录（我不想使用gh-pages分支）为

我构建了一个

Vue组件

，它与

的“构建包”打包在一起：“Vue cli服务构建--目标库--命名我的组件。/src/myComponent.Vue”

。在

dist

文件夹中，我有：

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

现在，对于

GitHub页面

出版物，我正在构建一个页面，解释组件的细节和特性。我将使用

/docs

文件夹作为

GitHub页面的根目录（我不想使用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>


...
...
...
..
...
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
},
组成部分：{
myComponent：我的组件
}
})

信息：我将dist/my component.umd.js
复制到docs/js
文件夹中，以获得一个独立的文件夹
如果我不在Vue脚本中使用该组件（Vue工作正常），则页面工作正常。但是，当我使用组件时，页面显示此错误（索引）：199未捕获引用错误：未定义vue
，它直接指向myComponent:my component

有什么想法或建议吗？
尝试将脚本放在应用程序代码之前的正文部分。否则，运行应用程序代码后可能会加载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>


...
...
...
..
...
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
},
组成部分：{
myComponent：我的组件
}
})
那是公共github站点吗？如果是，请包括链接。请注意，my component
本身不是有效的标识符；这是一个二进制表达式my-component
。这可能只会给出一个引用错误。试试window['my-component']
@Paul该组件在GitHub上是公共的，但在页面上还没有。作为参考，GitHub链接是@CMS，我将尝试widnow['my-component']
@CMS组件的名称您是对的。因此有两种解决方案：使用window['my-component']
或使用有效名称重新打包组件，例如myComponent
-myComponent.umd.js
。请将您的答案/解决方案写在下面，我会验证它。正如您所说，我将脚本放在正文中，但我仍然有相同的错误。您可以检查您的代码是否在我的组件的某个位置引用Vue
作为Vue
（小写）吗？（因为错误消息是未定义vue
）vue工作正常事实上，问题来自于我的组件的名称my component
，该名称不正确，因为-
。所以我用正确的名称重新包装了组件myComponent
，现在一切都很好！