Vue.jsでlocalhost8080に何も表示されない

Question

vue-jsでlocalhostに何も表示されない

発生している問題・エラーメッセージ

以下のようにApp.vueに記述したものの、localhost:8080には何も表示されません。試しにh1タグを入れてみると表示されたので、CLIが問題ではなく、ソースコードに問題があるように思います。以下のコードに誤りは見られますか？Vue.jsとVutifyを使用しています。ご教授頂けると幸いです。

エラーメッセージ：なし

該当のソースコード

<template>

<v-app light>
  <!-- The SideMenu Component go here   -->
  <v-toolbar fixed app light clipped-left color="primary" class="elevation-2">
    <v-toolbar-side-icon @click="drawer = !drawer"  class="white--text"></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">News App</v-toolbar-title>
  </v-toolbar>

  <v-content>
    <v-container fluid>
      <MainContent :articles="articles"></MainContent>
    </v-container>
   </v-content>
   <v-footer class="secondary" app>
      <v-layout row wrap align-center>
        <v-flex xs12>
          <div class="white--text ml-3">
            Made with
            <v-icon class="red--text">favorite</v-icon>
            by <a class="white--text" href="https://vuetifyjs.com" target="_blank">Vuetify</a>
            and <a class="white--text" href="https://github.com/rachidsakara" target="_blank">Rachid Sakara</a>
          </div>
        </v-flex>
      </v-layout>
    </v-footer>
  </v-app>    
</template>

<script>

import axios from 'axios' 
import MainContent from './components/MainContent.vue' component

export default {

  components: {
    MainContent, 
  },

  data() {
    return {
      drawer: false, // false = Vuetify automatically "do the right thing" to show/hide the drawer
      api_key:'自分のapi key',
      articles: [],
      errors: [] 
    }
  },
  created () {
    axios.get('https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey='+this.api_key)
      .then(response => {
        this.articles = response.data.articles
        console.log('data:')
        console.log(response.data.articles)
      })
      .catch(e => {
        this.errors.push(e)
      })
  },

  }
</script>

試したこと

念のため触っていなかったルーティングを設定しなおしたがダメでした。。。
port番号を任意に変更しましたが甲斐なしでした。

補足情報（FW/ツールのバージョンなど）

Vue.js　v2, Vutify
ここにより詳細な情報を記載してください。

Comments

[Twoshi]

ご質問拝見いたしました。
Vuetifyのバージョンは幾つになりますでしょうか？(最新のVuetifyと比べ使われているコンポーネントが古いようです。)
また、MainContent のimport文の右に「component」という記載がありますが、コピペミスでしょうか？

[ttori_san]

vuetify@2.4.3
importの横の「component」は質問用に消したコメントの消し忘れです！ソースではコメントアウトされています！すみませんっ!
別の回答者様に指摘していただいたscript文でhtmlは表示されたのですが、cssは全く適用されていないので、Vutifyのバージョンが問題なのかなぁと思いました。。。

Answer 1

Vue.jsの素人なので間違っているかも知れませんが、

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

が必要なのでは？

というか、ブラウザ上で動くと思うんですがlocalhost:8080ってサーバーサイドの起動法で起動しないと思ったりもして、あれ？　俺間違ってる？

Comments

[ttori_san]

ご回答本当にありがとうございます。おっしゃるscript文をindex.htmlに入れると、apiから取得したニュースが羅列されてlocalhost:8080に表示されました。助かりました。こうした情報は回答者様のご経験から来るものでしょうか・・・？駆け出しで、何もわかっておらず、調べてもこうした情報に当たるまでが長く苦しんでいます。