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

Question

Pavel_Timofeev @Pavel_Timofeev

Vue.js

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

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

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

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

Подписаться 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 подписчик
- вчера
- 94 просмотра
1

ответ
Vue.js

Простой
Как игнорировать клик на компоненте?
- 1 подписчик
- вчера
- 63 просмотра
1

ответ
Vue.js

+1 ещё

Средний
Как правильно типизировать vue generic components?
- 2 подписчика
- 21 нояб.
- 119 просмотров
1

ответ
Vue.js

Простой
В какую сторону развивается Vue и есть ли ему современные альтернативы?
- 6 подписчиков
- 21 нояб.
- 4979 просмотров
3

ответа
Vue.js

Средний
Как можно вытащить типы пропсов из определения компонента?
- 1 подписчик
- 15 нояб.
- 106 просмотров
1

ответ
Ubuntu

+2 ещё

Простой
Как запустить VueJs в Docker на Ubuntu 14.04?
- 1 подписчик
- 12 нояб.
- 142 просмотра
2

ответа
Vue.js

Средний
Как использовать компонент vue3-draggable без сборщиков?
- 1 подписчик
- 12 нояб.
- 77 просмотров
1

ответ
Node.js

+2 ещё

Средний
Можно ли вернуть помимо статической страницы данные с сервера?
- 1 подписчик
- 08 нояб.
- 131 просмотр
0

ответов
Vue.js

Простой
Как пробросить модификаторы v-model в кастомный инпут?
- 1 подписчик
- 02 нояб.
- 186 просмотров
2

ответа
Vue.js

Простой
Как можно сделать форматирование и вывод JSON в таблице?
- 1 подписчик
- 31 окт.
- 70 просмотров
2

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

Frontend Developer (Vue/Nuxt)

tactic.team

от 140 000 до 180 000 ₽

Frontend разработчик (Vue)

Creatium

от 150 000 ₽

😃 Frontend developer Vue 💻📱⌚️

Viletech • Москва

от 150 000 ₽

Сверстать веб приложение на vue

24 нояб. 2024, в 19:46

1000 руб./в час

Стили/дизайн/верстка приложения на QT

24 нояб. 2024, в 19:43

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

SEO оптимизация мультиязычного сайта и вывод в топы

24 нояб. 2024, в 19:42

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

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?

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

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

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