Vue.jsで画面が真っ白のまま変化しない

同じフォルダの中に以下のHTMLファイルとJavaScriptファイルを作りました。
Vue.jsとVuetifyを使ってカルーセルを制作したいと思っています。
現在、サンプルを作るために
https://vuetifyjs.com/ja/components/carousels
を参考にして以下のように記述しましたが、ブラウザで起動しても白紙でした。
SafariとChromeで試してみましたが結果は変わらずでした。
どのようにすれば、しっかりと表示されるのでしょうか？
回答よろしくお願い申し上げます。

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Sample</title>
6</head>
7
8<body>
9    <template>
10        <v-carousel>
11            <v-carousel-item
12                v-for="(item,i) in items"
13                :key="i"
14                :src="item.src"
15            ></v-carousel-item>
16        </v-carousel>
17    </template>
18
19
20
21    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
22    <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
23    <script type="text/javascript" src="main.js"></script>
24        
25</body>
26</html>

JavaScript
1export default {
2    data () {
3      return {
4        items: [
5          {
6            src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
7          },
8          {
9            src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
10          },
11          {
12            src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
13          },
14          {
15            src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
16          }
17        ]
18      }
19    }
20  }

user14

2019/02/24 00:12

白紙ということはエラーがでているのではないですか？ f12でコンソールが開くので確かめてみてはどうでしょうか

MASAMI-O

2019/02/24 00:42

SyntaxError: Unexpected keyword 'export' というエラーが出ていますね。こちらはどうやったら解決するのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こうですかね。
Vueインスタンスとcssがなかったです。

html
1<!doctype html>
2<html>
3
4<head>
5  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
6  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
7  <meta charset="UTF-8">
8  <title>Sample</title>
9</head>
10
11<body>
12  <div id="app">
13    <v-carousel>
14      <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"></v-carousel-item>
15    </v-carousel>
16  </div>
17
18  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
19  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
20  <script type="text/javascript" src="main.js"></script>
21
22</body>
23
24</html>

js
1new Vue({
2    el:"#app",
3    data:{
4        items: [
5            {
6              src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
7            },
8            {
9              src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
10            },
11            {
12              src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
13            },
14            {
15              src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
16            }
17          ]
18    }
19});