http-vue-loader

Posted on Edited on In Views: Disqus:

 

http-vue-loader 這套工具可提供開發者直接在網頁環境中載入 .Vue File，

無需透過 nodeJS 環境編譯，也不需要 Build 的步驟。

 

如下範例，index.html 與 my-vuefile.vue 為同一層

index.html

<html>

<head>

</head>

<body>
    <div id="app">
        <my-component></my-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/http-vue-loader"></script>
    <script>
        Vue.component(
            "my-component", httpVueLoader('my-vuefile.vue')
        );

        let vm = new Vue({
            el: "#app"

        });
    </script>

</body>

</html>

 

my-vuefile.vue

<template>
  <div class="red"></div>
</template>

<script>
module.exports = {
  data: function () {
    return {
      who: "Hello world",
    };
  },
};
</script>

<style>
.red {
  background-color: #f00;
}
</style>

 

參考資料：

不需編譯也能載入 .vue 元件檔: 使用 http-vue-loader