如何將 vue 示例導入獨立的 html 文件？

Question

在我學習 Vue 的過程中，我正在嘗試基於 Vue 示例之一https://vuejsexamples.com/a-slim-tab-component-for-vue-js/創建一個帶有選項卡的頁面，但我必須當我在線上遇到語法錯誤時遺漏了一些明顯的東西

import * as Tabs from 'vue-slim-tabs';

當我在 chrome 中打開它時

tabs01.html:27 Uncaught SyntaxError: Unexpected token *

我只是將其視為本地文件 file:///C:/Users/USERX/Documents/git-projects/vue/tabs/tabs01.html 因為我只是想學習基礎知識。 我懷疑我在這里遺漏了一些非常明顯的東西，因為導入行和腳本標簽導入都不起作用。

tabs01.html:

<html>

<head>
  <title>Tabbing test 01</title>
</head>

<body>
  <div id="app">
    <template>
      <tabs>
        <tab title="Vue">
          This is Vue
        </tab>
        <tab title="React">
          This is React
        </tab>
        <tab title="Svelte">
          This is Svelte
        </tab>
      </tabs>
    </template>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-slim-tabs@0.3.0/dist/vue-slim-tabs.js"></script>

  <script>
    import * as Tabs from 'vue-slim-tabs';
    Vue.use(Tabs);
    const app = new Vue({
            el: '#app',
            data() {
                return {}
            },
          });
</script>

</body>

</html>

Answer 1

您可以使用全局變量vueSlimTabs來引用插件而不是導入。 這個全局變量是在 vue-slim-tabs.js 源作為非模塊腳本加載時創建的。 例子：

 <html> <head> <title>Tabbing test 01</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slim-tabs@0.3.0/themes/default.css"> </head> <body> <div id="app"> <template> <tabs> <tab title="Vue"> This is Vue </tab> <tab title="React"> This is React </tab> <tab title="Svelte"> This is Svelte </tab> </tabs> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-slim-tabs@0.3.0/dist/vue-slim-tabs.js"></script> <script> Vue.use(vueSlimTabs); const app = new Vue({ el: '#app', data() { return {} }, }); </script> </body> </html>

如果vue-slip-tabs 設置為 ES6 模塊，則可以使用以下內容導入：

<script type="module">  
import * from 'https://cdn.jsdelivr.net/npm/vue-slim-tabs@0.3.0/dist/vue-slim-tabs.js'  
//...
</script>

但是，它目前僅設置為 UMD 模塊。 因此，作為 ES6 模塊導入需要轉譯，這是由大多數 vue/webpack cli 設置完成的。 在這種情況下，源在被瀏覽器加載之前會被轉換。

Answer 2

這是編譯的 vue 還是您剛剛在 chrome 中打開了您的文件，如上所述？

不編譯 vue 就不能使用 import。 大多數簡單示例文件都使用 vues 簡單字符串模板格式，可以直接在瀏覽器中打開。

要使用import，需要先編譯vue，然后在瀏覽器中打開。

見https://v2.vuejs.org/v2/guide/single-file-components.html

如何將 vue 示例導入獨立的 html 文件？

問題描述

2 個解決方案

解決方案1
2 已采納 2019-07-25 13:19:42

解決方案2
1 2019-07-25 12:45:01

如何將 vue 示例導入獨立的 html 文件？

問題描述

2 個解決方案

解決方案1 2 已采納 2019-07-25 13:19:42

解決方案2 1 2019-07-25 12:45:01

解決方案1
2 已采納 2019-07-25 13:19:42

解決方案2
1 2019-07-25 12:45:01