httpVueLoader使用示例（用于cdn引入vue2后在html文件中使用组件开发）

原创

已于 2023-05-10 11:56:23 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2023-05-04 14:40:16 首次发布

本文介绍如何在HTML文件中引入Vue2组件，通过httpVueLoader.js实现前端开发。在维护一个使用原生JavaScript和jQuery的老项目时，作者引入Vue2并面临无法进行组件化开发的问题。通过httpVueLoader，可以在HTML直接导入和使用Vue组件，简化代码结构。

前言：现在在维护公司的老项目，用的原生+jq开发，太麻烦，我就引入了vue2，但是发现无法组件开发，代码也不是多好看，首页代码更是好几千行。于是找了这个在html上也能导入并使用vue组件的办法。

首先百度下载httpVueLoader.js，没有的话新建js文件粘贴也行，代码有点长，放最后面了，先放上使用代码

html文件(样式啥的直接忽略，懒得删了)：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telephone=no, email=no"/>
  <link rel="stylesheet" href="../../store/css/vant2.css">
  <script type="text/javascript" src="../../store/plugin/jquery-3.4.1.min.js"></script>
  <script src="../../store/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<!--  引入vue文件子组件必备js-->
  <script src="js/httpVueLoader.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" src="../../store/js/vant2.js"></script>
</head>
<style>
  [v-cloak] {
    display: none;
  }
  *{
    margin: 0;
    padding: 0;
    /* 设置的边框和内边距的值时包含在总宽高内的 */
    box-sizing: border-box;
  }
  /*隐藏滚动条*/
  ::-webkit-scrollbar {
    display: none
  }
  /*看那个加载更多显示的位置对不对而改样式*/
  .layui-flow-more{
    width: 100%;
    /*position: absolute;*/
  }
  .layui-carousel-ind{
    /*text-align: left;*/
    /*padding-left: 3vw;*/
  }
  .layui-carousel-ind ul{
    background: none;
  }
  .layui-carousel-ind li{
    width: 20px;
    height: 6px;
    border-radius: 5px;
  }


  /*超出隐藏，三个点显示文字样式*/
  /*overflow:hidden;*/
  /*text-overflow:ellipsis;*/
  /*white-space:nowrap;*/
  /*本页面样式*/
</style>
<body style="width: 100vw;max-height: 100vh;overflow: auto;background-color: #f8f8f8">
<!--class="maxTitle-white"-->
<div id="app" style="position: relative;width: 100vw;" v-cloak>
//可以通过this.$refs.remark.getData(value)来操作子组件参数或方法
  <remark ref="remark"></remark>
</div>
</body>
<script>
  let app = new Vue({
    el:'#app',
    /* 引入vue文件作为测 组件  */
    components: {
      'Remark': httpVueLoader('components/remark.vue')
    },
    // 传递给子组件孙组件的属性，第一个是参数，后面三个是方法，都是一样的传递方式。
     provide(){
        return{
            topsrcoll: this.topsrcoll,
            goThumbnailVideo: this.goThumbnailVideo,
            goThumbnail: this.goThumbnail,
            setTop: this.setTop,
        }
     },
    //数据
    data(){
      let u = navigator.userAgent;
      return {
        isWx: window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger',
        isAndroid: u.indexOf("Android") > -1 || u.indexOf("Adr") > -1,
        isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
        title: "",
      }
    },
    //方法
    methods:{
      // 修改评论子组件的文章id
      // app.$children.forEach((item,index)=>{
      //   if(item.components!=="remark")
      //     return true;
      //     item.id = 123456
      // });
    },
    //初始化
    moun