Задать вопрос
Ruless
@Ruless
Frontend development
vue

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

Здравствуйте, у меня есть такой 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 в конце файла то отображается просто белая страница
  • Вопрос задан
  • 3087 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Пригласить эксперта
Ответы на вопрос 2
notiv-nt
@notiv-nt
Как ваше ничего? Да, моё тоже
Если настроить 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 кому будет не лень проверять это у себя?
Ответ написан
7 комментариев
7 комментариев
Per_Ardua
@Per_Ardua
Frontend developer
Ты забыл примонтировать всё это счастье в нужный дом-элемент. Потому и ошибок никаких нет и в консоли всё чисто. Просто есть экземпляр вью, который ни с чем не связан и неинтерактивный шаблон
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скопировать сайт
19 апр. 2024, в 17:06
15000 руб./за проект
Поправить пхп скрипт
19 апр. 2024, в 16:53
1000 руб./за проект
Требуется настройка Яндекс Директа
19 апр. 2024, в 16:45
5000 руб./за проект
Ещё заказы