Интеграция существующего статического HTML-сайта в существующее веб-приложение vue js

Question

Я создал контактную форму с vue и vuetify как новый проект vue. Теперь я хотел бы интегрировать его в существующую статическую HTML-страницу. Я попытался добавить приложение vue в качестве экземпляра vue, который, похоже, не был правильным подходом. Будет ли проще внедрить html & css код в новую легковесную настройку проекта?

Можете ли вы порекомендовать простой проект github в качестве примера, который включает vue как экземпляр в существующий веб-сайт?

Answer 1

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

Все, что вам нужно, это загрузить vue.js и настроить таргетинг на элемент приложения, используя его id. Vue не волнует, что находится за пределами этого элемента (но может получить доступ к остальной части страницы, если требуется). Вы даже можете иметь несколько экземпляров Vue на одной странице.

Пример:

<div id="contactForm">
  <div v-text="limits" :style="appStyle"></div>
</div>
<p>You can have any html outside your vue app, it will display... normally. 
</p>
<p>You can place your vue instance anywhere you want, as long as the element you instantiate it on exists in DOM when you try to instantiate it.
<p>And <code>vue.js</code> has to be loaded before you call the constructor. That's about it.</p>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  new Vue({
    el: '#contactForm',
    computed: {
      limits(){ return 'There are no limits.' },
      appStyle() { return {
          color: 'red',
          border: '1px solid #ddd'
        }
      } 
    }
  });
</script>