[Vue] 原生HTML如果使用vue单文件组件(无webpack版本)

最新推荐文章于 2024-05-14 21:52:54 发布

蔚蓝银河森林

最新推荐文章于 2024-05-14 21:52:54 发布

阅读量919

点赞数 1

分类专栏：前端专区文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/qq_45830308/article/details/129021293

版权

前端专区专栏收录该内容

11 篇文章 0 订阅

订阅专栏

问题引出

我在写html的时候,想在当前html页面引入外部组件,方便后期维护;于是就想到vue,但是又不想使用vue脚手架,只是单纯想使用vue组件,并且是创建.vue结尾的文件,而不是用``括起来的组件

直接上代码

项目整体目录图

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
	<script src="js/index.js"></script>
</head>
 
<body>
    <div id="app">
        <my-component></my-component>
    </div>
</body>
 

</html>

index.js

$(document).ready(function() {
	// 使用httpVueLoader
	Vue.use(httpVueLoader);
	new Vue({
		el: '#app',
		data: function() {
			return {
				visible: false
			}
		},
		components: {
			// 将组建加入组建库
			'my-component': 'url:./component/my-component.vue'
		}
	})
});

my-component.vue

$(document).ready(function() {
	// 使用httpVueLoader
	Vue.use(httpVueLoader);
	new Vue({
		el: '#app',
		data: function() {
			return {
				visible: false
			}
		},
		components: {
			// 将组建加入组建库
			'my-component': 'url:./component/my-component.vue'
		}
	})
});

index.html运行结果

在这里插入图片描述

注意事项

在index.js里面的路径’my-component’: ‘url:./component/my-component.vue’;千万不能写错了.
我就是错写成’my-component’: ‘url:…/component/my-component.vue’(多了个点,导致一直运行不出来,因为在index.html引入的index.js,所以是当前路径了,也就是一个点,而不是两个点)