Как визуализировать компонент Vue из файла?
У меня есть очень простой компонент в моем приложении Vue.js.
App.vue:
<template>
<div>
App Component
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Теперь я пытаюсь импортировать этот компонент из файла и визуализировать его.
индекс.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 from, как и ожидалось, а только свой #appdiv. Что я здесь делаю неправильно?
Я использую последний vue.js, а мой браузер — последний Firefox.
@jom Я только что попробовал, не работает :(
Это действительно должно работать, сможете ли вы создать для него поддающуюся проверке скрипку?
Но как добавить файл App.vue в скрипку?
Попробуйте КодПесочница и сделайте проверяемый пример.
Вот мой проект
Спасибо за его создание. Зачем вам нужно добавлять Vue через CDN? В вашем проекте CodeSandbox вы можете заставить его работать, если добавите ссылку на vue под деревом Dependencies.
К сожалению, я не знаком с CodeSandbox. Поэтому.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Удалите эту строку
Vue.component("App", App), и она должна работать. Потому что вы указали методrenderдля этого компонента.