Блог

Главная - Вопросы по программированию - Как отобразить компонент Vue из файла?

Как отобразить компонент Vue из файла?

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть очень простой компонент в моем Vue.js приложение.

Приложение.vue:

 <template>
    <div>
        App Component
    </div>
</template>
<script>
    export default {
        name: "App"
    };
</script>

Теперь я пытаюсь импортировать этот компонент из файла и отобразить его.

index.html:

 <html>
<head>
    <meta charset="UTF-8" />
    <title>Vue Js Demo</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>

script.js

 import App from "./App.vue"

Vue.component("App", App);

var app = new Vue({
  render: h => h(App)
}).$mount("#app");

Однако я не могу использовать этот компонент. Когда я открываю index.html файл в моем браузере, я не могу видеть мой div из компонента, как ожидалось, а только мой #app div . Что я здесь делаю не так?

Я использую последнюю vue.js и мой браузер — это последняя версия Firefox.

Комментарии:

1. Удалите эту строку Vue.component("App", App) , и она должна работать. Потому что вы указали render метод для этого компонента.

2. @jom Я только что пробовал, это не работает : (

3. Это действительно должно сработать, не могли бы вы создать для него проверяемую скрипку?

4. Но как добавить файл App.vue в fiddle?

5. Попробуйте CodeSandbox и, пожалуйста, сделайте проверяемый пример.