上週在 Vue 社群圈有個令人興奮的熱門新聞: CodePen 可以支援 .vue 檔案了!

身為使用 Vue 的開發者聽到這樣的消息當然感到相當開心,但同時也不禁感到好奇,CodePen 是如何做到不須透過 webpack 編譯 vue 檔案,就可以將 .vue 的 component 如實顯示到網頁中。

大家都知道,在網頁開發的世界中,前端是沒有秘密的。 打開了開發工具,才知道原來是透過 http-vue-loader 這個工具做到的。


http-vue-loader 這套工具可提供開發者直接在網頁環境中載入 .Vue File,無需透過 nodeJS 環境編譯,也不需要 Build 的步驟。

用法很簡單,首先在網頁上載入 Vue 與 http-vue-loader,如下

1
2
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

接著,假設我們有一個 my-component.vue 的檔案:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div class="hello">Hello {{who}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
who: 'world'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>

那麼,我們就可以在 components 內透過 httpVueLoader 來載入我們的子元件:

1
2
3
4
5
6
7
8
9
10
11
12
<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>


當然,httpVueLoader 也提供了類似 Vue.component('my-component', { ... }) 的宣告方式:

1
2
3
4
5
6
httpVueLoaderRegister(Vue, 'my-component.vue');
new Vue({
components: [
'my-component'
},

或是將 httpVueLoader 當作 Plugin 來使用:

1
2
3
4
5
6
7
Vue.use(httpVueLoader);
new Vue({
components: {
'my-component': 'url:my-component.vue'
},
...

甚至是 Array 的形式也可以:

1
2
3
4
5
new Vue({
components: [
'url:my-component.vue'
},
...

需要注意的是,httpVueLoader 目前僅支援 Vue 2 以上的版本,而作者也在專案內說明, httpVueLoader 只是提供一個簡便的測試與開發環境,方便開發者不需要透過繁複的編譯過程才能使用 vue file 進行開發。

若是要發佈到線上的專案,建議還是需要透過工具編譯打包,會有更好的效能以及更佳的支援度喔。