Почему не отображает vue компонент?

Question

[Влад Володько]

Здравствуйте, у меня есть такой js файл который собирается webpack в файл build.js

// import dependens
import Vue from 'vue';
Vue.config.productionTip = false

import CheckoutHeader from './checkout/CheckoutHeader.vue'

import axios from 'axios'
import _ from 'lodash'

new Vue({
    el: '#checkoutApp',
    data: {
        rrr: 123,
    },
    components: {
        CheckoutHeader
    },
    methods: {
        reloadCart() {}
    },
    mounted() {
    }

});

И такой html файл

<script src="/dev/build.js"></script>
        <div id="checkoutApp">
            <checkout-header></checkout-header>
{{ rrr }}
            <div class="order_title">Оформление заказа VUE</div>

        </div>

Проблема такая что на странице ничего не отображается и компоненты не создаются, обычно делел через ф-ю render и все было ок но тут нужно именно так делать. Не могу понять как все правильно подключить

UPD1
Если подключаю build.js в конце файла то отображается просто белая страница

Comments

[Andrey Suha]

Ошибки в консоли?

[Влад Володько]

Andrey Suha, Нету ничего, все нормально отрабатывает, веб пак тоже молчит

[Влад Володько]

Andrey Suha, В консоль я выводил результат работы axios то все ок, но вот страница пустая

[Andrey Suha]

Влад Володько, окей, ссылка на гит со всеми файлами есть? Видимо проблема не в тех файлах что Вы предоставили

[Влад Володько]

Andrey Suha, Ссылку на гит не могу дать. Набросал пример того как у меня это все
https://codesandbox.io/embed/vue-template-bho4w?fo...

Answer 1

[Михаил]

Если настроить webpack:

1. index.html

<div id="app-root"></div>
<script src="/dev/build.js"></script>

2. main.js

import Vue from 'vue';
import App from './App.vue'

Vue.config.productionTip = false;

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

3. App.vue

<template>
<div>
  <checkout-header></checkout-header>
  {{ rrr }}
  <div class="order_title">Оформление заказа VUE</div>
</div>
</template>

<script>
import CheckoutHeader from './checkout/CheckoutHeader.vue'
import axios from 'axios'
import _ from 'lodash'

export default {
  data: () => ({
    rrr: 123,
  }),

  components: {
    CheckoutHeader
  },

  methods: {
    reloadCart() {}
  },
}
</script>

Если без webpack, то выложите код https://codesandbox.io/s/vue кому будет не лень проверять это у себя?

Comments

[Михаил]

Влад Володько Как пример https://codesandbox.io/s/vue-template-8ggon

[Влад Володько]

Михаил, Да, способ который вы описали я знаю, и он чудесно работает, но мне нужно делать по другому

[Влад Володько]

Мне вот нужно без ф-и render я хочу просто подключить файлик который собрал вебпак

[Михаил]

Влад Володько, код выложите куда-нибудь

[Влад Володько]

Михаил, Код чего?
В вопросе я выложил код html и код main.js

[Михаил]

Влад Володько, если вам до сих пор не ответили, значит ошибка где-то глубже, и для того, чтоб её найти нужно запустить это локально и потыкать пальцами

[Михаил]

Влад Володько, либо разбирайтесь сами, либо предоставьте возможность людям понять в чем причина, а не

Ну вот 2 строки html, вот 3 строки js, разбирайтесь

Answer 2

[Павел Коковин]

Ты забыл примонтировать всё это счастье в нужный дом-элемент. Потому и ошибок никаких нет и в консоли всё чисто. Просто есть экземпляр вью, который ни с чем не связан и неинтерактивный шаблон

Comments

[Влад Володько]

Спасибо за ответ. Но вроде же есть такой дом-элемент. Тут вот именно прикол в этой функции рендер с ней все работает

Можете рассказать подробней

joxi.ru/nAyO1ReCg5e70m

[Влад Володько]

Павел Коковин Можете рассказать подробней