Глобальная регистрация компонентов в Vue с использованием <script> - PullRequest
Новая
       8

Глобальная регистрация компонентов в Vue с использованием <script>

0 голосов
/ 17 сентября 2018

Я изучаю Vue и хотел бы использовать 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);

Однако Chrome 66 нене нравится заявление import.VueTabs определяется как верхний уровень var в vue-tabs.js:

import VueTabs

Uncaught SyntaxError: Неожиданный идентификатор

Некоторые из вышеперечисленных могут быть неверными.Я все еще путаюсь с основами современной веб-разработки.Поэтому я был бы признателен за описание на более высоком уровне, могу ли я сделать это или почему нет.Кажется, все документы, которые я нахожу, предполагают знакомство с этапами предварительной компиляции и сборки.

Я бы хотел пока что не использовать npm, webpack или yarn и т. Д.сосредоточиться на Vue.Мне нравится, что Vue можно использовать, просто загрузив vue.js в локальный каталог и затем сделав его доступным, используя только тег <script>.

Я пытался использовать <script https://...vue-tabs.js>, но неповезло, как с Vue.
Можно ли использовать vue-tabs таким же образом, или потребуется какой-то этап предварительной компиляции или сборки?

1 Ответ

0 голосов
/ 17 сентября 2018

Это должно быть просто для вас. Если вы не хотите использовать такой упаковщик, как 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 автоматически установит плагин и зарегистрирует компоненты при запуске в виде скрипта старой школы.

...