vue.jsにてnpm run serveをしても何も表示されない。index.htmlにapp.vueの内容をマウントしたい

前提

vue初心者です。vue add elementを実行し、elementを入れたのですが、npm run serveしてhttp://localhost:8080/ にアクセスしても白紙のページが表示されるだけです。App.vueには本来のウェルカムページのようなものは入ってるので、うまくindex.htmlにmain.jsを通してApp.vueがマウント(?)できてないのかなと考えています。どうすればよいでしょうか？（ちなみに下記の<div id="app"></div>のところにApp.vueの内容が入るという認識であってますでしょうか。）

実現したいこと

http://localhost:8080/ にアクセスして、elementが使用できる形でウェルカムページを表示したい。

該当のソースコード

index.html
1<!DOCTYPE html>
2<html lang="">
3  <head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width,initial-scale=1.0">
7    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8    <title><%= htmlWebpackPlugin.options.title %></title>
9  </head>
10  <body>
11    <noscript>
12      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13    </noscript>
14    <div id="app"></div>
15    <!-- built files will be auto injected -->
16  </body>
17</html>

main.js
1import { createApp } from 'vue'
2import App from './App.vue'
3import './plugins/element.js'
4
5createApp(App).mount('#app')
6

App.vue
1<template>
2  <div id="app">
3    <img src="./assets/logo.png">
4    <div>
5      <p>
6        If Element is successfully added to this project, you'll see an
7        <code v-text="'<el-button>'"></code>
8        below
9      </p>
10      <el-button>el-button</el-button>
11    </div>
12    <HelloWorld msg="Welcome to Your Vue.js App"/>
13  </div>
14</template>
15
16<script>
17import HelloWorld from './components/HelloWorld.vue'
18
19export default {
20  name: 'app',
21  components: {
22    HelloWorld
23  }
24}
25</script>
26
27<style>
28#app {
29  font-family: 'Avenir', Helvetica, Arial, sans-serif;
30  -webkit-font-smoothing: antialiased;
31  -moz-osx-font-smoothing: grayscale;
32  text-align: center;
33  color: #2c3e50;
34  margin-top: 60px;
35}
36</style>
37

knuser1

2023/01/29 03:49

利用されているvue.jsのバージョンはいくつでしょうか？(2.x系でしょうか？3.x系でしょうか？） element-ui (vue add element)は、2.x系のみのサポートのようです。 - https://github.com/ElemeFE/element 3.x系であれば、上記で紹介されているElement Plus (vue add element-plus)が代替案だと思います。手元で試した範囲だと、3.xでelement-uiを使うとうまく画面が表示されませんでした。