关于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>

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

关于html单页面使用vue组件相关推荐

VUE2.0 学习（一）HTML单页面使用vue技术
目录先下载vue.js 入门全局配置浏览器控制台报错指令语法 v-bind v-model v-on data的两种写法 MVVM 事件修饰符 prevent修饰符 stop 修饰符 once修 ...
html页面渲染vue组件,Vue组件页面渲染的基本流程
html: 组件页面渲染的基本流程 main.js: import Vue from "vue"; import Home from "./home.vue"; ...
使用Vue.js在WordPress中创建单页面应用SPA
吐槽一下,掘金好像并不能插入gist的代码框效果有点打折扣博客原文地址里有gist代码: 使用Vue.js在WordPress中创建单页面应用SPA 英文原文地址:premium.wpmudev. ...
灵活的Vue组件——原来这么简单
本篇学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件以前做过一个折叠面板需求: 现在想要多个收起展开 ...
【Vue知识点- No4.】vue组件、组件通信、Todo案例
知识点自测 this指向 let obj = {fn: function(){// this指向此函数的调用者},fn () {// this指向当前函数的调用者 (如果都是在vue里, this指向 ...
vue组件_组件通信_todo案例
今日学习目标能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例 1. vue组件 1.0_为什么用组件以前做过一个折叠面板 [外链图片转存失败,源站可能 ...
iview构建基本html页面,写前端页面步骤----vue+iview
1:用iview构建基本HTML页面 2:在export default{ }中写一个data(){return:{变量:值}}全局对象,用于传递与绑定HTML参数. 3:在export defaul ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...

关于html单页面使用vue组件

关于html单页面使用vue组件

关于html单页面使用vue组件相关推荐

最新文章

热门文章