代码之家 › 专栏 › 技术社区 › Tom Russell

使用<script>

web-component vue.js javascript

Tom Russell · 技术社区 · 6 年前

vue-tabs .
在全球范围内“安装”它的说明如下:

//in your app.js or similar file
//  import Vue from 'vue';  // Already available
import VueTabs from 'vue-nav-tabs';

Vue.component('tabs', Tabs);
Vue.component('tab', Tab);

然而,Chrome66不喜欢 import VueTabs var 在里面 vue-tabs.js :

import VueTabs

上面的一些可能是不正确的。我还在蒙混过关地学习现代网络开发的基础知识。所以我希望能有一个更高层次的描述,我是否能做到这一点或为什么不。似乎我找到的所有文档都假定熟悉预编译和构建步骤。

npm , webpack 或 yarn Vue . 我喜欢这样 Vue公司 只需下载即可使用 vue.js 然后只使用 <script> 标签。

我试过用 <script https://...vue-tabs.js> 但我的运气不太好 .
vue-tabs 同样的方法,还是需要某种预编译或构建步骤?

1 回复 | 直到 6 年前

Harshal Patil 6 年前

对你来说应该很简单。如果您不想使用类似bundler的Webpack,那么您的HTML应该是:

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>

    <div id="app">
        <vue-tabs>
            <v-tab title="First tab">
              First tab content
            </v-tab>

            <v-tab title="Second tab">
              Second tab content
            </v-tab>

            <v-tab title="Third tab">
              Third tab content
            </v-tab>
        </vue-tabs>
    </div>

    <!-- Load Vue.JS -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <!-- Load Vue-Tabs -->
    <script src="https://unpkg.com/vue-nav-tabs@0.5.7/dist/vue-tabs.js"></script>


    <!-- YOUR APPLICATION JS FILE -->
    <script type="text/javascript">
        new Vue({
            el: "#app"
        });
    </script>

</body>
</html>

此外,您将不必做任何插件安装或组件注册,因为您使用它没有ES模块或捆绑。 VueTabs

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前