Я создал проект, используя vue-cli @ 4, и он работает нормально, но я сделал некоторые изменения в main.js, и он больше не работает.
//main.js
import Vue from "vue";
import App from './App.vue'
//Vue.config.productionTip = false;
new Vue({
el: "#root-app",
//commented components property when using render and mount
components: {
App
},
data: {
name: "amandeep Singh"
}
// render: h => h(App),
}); //.$mount('#app')
Файл App.vue
<template>
<div>
testingggg
<img alt="Vue logo" src="./assets/logo.png">
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
Файл Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>admin</title>
</head>
<body>
<div id="root-app">
{{name}}
<app></app>
</div>
<!-- built files will be auto injected -->
</body>
</html>
Он не показывает ничего, даже значение «name» не интерполируется. Но если я раскомментирую
рендер: h => h (приложение),
и
. $ Mount ('# app'))
все отлично работает. Так что мой вопрос почему не так с этими двумя прокомментировал. Я проверил много примеров и видел проекты, где им не нужно использовать функцию рендеринга, все, что они использовали, это свойство "el" для монтирования vue в Html, и все работает.
Так что кто-то может понравиться, что здесь происходит? Что я делаю не так? Как я могу сделать работу без рендера и монтирования и зачем это нужно?