VueJS: добавление в существующий HTML и обработка импорта - PullRequest
Новая
       6

VueJS: добавление в существующий HTML и обработка импорта

0 голосов
/ 14 октября 2018

Итак, я создал одностраничное приложение в VueJS, которое прекрасно работает, но SEO отстой, как и ожидалось, поэтому я решил создать нормальный HTML-сайт с несколькими страницами, имеющими код VueJS (Удаленный хостинг)так что без узла, я бы пошел SSR).

Я следовал этому руководству , которое работает fin

У меня есть search.js, который содержит мой экземпляр VueJS и методыetc 

Vue.component('todo-component', {
    template: '#todo-component',
    data: function () {
        return {
            items: [
                {
                    id: 'item-1',
                    title: 'Checkout vue',
                    completed: false
                }, {
                    id: 'item-2',
                    title: 'Use this stuff!!',
                    completed: false
                }
            ],
            newItem: ''

        };
    },
    methods: {
        addItem: function () {
            if (this.newItem) {
                var item = {
                    id: Math.random(0, 10000),
                    title: this.newItem,
                    completed: false
                };

                this.items.push(item);
                this.newItem = '';
            }
        }
    }
});

var app = new Vue({
    el: '#vue-app'
});

Однако мне нужно импортировать такие вещи, как axios и другие компоненты

Если я добавлю оператор импорта в приведенный выше скрипт, он получит 

import axios from "axios";

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

Куда должен идти мой импорт?

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Вам не хватает axios библиотеки, поэтому добавьте ее следующим образом: 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Я также предоставляю вам, как использовать ее при работе с браузером: 

new Vue({
  el: '#app',
  data: {
    dataReceived: '',
  },
  methods: {
    getData() {
      axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
        .then((response) => {
          this.dataReceived = response.data;
          console.log(this.dataReceived);
          return this.dataReceived;
        })
    }
  }
})
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>
  <div id="app">
    <button @click="getData" type="button">getData</button>
    <p>dataReceived: {{ dataReceived }}</p>
  </div>
</body>
0 голосов
/ 14 октября 2018

Поскольку вы непосредственно пишете код, работающий в браузере, вы можете просто включить axios cdn в свой HTML-код перед загрузкой search.js: 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Что касается импорта компонентов, вы можетеПодробнее о регистрации компонентов здесь .Как правило, если ваши компоненты зарегистрированы глобально с помощью синтаксиса Vue.component('my-component', {}), вы должны иметь возможность напрямую использовать его в своем коде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...