初探VueLoader
前言
最近利用Vue.js來實作遊戲編輯器的UI遇到了麻煩，Vue.js的Component一定要註冊後才能用，所以程式碼的開頭就會有一大段註冊Component的程式碼，google了一下發現有"loader"可以用，在此把學習的過程做個紀錄。內容
"loader"的程式碼可以在http-vue-loader的GitHub下載，接下來製作"vue檔"，"vue檔"官方有給範例如下<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
"template"的部分跟以前的一樣，轉成"vue檔"只要剪下貼上即可。"script"就是註冊Component的object，唯一和以前的不同是不再需要設定"template"變數。最後是css的部分，"vue檔"本身可自帶css，和一般的css寫法是一樣的。
製作好"vue檔"後，接著就可以在程式碼裡使用，官網的範例如下
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
在header裡先將"loader"的程式碼載入，接著在需要用到Component的Vue新增"Components"，
範例被標記為"紅色"的部分，變數的名稱就是Component註冊的名稱，"httpVueLoader"的參數就是讀取的路徑，用起來相當簡單。
沒有留言:
張貼留言