#### 在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>