沒有構建過程的 Vue.js 單文件組件

Question

我喜歡 vue.js，因為它很簡單，這意味着我可以使用現代、直觀的數據綁定語法和沒有復雜的工具鏈來破解一個快速的單頁 SPA。

我也喜歡單文件組件的想法，這意味着每個組件都在一個地方（ *.vue文件）存儲 DOM、樣式和腳本功能。

但是，我想使用單文件組件，而不會在每次將應用程序放在一起時浪費時間管理構建過程。 簡而言之，我希望在沒有構建工具鏈開銷的情況下享受組件管理的好處，這意味着讓瀏覽器通過XMLHttpRequest和 DOM 渲染來完成引導每個*.vue文件的繁重工作。 確保我們用相應Vue.component()功能替換module.exports和import調用。

我很想知道是否有人遇到過在瀏覽器上使用*.vue文件的客戶端（僅限）解決方案。 確定這已經完成了嗎？

Answer 1

我絕對確定這還不存在，因為雖然它看起來相對容易，但某些功能會使其很難實現。 例如：

1. 您不一定只導入其他 .vue 組件，您可以導入隨機的外部依賴項。 這意味着瀏覽器現在需要下載和解析 npm 模塊，處理它們的依賴關系等。
2. .vue 組件的不同部分（模板、邏輯和樣式）可以用 HTML、JS 和 CSS 以外的語言編寫。 這意味着瀏覽器現在還需要為 Jade、CoffeeScript、LESS 或您正在使用的任何其他東西下載編譯器/轉譯器，並通過它運行您的代碼。 請注意，不能保證這種用 JavaScript 編寫的轉譯器確實存在，因為在常規構建過程中使用的節點模塊可能只是某些無法在瀏覽器中運行的外部庫的包裝器。
3. .vue 組件中的樣式可以限定范圍，這意味着您現在需要解析組件的模板以插入隨機生成的 ID 作為元素屬性，並解析同一組件的樣式以在 CSS 選擇器中插入相同的 ID，以便您的樣式最終會被限定。

這些只是我腦海中最明顯的那些。 當然，您可以嚴格限制自己並且不使用任何這些功能，但它不再是真正的 .vue 組件，是嗎？

如果您真的想不惜一切代價避免構建過程並願意接受不使用上述任何功能的限制，為什么不只使用單個 JS 文件：

$(body).append(`<style>
  // styling goes here
</style>`); 

var myTemplate = `
  // template goes here
`; 

Vue.component('my-component', {
  template: myTemplate
  // component logic goes here
})

你必須以正確的順序加載它們，但是你有它，一個窮人的單一文件組件。

Answer 2

另一種方法是使用： http-vue-loader

直接從您的 html/js 加載 .vue 文件。 沒有 node.js 環境，沒有構建步驟。

https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.1/src/httpVueLoader.min.js

與 unpkg cdn 相同

https://unpkg.com/http-vue-loader

這里是一個例子

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

<script>
new Vue({
  el: '#app',
  components: {
    'header': httpVueLoader('/components/header.vue'),
    'nav-bar': httpVueLoader('/components/navbar.vue'),
    'aside': httpVueLoader('/components/aside.vue'),
    'content': httpVueLoader('/components/content.vue'),
    'footer': httpVueLoader('/components/footer.vue')
  }
});
</script>

或者您可以從外部加載組件，例如

'MyHelloWorldComponent': httpVueLoader('https://my-cdn-or.github.io/path/HelloWorld.vue'),

請參閱以下示例： https ://codepen.io/mikechen2017/pen/wEdbBN/

Answer 3

現在是 2020 年，Evan You 上周剛剛寫了https://github.com/vuejs/vite 。

我很想知道是否有人遇到過客戶端（僅限）解決方案......

Vite 有一個服務器，但感覺就像我們剛剛擁有記事本時的 Web 舊時代。 我在不到 5 分鍾的時間內運行了演示，就這么簡單。

• 它涵蓋或旨在涵蓋@mzgajner 提到的更精細的細節

現在，我想說的是，如果你使用它，你會立即進入 Vue 3 beta 領域。 沒有 Vue 2.x。

Answer 4

但是，我想使用單文件組件，而不會在每次將應用程序放在一起時浪費時間管理構建過程。 簡而言之，我想要組件管理的好處，而不需要構建工具鏈的開銷

我同意這個觀點，並決定用vue-blocks解決這個問題。 只需一個腳本標簽即可開始，無需構建工具，完全是客戶端。

它可以從服務器jsfiddle 示例加載 vue 文件（盡管有一些限制）：

<template src="path/to/vue-file.vue"></template>

Vue Blocks 允許您在 html 文檔中編寫多個 vue 組件，如下所示：

<template component="sample-component">
    <div>
        <h1>Sample component</h1>
    </div>
    <style>
    </style>
    <script>
        export default {
            data() {
                return {}
            },
            mounted() {},
            methods: {
                xx() {

                }
            }
        }
    </script>
</template>

jsfiddle 中的工作演示： https ://jsfiddle.net/o48L0y9j/