Uncaught ReferenceError: Vue is not defined　at のエラーを直したい

前提・実現したいこと

Onsen ui初学者です。
Onsen ui のv-ons-splitterの実例を使ってみたいです。
https://ja.onsen.io/v2/api/vue/v-ons-splitter.html

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

コピペで使用して見ましたが
Uncaught ReferenceError: Vue is not defined　at
というエラーが出てしまいます。

コピペだけではなく他の何かを読み込む必要があるのでしょうか？
初歩的な質問ですみません、ご回答いただけるとうれしいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4        <meta charset="UTF-8">
5        <title>sample</title>
6        <script src="js/main.js"></script>
7        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
8      
9        <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
10        <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
11        <link rel="stylesheet" href="style.css">
12       
13</head>
14<body>
15<template id="main">
16        <v-ons-splitter>
17          <v-ons-splitter-side
18            swipeable width="150px" collapse="" side="left"
19            :open.sync="openSide"
20          >
21            <v-ons-page>
22              <v-ons-list>
23                <v-ons-list-item v-for="page in pages"
24                  tappable modifier="chevron"
25                  @click="currentPage = page; openSide = false"
26                >
27                  <div class="center">{{ page }}</div>
28                </v-ons-list-item>
29              </v-ons-list>
30            </v-ons-page>
31          </v-ons-splitter-side>
32      
33          <v-ons-splitter-content>
34            <component :is="currentPage" :toggle-menu="() => openSide = !openSide"></component>
35          </v-ons-splitter-content>
36        </v-ons-splitter>
37      </template>
38      
39      <template id="home">
40        <v-ons-page>
41          <custom-toolbar title="Home" :action="toggleMenu"></custom-toolbar>
42          <p style="text-align: center">
43            Welcome home.
44          </p>
45        </v-ons-page>
46      </template>
47      
48      <template id="news">
49        <v-ons-page>
50          <custom-toolbar title="News" :action="toggleMenu"></custom-toolbar>
51          <p style="text-align: center">
52            Some news here.
53          </p>
54        </v-ons-page>
55      </template>
56      
57      <template id="settings">
58        <v-ons-page>
59          <custom-toolbar title="Settings" :action="toggleMenu"></custom-toolbar>
60          <p style="text-align: center">
61            Change the settings.
62          </p>
63        </v-ons-page>
64      </template>
65      
66      <template id="toolbar">
67        <v-ons-toolbar>
68          <div class="left">
69            <v-ons-toolbar-button @click="action">
70              <v-ons-icon icon="ion-navicon, material:md-menu"></v-ons-icon>
71            </v-ons-toolbar-button>
72          </div>
73          <div class="center">{{ title }}</div>
74        </v-ons-toolbar>
75      </template>
76      
77      <div id="app"></div>
78</body>

javascript
1const customToolbar = {
2    template: '#toolbar',
3    props: ['title', 'action']
4  };
5  
6  const homePage = {
7    template: '#home',
8    props: ['toggleMenu'],
9    components: { customToolbar }
10  };
11  
12  const newsPage = {
13    template: '#news',
14    props: ['toggleMenu'],
15    components: { customToolbar }
16  };
17  
18  const settingsPage = {
19    template: '#settings',
20    props: ['toggleMenu'],
21    components: { customToolbar }
22  };
23  
24 var vm = new Vue({
25    el: '#app',
26    template: '#main',
27    data() {
28      return {
29        currentPage: 'home',
30        pages: ['home', 'news', 'settings'],
31        openSide: false
32      };
33    },
34    components: {
35      home: homePage,
36      news: newsPage,
37      settings: settingsPage,
38    }
39  });

試したこと

でVue.jsを読み込んで見ました

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

回答1件

ベストアンサー

提示されている JavaScript がjs/main.js だとするならば、読み込み順が違います。

HTML
1<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
2<script src="js/main.js"></script>

投稿2018/11/21 16:42

kei344

総合スコア69400

kita_morio

2018/11/23 01:22

解決しました！ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

Uncaught ReferenceError: Vue is not defined　at のエラーを直したい

前提・実現したいこと

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

該当のソースコード

試したこと

関連した質問