macoblog

「ゲーム × プログラミング」で生きていく

【Vue.js】CDNだけでSPAを作成する方法【Node不要】

JavaScript

Node(npm)を使わずCDN読み込みだけでVue.jsでSPAを作成する方法を紹介しています。コピペだけで簡単にSPA構築できるので初心者でも簡単に実装できます。

目次【本記事の内容】 [ click ]

Vue.jsを使ってSPAを作成する方法

①:完成イメージ

【Vue.js】CDNだけでSPAを作成する方法Node不要ver:完成イメージ/実装例

上記が今回紹介するSPAの完成イメージ、階層(ページ)が切り替わっているのに画面遷移している事をユーザーは意識しなくていい、しっかりSPAとして構築されていることが分かります。今回はこれをCDNだけ(Node/npmを使わない)で実装してみます。

②:環境・実装に必要なもの

OS Windows10/Mac
エディタ Visual Studio Code

使用するもの(フレームワーク・ライブラリ)

vue.js JavaScriptフレームワーク。※今回はCDNで読み込んで使用します(ローカルに落として読み込んでもOK)
vue-router.js Vue.jsを利用したSPA構築で、ルーティング制御をするための公式プラグイン。※今回はNode(npm)を使わずCDNで読み込んで使用します。
http-vue-loader.js VueコンポーネントをJavaScriptモジュールに変換するwebpackのloader。※今回はNode(npm)を使わずCDNで読み込んで使用します。

③:各ファイル・コード紹介

ディレクトリ構成

【Vue.js】CDNだけでSPAを作成する方法(Node不要):ディレクトリ構成「index.html」「main.js」「page1.vue」「page2.vue」

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">

    <title>Vue SPA</title>

    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

    <!-- Vue Router -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <!-- Vue Loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>

</head>

<body>

    <div id="app">
        <ul>
            <router-link tag="li" to="/">page1</router-link>
            <router-link tag="li" to="/page2">page2</router-link>
        </ul>
        <router-view></router-view>
    </div>

    <script src="./main.js"></script>

</body>

</html>

main.js

const router = new VueRouter({
    routes: [
        { path: '/', component: httpVueLoader('./page1.vue') },
        { path: '/page2', component: httpVueLoader('./page2.vue') },
    ]
})

const app = new Vue({
    el: "#app",
    router
});

page1.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
module.exports = {
  data: function() {
    return {
      title: 'page1.vue'
    }
  }
}
</script>

<style scoped>
h1 {
    color: red;
}
</style>

page2.vue

<template>
  <h1>{{ title }}</h1>
</template>

<script>
module.exports = {
  data: function() {
    return {
      title: 'page2.vue'
    }
  }
}
</script>

<style scoped>
h1 {
    color: blue;
}
</style>
WEBトマトWEBトマト

上記の構成でコピペして使えば動作します、難しい事は一切ありません。レンタルサーバーなどNodeが使えない環境でSPAを実装するならこの方法が一番手っ取り早いかと思います、是非お試しあれ。

人気記事無料体験が受けられるプログラミングスクール7社。現役エンジニアが厳選

関連記事【Vue.js】IE11でうまく表示されない(真っ白)原因と解決策