Templete in App.vue doesn't show in index.html-CodePudding

I am using local vue.js These are my files. 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">
  <script src="res/vue.js"></script>
  <script src="res/vue-router.js"></script>
  <title>Vue</title>
</head>

<body>
  <div id="app" ></div>
  <script type="module" src="App.js"></script>
</body>
</html>

App.js

import Vue from './res/vue.js'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue

<template>
  <div>
    {{foo}}
  </div>
</template>


<script>
  export default {
    name: 'App',
    data: function(){
      return{
        foo:'Hello vue'
      }
    }
  }
</script>


<style>

</style>

But my index.html shows nothing

CodePudding user response：

You mount your vue instance at the div node which id is "app", but i can't find the "#app" node, so you can resolve that by insert the "#app" node .

index.html:

<body>
    <div id="app"></div>
    <script type="module" src="App.js"></script>
</body>

CodePudding user response：

Like the Steven suggested you have to compile vue components.

If you dont want to do it that way, below is the the easiet way.

Vue.createApp({
  data() {
    return {
      foo: 'Hello vue',
    };
  },
}).mount('#app');

<!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" />
    <script src="https://unpkg.com/vue@next"></script>

    <!-- <script src="res/vue-router.js"></script> -->
    <title>Vue</title>
  </head>

  <body>
    <div id="app">{{foo}}</div>
    <script type="module" src="App.js"></script>
  </body>
</html>

You probably need to build it with vue-cli to create a SPA(Single page Application) for your android application