在vue-cli環境下使用單一檔案的Vue檔有很多好處，但需要編譯後才能使用，今天如果希望也能在非vue-cli環境下，可以使用httpVueLoader.js來達到編譯Vue檔功能。
首先當然是要載入vue.js 和 httpVueLoader.js
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
共有四種方式可以載入vue檔案
<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<!-- <script src="/Scripts/vue.js"></script> -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<style>
div {
display: inline-block;
}
</style>
</head>
<body>
<div id="app1">
<my-com my-msg="第1種" :parent-msg="msg"></my-com>
</div>
<div id="app2">
<my-com my-msg="第2種" :parent-msg="msg"></my-com>
</div>
<div id="app3">
<my-com my-msg="第3種" :parent-msg="msg"></my-com>
</div>
<div id="app4">
<my-com my-msg="第4種" :parent-msg="msg"></my-com>
</div>
<!-- 四種呼叫httpVueLoader的方法 -->
<!-- 第一種 -->
<script>
var app = new Vue({
el: "#app1",
data: {
msg: "我是父層的data ~ "
},
components: {
'my-com': httpVueLoader('my-com.vue')
}
})
</script>
<!-- 第二種 -->
<script>
httpVueLoader.register(Vue, 'my-com.vue');
var app = new Vue({
el: "#app2",
data: {
msg: "我是父層的data YA ~ "
},
components: ['my-com']
})
</script>
<!-- 第三種 -->
<script>
Vue.use(httpVueLoader);
var app = new Vue({
el: "#app3",
data: {
msg: "我是父層的data YA2 ~ "
},
components: {
'my-com': 'url:my-com.vue'
}
})
</script>
<!-- 第四種 -->
<script>
Vue.use(httpVueLoader);
var app = new Vue({
el: "#app4",
data: {
msg: "我是父層的data YA3 ~ "
},
components: ['url:my-com.vue']
})
</script>
</body>
</html>
my-com.vue檔案的內容如下:
<style scoped>
.box {
border: 1px solid black;
width: 150px;
height: 150px;
background-color: yellow;
margin: 3px;
font-size: 12px;
text-align: center;
padding-top: 40px;
}
</style>
<template>
<div class="box">
HttpVueLoader的方式</br>{{myMsg}}<br> {{parentMsg}}
</div>
</template>
<script>
module.exports = {
data() {
return {
msg: 'Hello Vue.js'
}
},
props: ["myMsg", "parentMsg"]
}
</script>
畫面結果如下:
官方參考網址：https://github.com/FranckFreiburger/http-vue-loader
Kuro參考網址：不需編譯也能載入 .vue 元件檔: 使用 http-vue-loader
補充：如果您的伺服器無法讀取Vue檔案，請在伺服器新增MIME格式( application/octet-stream )
