关于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>
好了,这就是我对这个问题的解决方案,