Использование компонентов без npm внутри существующей веб-страницы - PullRequest
Новая
       16

Использование компонентов без npm внутри существующей веб-страницы

0 голосов
/ 27 апреля 2018

Я новичок в Vue.js и также выполняю большую часть работы в обычной среде LAMP. Компоненты vue, которые были опробованы до сих пор, похоже, не работают в связке. Может кто-нибудь, пожалуйста:

  • Предоставить пример процесса установки компонентов vue в устаревшей среде LAMP
  • Предоставьте простой HTML-шаблон, показывающий, как загрузить компонент VUE

Спасибо за любые советы.

1 Ответ

0 голосов
/ 27 апреля 2018

Поскольку вы находитесь в устаревшем контексте, вы, вероятно, не будете использовать npm / webpack / babel. В этом случае вы импортируете каждый нужный пакет с помощью тегов <script>.

  • Процесс:
    • Найдите нужный вам компонент
    • Проверьте в своих документах шаги, необходимые для их импорта.
      • Обычно это тег <script> (и стиль CSS <link>), за которым следуют некоторые шаги для настройки (но не всегда).
      • В некоторых редких случаях библиотека не предоставляет инструкции по использованию через <script>, в этом случае вы можете попробовать использовать <script src="https://unkpg.com/NODE-PACKAGE-NAME">, а затем посмотреть, возможно ли использовать его напрямую.

Примеры:

  • Объявление собственного компонента <custom-comp> и его глобальная регистрация через Vue.component. 

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
  <custom-comp v-bind:myname="name"></custom-comp>
</div>

<template id="cc">
  <p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>

<script>
Vue.component('custom-comp', {
  template: '#cc',
  props: ['myname'],
  data() {
    return {
      myown: 'Eve'
    }
  }
});
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue.js',
    name: 'Alice'
  }
});
</script>
  • Использование стороннего компонента, который дает инструкции по использованию без NPM. Пример bootstrap-vue . Как пользоваться? Следуйте их инструкциям для каждого конкретного компонента. Демонстрация компонентов карты ниже. 

<script src="https://unpkg.com/vue"></script>

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


<div id="app">
  <div>
    <b-card title="Card Title"
            img-src="https://lorempixel.com/600/300/food/5/"
            img-alt="Image"
            img-top
            tag="article"
            style="max-width: 20rem;"
            class="mb-2">
      <p class="card-text">
        Some quick example text to build on the card title.
      </p>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>
  </div>
</div>

<script>
new Vue({
  el: '#app'
});
</script>
  • Наконец, использование стороннего компонента, который не показывает какой-либо конкретной инструкции по использованию без NPM. В демонстрационном примере ниже мы видим vue2-datepicker . Они не дают конкретных инструкций по использованию через <script>, но, глядя на их readme, мы видим, что их компонент обычно экспортирует переменную DatePicker. Используйте, затем используйте <script src="https://unpkg.com/vue2-datepicker"> для загрузки компонента и зарегистрируйте его для использования через Vue.component('date-picker', DatePicker.default);. Потребность в .default варьируется. Для других компонентов Vue.component('comp-name', ComponentName); (вместо ComponentName.default) может работать напрямую. 

// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);

new Vue({
  el: '#app',
  data() {
    return {
      time1: '',
      time2: '',
      shortcuts: [
        {
          text: 'Today',
          start: new Date(),
          end: new Date()
        }
      ]
    }
  }
})
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>

<div id="app">
  <div>
    <date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
    <date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
  </div>
</div>
...