Как правильно добавить элемент приложения в веб-пакет?- Получение [Vue warn]: не удается найти элемент: #app - PullRequest
Новая
       15

Как правильно добавить элемент приложения в веб-пакет?- Получение [Vue warn]: не удается найти элемент: #app

0 голосов
/ 15 декабря 2018

Вот мой код пример кода

Я пытаюсь изучить webpack 4 и настраиваю тестовый проект.

Традиционно я создал приложение vuejs на сайтах Asp.net.Так что я всегда знаю точку входа html и могу поместить элемент на страницу.

Из всех сообщений в блоге, которые я видел для vue, похоже, это все, что они делают для настройки своего приложения.

App.Vue 

<template>
    <div id='app'>
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {

}
</script>

index.ts 

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

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render: (h) => h(App),
  router
}).$mount('#app');

Когда я запускаю это, я получаю [Vue warn]: Не удается найтиэлемент: #app.Если я добавлю 

 document.write('<div id="app"><router-view></router-view></div>');

Код работает нормально.Поскольку я использую vue-router, я не думаю, что мне на самом деле нужен файл App.vue, но мне все еще нужно где-то также монтировать объект vue.

Итак, глядя на мою ссылку на github, что будетправильный способ заставить это работать?

1 Ответ

0 голосов
/ 15 декабря 2018

Это проблема курица и яйцо .Вы пытаетесь присвоить корневой компонент элементу #app, но элемент #app существует внутри компонента App.Во время вызова new Vue div #app не существует, поскольку компонент App не смонтирован!

В большинстве приложений Vue в файле index.html есть пустой <div id="app"></div>так что корневой компонент Vue должен где-то монтироваться при загрузке страницы.

Если вы не хотите делать это таким образом, вы можете вместо этого смонтировать его вручную: 

const root = new Vue({
  render: (h) => h(App),
  router
}).$mount()

document.body.appendChild(root.$el)
...