gpt4 book ai didi

javascript - 如何将 vue 示例导入到独立的 html 文件中?

转载 作者:行者123 更新时间:2023-12-01 00:48:21 24 4
gpt4 key购买 nike

在学习 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>

最佳答案

您可以使用全局变量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 设置完成的。在这种情况下,源代码在被浏览器加载之前会被转换。

关于javascript - 如何将 vue 示例导入到独立的 html 文件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57201238/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com