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

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

目次[ click ]

Vue.jsを使ってSPAを作成する方法
①：完成イメージ
②：環境・実装に必要なもの
③：各ファイル・コード紹介

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エンジニア

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

他の人が読んでいる記事

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

本記事では、無料体験・体験カウンセリングを受けることが出来るおすすめのプログラミングスクール８社を現役のエンジニアが厳選…

macoblog.com