html页面引入vue组件之http-vue-loader.js方法怎么用

阅读：706 来源：乙速云作者：代码code

html页面引入vue组件之http-vue-loader.js方法怎么用

html页面引入vue组件之http-vue-loader.js

首先这种方法不推荐，日常工作中也不会在html里面引入一个vue文件，只是为了有时候方便测试才会这么做

1.创建my-component.vue

2.创建index.html

这样就可以直接在html页面里面引用vue文件，而不需要从头开始创建一个新的vue项目，方便日常测试使用

httpVueLoader的其他组件载入方式可查看这里

单页面vue项目注册使用组件(使用httpVueloader)

主要是最近写的项目涉及到,就顺便记录一下,

使用的概率不是很大啊毕竟现在大部分都是直接搭的项目组件正常方式使用组件即可

安装并引入插件插件

既然是单页面使用,最简单快捷的就是直接script引用了,这里我就直接把文件放出来自取好了,今天百度网盘有点卡分享不出来,文件又比较长,就放文章最末尾吧

准备组件

随便画个组件反正也就测试用用

引用

引用方法有好几种这里我就拿我用的来举例吧,直接上父组件代码,首先是html页面

然后是js页面,当然全写一个html也行啊看个人喜好,这里因为项目需求兼容ie,所以写的比较原始

var appVue = new Vue({
    el: "#mainpage",
    components:{
        'test': httpVueLoader('../PCdemo/src/components/test.vue')
    },
    data: function() {
        return {
            state:'1111'
        }
    }
})

那么效果就完成了

html页面引入vue组件之http-vue-loader.js方法怎么用

插件的其他注册使用组件方法

组件官网还提供了其他注册引入方法,讲的比较细致啊这里就不赘述了有兴趣可以自己去看看

插件js文件

(function umd(root,factory){
	if(typeof module==='object' && typeof exports === 'object' )
		module.exports=factory()
	else if(typeof define==='function' && define.amd)
		define([],factory)
	else
		root.httpVueLoader=factory()
})(this,function factory() {
	'use strict';
 
	var scopeIndex = 0;
 
	StyleContext.prototype = {
 
		withBase: function(callback) {
 
			var tmpBaseElt;
			if ( this.component.baseURI ) {
 
				// firefox and chrome need the  to be set while inserting or modifying