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

Question

I built a Vue component that was packaged with "build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue" . 我构建了一个Vue component ，该Vue component与"build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue"打包在一起"build-bundle": "vue-cli-service build --target lib --name my-component ./src/myComponent.vue" 。 In the dist folder I have: 在dist文件夹中，我有：

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

Now, for the GitHub Page publication, I'am building a page explaining the details and the features of the component. 现在，对于GitHub Page出版物，我正在构建一个页面，解释该组件的详细信息和功能。 I'll use a /docs folder as root for the GitHub Page (I don't want to use a gh-pages branch). 我将/docs文件夹用作GitHub Page根目录（我不想使用gh-pages分支）。

For this, I have to build a basic Vue App without Vue CLI , Webpack or so. 为此，我必须构建一个没有Vue CLI或Webpack的基本Vue应用程序。

The index.html looks like this: 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>

Info: I copied dist/my-component.umd.js to the docs/js folder in order to have a standalone folder. 信息：我将dist/my-component.umd.js复制到docs/js文件夹中，以获得一个独立的文件夹。

The page works well if I do not use the component in the Vue script (Vue works properly). 如果我不使用Vue脚本中的组件，则该页面效果很好（Vue正常工作）。 But, when I use the component, the page shows this error (index):199 Uncaught ReferenceError: vue is not defined which is pointing directly to myComponent: my-component . 但是，当我使用组件时，页面显示此错误(index):199 Uncaught ReferenceError: vue is not defined ，它直接指向myComponent: my-component 。

Any idea or suggestion? 有什么想法或建议吗？

Answer 1

Try putting the scripts in the body section before your app code. 尝试将脚本放在应用程序代码之前的主体部分中。 Otherwise, Vue library could be loaded after running your app code 否则，可以在运行您的应用程序代码后加载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>

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

问题描述

1 个解决方案

解决方案1
0 2019-08-26 16:56:49

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

问题描述

1 个解决方案

解决方案1 0 2019-08-26 16:56:49

解决方案1
0 2019-08-26 16:56:49