質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

562閲覧

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

yuttort

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2023/01/28 13:38

編集2023/01/29 01:35

前提

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

knuser

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を使うとうまく画面が表示されませんでした。
yuttort

2023/01/29 05:09

コメントありがとうございます。確認してみたところ、3.x系のようでした。2系の方がやりやすいようなので、ダウングレードして試してみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問