前言
近期维护一个项目，代码是纯html写的，对于一个习惯了vue开发的人来说，纯html太痛苦了，不能使用双向绑定，不能使用组件，每次开发新功能，都非常的恶心；
幸好，有一个非常棒的框架http-vue-loader，它可以完美的帮我们实现，在html里面使用vue；
一、引入http-vue-loader
- 下载http-vue-loader.js文件
- 在html中引入http-vue-loader.js
<script src="../js/libs/httpVueLoader.js"></script>
二、创建组件my-component.vue
my-component.vue最好与html文件在同一目录下，方便引入；
三、引入组件
使用url的方式引入；
(function() {
// 这句必须，引入httpVueLoader的；
Vue.use(httpVueLoader);
var vue = new Vue({
el: '#app',
data() {
return {
}
},
// components里面，引入组件
// 组件必须与html文件在同一目录下，不然下边的写法，会引入失败；
components: {
'my-component': 'url:my-component.vue?v=' + (new Date().getTime())
},
});
})();
使用url的方式引入，后面可以加版本号（v），这样是为了处理，组件代码不能实时更新到html上的问题；
四、html中使用组件
...
<div id="app">
<my-component></my-component>
</div>
....
五、代码预览
1. test.html文件
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="UTF-8">
<title>我的客户</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="../js/libs/jquery-3.3.1.min.js"></script>
<script src="../js/libs/vue.js"></script>
<script src="../js/libs/httpVueLoader.js"></script>
<script>document.write('<script src="../js/test.js?t=' + new Date().getTime() + '"><\/script>')</script>
</body>
</html>
2. test.js文件
(function() {
// 这句必须，引入httpVueLoader的；
Vue.use(httpVueLoader);
var vue = new Vue({
el: '#app',
data() {
return {
}
},
// components里面，引入组件
// 组件必须与html文件在同一目录下，不然下边的写法，会引入失败；
components: {
'my-component': 'url:my-component.vue?v=' + (new Date().getTime())
},
});
})();
3.组件my-component.vue
<template>
<div class="hello" @click="respondsToTap">Hello {{count}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
count: 0
}
},
methods: {
respondsToTap() {
this.count = this.count + 1
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
line-height: 40px;
}
</style>
网友评论