Question

在学习Vue的过程中，我试图基于一个Vue示例https://vuejsexamples.com/a-slim-tab-component-for-vue-js/创建一个带有选项卡的页面，但是由于在行中出现语法错误，我肯定会遗漏一些明显的东西< / p>

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

当我在Chrome中打开它

tabs01.html:27 Uncaught SyntaxError: Unexpected token *

我只是将其视为本地文件：//：// 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

这是已编译的Vue还是您刚刚按照上面的说明在chrome中打开了文件？

在不编译vue的情况下不能使用import。大多数简单示例文件都使用vues简单字符串模板格式，您可以直接在浏览器中打开它。

要使用导入，您需要先编译vue，然后在浏览器中打开。

请参见https://vuejs.org/v2/guide/single-file-components.html

Answer 2

您可以使用全局变量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 3

vue-slim-tabs文档没有说CDN版本在DOM上甚至没有公开vueSlimTabs甚至如何使用CDN版本。遇到这种情况时，您可以进行一些调查以弄清基础知识。

第一个问题是CDN文件是CommonJS / UMD javascript模块还是ES6 javascript模块？这将确定如何加载和调用它。在这种情况下，它是一个UMD模块。

第二个问题是找到它的对象名称。它将在DOM上公开其对象名称，您可以使用浏览器开发人员工具找到该名称。在“ DOM”选项卡上进行调查。您还可以在CDN文件源代码中搜索用于将对象名称添加到DOM global.vueSlimTabs的语句。

最后，一旦有了对象名称，就将其传递给Vue，Vue将执行其安装功能。 Vue.use(vueSlimTabs)。在此处阅读更多有关如何包装组件的信息。 What-does-my-packaged-component-look-like

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slim-tabs@0.3.0/themes/default.css">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <template>
      <tabs>
        <tab title="Egg">
          Sunny side up
        </tab>
        <tab title="Bacon">
          Thin and crispy
        </tab>
        <tab title="Sausages">
          Chopped and fried
        </tab>
      </tabs>
    </template>
  </div>
<script>
  // console.log(`vueSlimTabs`, vueSlimTabs);
  Vue.use(vueSlimTabs);
  new Vue({
    el: '#app',
    data() {
      return {}
    },
  });
</script>  
</body>
</html>

请参阅：https://jsfiddle.net/GroovyJS/6q3hyfx0/

如何将Vue示例导入到独立的html文件中？

3 个答案: