#### 在Vue中使用http-vue-loader加载组件
要使用vue组件的话，需要引入http-vue-loader.js 要在服务器的环境下打开 开发时本地服务器 或 idea打开
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<section id="app">
<my-component></my-component>
<section @click="clockss">
{{title}}
</section>
</section>
<script src="/js/vue/vue2614.js"></script>
<script src="/js/vue/http-vue-loade.js"></script>
<script>
// 使用httpVueLoader
Vue.use(httpVueLoader);
new Vue({
el: '#app',
data: {
title: '111'
},
methods: {
clockss() {
}
},
components: {
// 将组建加入组建库
'my-component': 'url:./app/components/my-component.vue' // 加载外部的Vue组件
}
})
</script>
</body>
</html>
Vue组件 - my-component
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world223232' // 初始化who变量
}
}
}
</script>
<style>
.hello {
background-color: #ffe; // 定义hello类的样式
}
</style>