关于html单页面使用vue组件

最新推荐文章于 2024-05-19 16:24:48 发布

qq_43642135

最新推荐文章于 2024-05-19 16:24:48 发布

阅读量2.2k

点赞数

分类专栏： html引用vue文件 html外部引用vuecdn使用组件文章标签： vue html js css vue.js

本文链接：https://blog.csdn.net/qq_43642135/article/details/116781137

版权

html引用vue文件同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

html外部引用vuecdn使用组件

1 篇文章 1 订阅

订阅专栏

关于html单页面使用vue组件

最近在写一个多用户商场项目，用的是vue框架，等到项目做到百分之99的时候，老板让做seo优化，才发现seo对vue及其的不友好，在网上也找了很多方法，但是都不能满足老板的需求。最终决定用html单页面来引用vue的cdn来实现。那么问题来了，vue最大的特点就是组件化，在项目中，很多功能都是使用了组件。那这个怎么处理呢？经过多方面的查询，找到了解决方法。下面给大家详细讲解一下：

1.首先要引用一个cdn <script src="https://unpkg.com/http-vue-loader"></script> 前提是引用过vue的cdn这个不要忘记了（这个cdn的作用是html不能直接运行vue文件的，这个是让html运行vue文件的一个插件）

2.然后再需要用到vue组件的地方使用一下

3.下一步在引用一下插件

4.最后一步就是使用了

5.最后有一个坑就是vue文件的结构有点不一样，请大家仔细看引用vue文件的话就是 module.exports = {} 普通的vue文件是export default{}

下面我把代码都粘出来，有什么不对的地方请大佬指教

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="js/vue.js"></script>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://unpkg.com/http-vue-loader"></script>
	<title></title>
</head>
<body>
	<div id="app">
		<status-bar></status-bar>
	</div>
</body>
<script type="text/javascript">
	Vue.use(httpVueLoader);
	new Vue({
		el: '#app',
		data:{
			
		},
		components:{
		    'status-bar':httpVueLoader('./components/statusBar.vue'),
		}
	})
</script>
</html>

好了，这就是我对这个问题的解决方案，

qq_43642135

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
7
评论
关于html单页面使用vue组件

关于html单页面使用vue组件最近在写一个多用户商场项目，用的是vue框架，等到项目做到百分之99的时候，老板让做seo优化，才发现seo对vue及其的不友好，在网上也找了很多方法，但是都不能满足老板的需求。最终决定用html单页面来引用vue的cdn来实现。那么问题来了，vue最大的特点就是组件化，在项目...
复制链接

扫一扫