VueJs внутри WordPress не работает

Question

В настоящее время использую WordPress для простого сайта, и я хочу добавить VueJS в шаблон.

Я пытаюсь показать условно iframe, если API Twitch возвращает, что определенный поток подключен.

Я включил cdn в header.php сверху:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

Где-то в конце header.php я создаю свой div, с которым я хочу использовать VueJS.

  <div id="stream">
            {{live}}
            <div v-if="live">
                <iframe src="https://player.twitch.tv/?channel=someTwitchUser" frameborder="0" allowfullscreen="true" scrolling="no" height="678" width="1200"></iframe>
            </div>
        </div>

И в конце наконец наш метод VueJS decleration + axios.

<script>
    import axios from 'axios';
    var id = "Client-Id";
    var stream = new Vue({
        el: '#stream',
        data: {
            live: null
        },
        mounted() {
            axios
                .get('https://api.twitch.tv/kraken/streams/sometwitchuser', {headers: {id: "somekeyhere"}})
                .then(response => {
                    this.live = response.data.stream;
                    console.log(response.data);
                })
        }
    });
    </script>

Так что в принципе я ничего не вижу в консоли, как я и ожидал.А также, {{live}} возвращается как {{live}} в представлении.Что дает мне выражение, что VueJS вообще ничего не делает.

Я что-то упустил?Разве нельзя использовать VueJS, как это?Кто-то здесь с опытом использования vueJs в WordPress?

Answer 1

вы не можете использовать синтаксис import * from '...' в браузере, чтобы использовать его, вы должны использовать пакетный модуль, такой как веб-пакет или пакет,

---

однако у вас уже есть аксиосы ​​в вашей области, поэтому я думаю, что еслиВы удаляете import axios from 'axios'; Вы должны идти гладко