Как подключить компонент vue-dateime без webpack?

Question

Pavel_Timofeev @Pavel_Timofeev

Vue.js

Как подключить компонент vue-dateime без webpack?

Есть компонент vue-datetime. Как можно его подключить в проект без использования webpack, vue-cli?

Вопрос задан более трёх лет назад
349 просмотров

Комментировать

Подписаться 2 Простой Комментировать

Решения вопроса 1

5 комментариев

Pavel_Timofeev @Pavel_Timofeev Автор вопроса

Значит без vue-cli все таки не обойтись. Буду изучать. Спасибо.
Но все таки интересно, как Вы утащили исходки? Поделитесь пожалуйста 0xD34F

Написано более трёх лет назад
0xD34F @0xD34F Куратор тега Vue.js

Pavel_Timofeev, ctrl+c, ctrl+v. Кое-что поправить пришлось руками, конечно - "без использования webpack", ага.

Написано более трёх лет назад

Pavel_Timofeev @Pavel_Timofeev Автор вопроса

Установил node.js, vue-cli. Загрузил webpack-simple и подлючил необходимый мне компонент в файле main.js.

import Vue from 'vue'
import App from './App.vue'
import Datetime from 'vue-datetime';

Vue.use(Datetime);

new Vue({
  el: '#app',
  render: h => h(App)
})

После npm run build получил файл build.js.

Т.е. то что я собрал было в секции template файла App.vue.

<template>
  <div id="app">
	  <datetime v-model="date"
          type="datetime"
          input-format="DD-MM-YYYY HH:mm"
          wrapper-class="my-wrapper-class"
          input-class="my-input-class"
          placeholder="Select date"
          moment-locale="en"
          :i18n="{ok:'Ok1', cancel:'Cancel1'}"
          :disabled-dates="['2017-09-07', ['2017-09-25', '2017-10-05']]"
          max-date="2017-12-10"
          min-date="2017-07-10"
          monday-first
          auto-continue
          auto-close
          required></datetime>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      date: ''
    }
  }
}
</script>

<style>

</style>

И если например я теперь хочу использовать еще один экземпляр компонента в index.html, то мне не получится просто добавить описание компонента в секцию ?

Написано более трёх лет назад

0xD34F @0xD34F Куратор тега Vue.js

Pavel_Timofeev, не очень понял, в чём у вас проблема.

Хотите ещё один экземпляр - ну так добавьте столько, сколько вам надо. Только конечно, не в index.html - его трогать не надо. Делать npm run build каждый раз не надо - сделаете, когда всё готово будет. А до того - npm run dev.

Написано более трёх лет назад
Pavel_Timofeev @Pavel_Timofeev Автор вопроса
0xD34F Да Вы правильно поняли. Я вроде разобрался. Вся логика хранится в App.vue. Туда надо добалять все компоненты и всю логику, потом когда все готово надо делать npm run build и получать файла build.js. А само приложение будет таким. Спасибо большое 0xD34F

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>www</title> </head> <body> <div id="app"> </div> <script src="dist/build.js"></script> </body> </html>
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

Pavel_Timofeev @Pavel_Timofeev Автор вопроса

Компонент находится в файле .vue. Разве компоненты можно так подлючать?

Написано более трёх лет назад
Дима Паутов @bootd

Pavel_Timofeev, конечно. Просто инициализация происходит как в доке. А как вы подключаете, не имеет значения. Суть такая же как в jquery плагинах, скрипт подключил, а в главном файле, где пишется весь код пишите инициализацию этого плагина.

Написано более трёх лет назад

Pavel_Timofeev @Pavel_Timofeev Автор вопроса

1. Скачал полностью https://github.com/mariomka/vue-datetime/tree/mast...
2. Сделал страничку

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Vue Date Picker</title>
</head>
<body>
    <div id="#app">
		<datetime v-model="date"></datetime>
    </div>

  <script type="text/javascript" src="vue.min.js"></script> 
  <script type="text/javascript" src="src/Datetime.vue"></script> 
  <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
			date: ''
        }
      })
    </script>
</body>
</html>

Получаю ошибку Datetime.vue:1 Uncaught SyntaxError: Unexpected token < на файл Datetime.vue:1.

Написано более трёх лет назад

Александр Янк @alex-lenk

Pavel_Timofeev, ну и как получилось исправить?

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Vue.js

+1 ещё

Средний
Как переназначить значение null в объект с явной структурой в TS Vue?
- 1 подписчик
- 6 часов назад
- 40 просмотров
1

ответ
Vue.js

Простой
Как сделать проверку в vuelidate, где одно из двух полей должно быть обязательным?
- 1 подписчик
- 29 апр.
- 67 просмотров
1

ответ
Vue.js

Простой
Как скопировать данные из пропса в дочернем компоненте?
- 1 подписчик
- 28 апр.
- 72 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как интегрировать localStorage в Pinia с использованием TypeScript?
- 1 подписчик
- 27 апр.
- 71 просмотр
1

ответ
Vue.js

Простой
Vue 3 Composition API как обратиться к функции через this.$refs?
- 1 подписчик
- 27 апр.
- 80 просмотров
2

ответа
Node.js

+3 ещё

Средний
Как решить ошибку Nuxt 3: does not provide an export named execa?
- 1 подписчик
- 25 апр.
- 46 просмотров
0

ответов
Vue.js

Простой
Как выделять данные в столбце таблицы различными цветами?
- 1 подписчик
- 25 апр.
- 207 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сформировать маску, используя регулярное выражение?
- 1 подписчик
- 25 апр.
- 79 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 24 апр.
- 62 просмотра
1

ответ
Vue.js

Простой
Из-за чего может добавлять слеш в url?
- 1 подписчик
- 23 апр.
- 56 просмотров
0

ответов
Показать ещё Загружается…

Frontend Vue & Capacitor Developer Middle++

Parasol Software

от 2 000 до 2 500 $

Второй ведущий разработчик (Fullstack, PHP, Laravel, Vue, Mysql)

Donatov.net

от 100 000 до 300 000 ₽

Frontend developer (middle/senior)

//stablecode

от 210 000 ₽

Разработать нейросеть

02 мая 2024, в 06:11

30000 руб./за проект

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

7000 руб./за проект

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

5000 руб./за проект

Answer 1 · 2017-11-29 13:55:46

Как можно его подключить в проект без использования webpack, vue-cli?

"Подключить" - никак (по крайней мере, в документации иных способов кроме как с использованием сборщиков не упоминается). Можно разве что утащить исходники, и... Вот. Это, разумеется, дикость. Освойте лучше vue-cli - там нет ничего сложного.

UPD [Дописано сильно позднее]. Появилась возможность подключить через cdn. Например.

Answer 2 · 2017-11-29 11:59:54

Дима Паутов @bootd

Гугли и ты откроешь врата знаний!

Видимо точно так же, как у вас подключен vue.js. Через тег script как и другие файлы скриптов

Ответ написан более трёх лет назад

4 комментария

Как подключить компонент vue-dateime без webpack?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт