Как подключить сторонний элемент в существующий проект на vue js?

Question

Есть клиентское приложение на vue js, представляющее из себя небольшую СРМ для локальных задач.

В нем присутствуют с десяток полей ввода, на одно из которых я хочу повесить datepicker. Танцы с бубном (с jQuery и bootstrap datepicker'ами) ничего не дали, т.к. jQuery функция для работы datepicker'а вешается на элемент, а мой элемент реактивно создается в DOM'e средствами vue в уйме комбинаций условий и прописывать в каждом сценарии навешивание функции - дичь. Вообще эти танцы с бубном обусловлены тем, что с vue работал мало и далеко не все понимаю в нем.

Нашел вот такой datepicker для vue, все нравится, оч круто и смотрится лучше предыдущих, но вот проблема - не могу понять как с ним работать. Подключил CDN css и js, вставляю в свою верстку код компонента и мое приложение прекращает работать, в консоли нет ни 1 ошибки(

Подскажите, как правильно подключать такие бибилиотеки в случае с vue и какая последовательность действий для работы компонентов?

в верстку вставлял вот этот кусок:

<el-date-picker
  v-model="value1"
  type="datetime"
  placeholder="Select date and time">
</el-date-picker>

Больше никуда ничего не добавлял...

Answer 1

Удаляй CDN,
в консоль апликухи:

npm i element-ui -S

в src/main.js :

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// писать туда где и все импорты, после в этот же файл:

Vue.use(ElementUI);

Должно заработать, сейчас пойду сам тестить
После теста
название компонента: DataPicker.vue

<template>
  <div>
    <div class="block">
      <span class="demonstration">Default</span>
      <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="Select date and time">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">With shortcuts</span>
      <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="Select date and time"
          :picker-options="pickerOptions">
      </el-date-picker>
    </div>
    <div class="block">
      <span class="demonstration">With default time</span>
      <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="Select date and time"
          default-time="12:00:00">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataPicker',
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: 'Today',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: 'Yesterday',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: 'A week ago',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
      value3: ''
    };
  }
};
</script>

БЛОГ НА HUSL

Как подключить сторонний элемент в существующий проект на vue js?

Ответы (1 шт):