App.vue 中的模板未显示在 index.html 中

Question

我正在使用本地 vue.js 这些是我的文件。 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>

但是我的 index.html 什么也没显示

Answer 1

您将 vue 实例挂载到 ID 为“app”的 div 节点，但我找不到“#app”节点，因此您可以通过插入“#app”来解决该问题节点 .

index.html:

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

Answer 2

像史蒂文建议你必须编译vue组件。

如果您不想那样做，下面是最简单的方法。

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>

您可能需要 build 它与 vue-cli 一起为您的 android 应用程序

创建一个 SPA（单页应用程序）

Answer 3

您好，您的输入正确吗？来自 node_modules 它应该是 import Vue from 'vue' 而不是 import Vue from './res/vue.js' 尝试一下

App.vue 中的模板未显示在 index.html 中

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

javascript

vue.js

vue-component

vuejs2