不用webpack，html里怎么引入外部.vue文件的组件

来源：10-6 Vue项目的联调测试上线 - 课程总结与后续学习指南

慕前端4923481

2018-08-06

DellLee老师你好，问一个问题：如果组件在一个文件中，那么纯html或js文件，怎么引用该组件呢（非webpack工程）？

例如下面的index.html的Demo，里面有个全局child组件。

如果我把child提取到Child.vue文件中，那么index文件怎么引用Child组件呢（不使用webpack，纯html文本）

<!DOCTYPE html>
<html>
<head>
	<title>input</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child @change="handleChange"></child>
	</div>
<script>
	Vue.component('child', {
    	template: `<div id="app">
					<input type="date" v-model="date">
				   </div>`,
	    data() {
	    	return {
	    		date: null
	    	}
	    },
    	watch: {
        	date () {
        		this.$emit('change', this.date)
        	}
        }
    })
	var vm = new Vue({
		el: "#root",
        methods: {
        	handleChange (date) {
        		console.log(date)
        	}
        }
	})
</script>
</body>
</html>

写回答

1回答