I created the simplest project with Vue-cli. I added a data attribute to the Vue instance in main.js, so why can"t it be displayed on the page? the same problem can occur in scenarios where webpack + vue-loader is used. Now all data can only be added to Component.
main.js
import Vue from "vue"
//import App from "./App.vue"
Vue.config.productionTip = false
new Vue({
el: "-sharpapp",
data() {
return {
msg: "Hello from Vue!"
}
},
//render: h => h(App)
}).$mount("-sharpapp");
index.html
<!DOCTYPE html>
<html>
<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="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<title>vue-cli-example</title>
</head>
<body>
<noscript>
<strong>We"re sorry but vue-cli-example doesn"t work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
{{msg}}
</div>
<!-- built files will be auto injected -->
</body>
</html>