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

【问题标题】：Templete in App.vue doesn't show in index.htmlApp.vue 中的模板未显示在 index.html 中
【发布时间】：2021-10-12 01:55:17
【问题描述】：

我正在使用本地 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 什么也没显示

【问题讨论】：

.vue 文件需要编译。如果要使用.vue文件，则需要使用vue-cli + webpack。
我可以在我的android上使用它来运行这个应用程序吗？
我从未尝试过，所以我不确定。您最简单的方法是使用 in-dom 模板或将模板作为字符串放在 .js 文件中的组件中。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

就像 Steven 建议的那样，你必须编译 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（单页应用程序）

【讨论】：

【解决方案2】：

您将 vue 实例安装在 id 为“app”的 div 节点上，但我找不到“#app”节点，因此您可以通过插入“#app”节点来解决该问题。

index.html:

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

【讨论】：

【解决方案3】：

您好，您的导入正确吗？从 node_modules 应该是 import Vue from 'vue' 而不是 import Vue from './res/vue.js' 试试吧

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。