Я некоторое время работал с Vue, но я никогда не пробовал работать с Single File Components вместе с webpack.Вот проблема у меня.У меня есть 2 файла: main.js (который содержит корневой экземпляр Vue) и App.vue (который является отдельным компонентом файла. Код в каждом файле выглядит следующим образом:
main.js:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
components: { App, },
data(){
return {
greeting: "Hello World!",
}
},
render: h => h(App),
});
App.vue:
<template>
<div id="app">
{{greeting}}
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Обратите внимание, что я использую веб-пакет, и файл main.js должен быть точкой входа.Код связан с файлом bundle.js.
Теперь моя проблема в том, что при отображении шаблона в App.vue он не показывает «Hello Word», что является значением {{приветствия}}.Я ожидаю, что данные, переданные из корневого экземпляра Vue в main.js, должны быть доступны компоненту App.vue.
{{приветствие}} не оценивается, когда я помещаю его в файл index.html., который ссылается на bundle.js (связанная версия main.js)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nothing</title>
<script src="/dist/build.js"></script>
</head>
<body>
<div id="app"></div>
{{greeting}}
</body>
</html>
Значит ли это, что данные в экземпляре root vue нигде не доступны?Что мне делать?