Question

我的Vue.js应用程序中有一个非常简单的组件。

App.vue：

<template>
    <div>
        App Component
    </div>
</template>
<script>
    export default {
        name: "App"
    };
</script>

现在，我尝试从文件导入此组件并进行渲染。

index.html：

<html>
<head>
    <meta charset="UTF-8" />
    <title>Vue Js Demo</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>

script.js

import App from "./App.vue"

Vue.component("App", App);

var app = new Vue({
  render: h => h(App)
}).$mount("#app");

但是，我无法使用此组件。在浏览器中打开index.html文件时，无法按预期从组件中看到div，而只能看到#app div。我在这里做什么错了？

我正在使用最新的vue.js，而我的浏览器是最新的Firefox。

如何从文件渲染Vue组件？

0 个答案: