html中加载vue组件的正确姿势

http-vue-loader

直接从html / js加载.vue文件。没有node.js环境，没有构建步骤。

示例

这是一个vue文件：my-component.vue

<template>
    <div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
    data: function() {
        return {
            who: 'world'
        }
    }
}
</script>
<style>
.hello {
    background-color: #ffe;
}
</style>

利用http-vue-loader插件，在index.html文件中使用my-component.vue文件

<!doctype html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
  </head>

  <body>
    <div id="my-app">
      <my-component></my-component>
    </div>

    <script type="text/javascript">
      new Vue({
        el: '#my-app',
        components: {
          'my-component': httpVueLoader('my-component.vue')//加载需要使用的vue文件
        }
      });
    </script>
  </body>
</html>
posted @ 2020-08-25 16:37  开怀的猫  阅读(4120)  评论(0)  编辑  收藏  举报