如何在html(非单页vue项目)中直接引入vue文件组件

最近需要把一个自己封装好的 vue 日历组件引入到一个比较早的 vue 项目里，打开后发现这个项目是 非单页 的，即在 html 中引入 vue 的 lib 文件， 每个 html 文件对应的 js 文件都有一个独立的 Vue实例 。在网上找到了一种方法，使用 jquery 的 load 方法和 vue 的 extend 方法 ，稍微有点麻烦，最后把样式也提取到 html 的整体了才加载出来。后来又搜到一个插件 http-vue-loader，发现用起来挺方便，所以记录下

下面为插件使用的简单demo：


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>

注意： vue 文件里使用的是 module.exports


index.html
使用 httpVueLoader 加载 vue 文件，并将其注册到 vue 的 component  


<!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')
        }
      });
    </script>
  </body>
</html>

另外，这个插件还支持 sass ，更多具体用法可以查看作者的 github 地址
http-vue-loader


插件是如何实现的，有兴趣的话可以再研究下源码

1. 通过http请求加载文件
2. 将vue文件放在文档片段的容器对象，内存中
3. 处理vue文件的每一部分(template 页面文件，script js文件 和style样式 )
4. httpVueLoader('my-component.vue') 返回一个promise，成为异步组件
5. vue编译这个组件，并将其缓存

tips: 作者又开发了一个插件也支持加载 vue 文件哦，同时支持 vue2 和 vue3 ，大家有兴趣也可以研究下 vue3-sfc-loader
特性：

  • Supports Vue 3 and Vue 2
  • Only requires Vue runtime-only build
  • Focuses on component compilation. Network, styles injection and cache are up to you
  • Embedded ES6 modules support ( including import() )
  • SFC Custom Blocks support
  • JSX support
  • Support custom CSS, HTML and Script language, see pug and stylus examples
  • Properly reports template, style or script errors through the log callback
  • You can build your own version and easily customize browsers you need to support
最后修改：2021 年 04 月 17 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏或留下你的评论~