みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

webpack 4, vue.js, vue-routerを用いたSPAの開発環境

自分用メモも兼ねて,シングルページアプリケーション(SPA)基本となるプロジェクトの構成を紹介します.

webpack 4ではconfig.jsを省略できるようになったようですが,少しは設定が必要なようです.

ディレクトリ構成

  • index.html
  • node_modules/
  • package.json
  • src/
    • about.vue
    • app.vue
    • index.js
    • top.vue
  • webpack.config.js

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Vue-Router test</title>
    <meta charset="UTF-8">
</head>

<body>
    <div id="app"></div>
    <script src="main.js"></script>
</body>

</html>

最低限のhtmlを記載しています.div#appがvue.jsによって変更されます.main.jsの読み込みはbodyの最後にしておかないと,

[Vue warn]: Cannot find element: #app

とエラーが出ます.

package.json

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.16",
    "vue-loader": "^15.2.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.16"
  },
  "devDependencies": {
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }
}

上記ファイルは,下記のコマンドで自動的に作成されます.

npm init -y
sudo npm install vue vue-loader vue-router vue-template-compiler
sudo npm install webpack webpack-cli webpack-dev-server -D

webpack.config.js

const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
  mode: "development",
  entry: ["./src/index.js"],
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: "vue-loader"
      }
    ]
  },
  devServer: {
    open: true,
    historyApiFallback: true
  },
  plugins: [new VueLoaderPlugin()]
};

vue-router.jsを使用する場合は,VueLoaderPluginの使用を明示します..vueファイルを使用するので,vue-loaderを使用します.

historyApiFallbackを有効にすることで,404リクエストの際はすべてindex.htmlを返すようにします.*1この設定が有効でなければ,トップページでリロードした場合に,404 cannot get /about などとエラーとなります.spaの場合は必須です.

index.js

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);

import App from "./app.vue";
import Top from "./top.vue";
import About from "./about.vue";

const router = new VueRouter({
  mode: "history",
  routes: [{ path: "/", component: Top }, { path: "/about", component: About }]
});

new Vue({
  el: "#app",
  router,
  render: h => h(App)
});

app.vueを基本として,top.vue, about.vueのページを作成します.

app.vue

<template>
    <div>
        <router-link to="/">
            top
        </router-link>
        <router-link to="/about">
            about
        </router-link>
        <router-view></router-view>
    </div>
</template>

top.vueとabout.vueがrouter-viewコンポーネントに挿入されます.

top.vue

<template>
    <div>
        Topページ
    </div>
</template>

about.vue

<template>
    <div>
        Aboutページ
    </div>
</template>

以上の構成で,

npm run dev

と起動すれば,自動的にブラウザーが開いて(open オプション),Hot Module Replacementが有効となりスムーズなデザイン設計ができるようなりました.