前提
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

あなたの回答
tips
プレビュー