vue.js

Vue.jsでSPAサイトを作成するチュートリアル【1. 表示編】

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

目次

前提

  • タスクはnpm scriptsで一限管理
  • コマンドはyarnを使用
  • vue-cliwebpack-simpleを使用

バージョン

  • "vue": "^2.5.11"
  • "webpack": "^3.6.0"

手順

1. vue-cliでVue.jsの足場を構築

vue-cliを追加します。

$ yarn add -D vue-cli

webpackのシンプル版で初期化します。

$ vue init webpack-simple
    * Generate project in current directory? => Enter
    * Project description => Enter
    * Author => Enter
    * License => Enter
    * Use sass? => y

webpack-simpleで使用するパッケージをインストールします。

$ yarn

2. ローカルで確認する環境を構築

browser-syncを追加します。

$ yarn add -D browser-sync

bs-config.jsをcliで実行するためpackage.jsonを変更します。

package.json
{
  // 省略
  "scripts": {
    "watch:server": "browser-sync init", // 追加
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  // 省略
}

CLIでbrowsersync initを実行します。

$ yarn watch:server

bs-config.jsを変更します。

bs-config.js
module.exports = {
    // 省略
    "files": "./dist/**/*", // 変更
    // 省略
    "server": {
        "baseDir": "./dist",
        "middleware": function(req, res, next){
            var timestamp = "[" + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') + "] ";
            console.log(timestamp + req.method + " " + req.originalUrl + " - " +  req.connection.remoteAddress + " - " + req.headers['user-agent']);
            next();
        }
    },
    // 省略
};

npm scriptsでコマンドを複数使えるようにするためnpm-run-allを追加します。

$ yarn add -D npm-run-all

webpackでファイルを監視してローカルで確認できるように変更します。

package.json
{
  // 省略
  "scripts": {
    "watch:server": "browser-sync start --config bs-config.js",  // 変更
    "watch:js": "webpack -w",  // 追加
    "start": "run-p watch:*",  // 追加
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  // 省略
}

npm scriptsのstartを実行します。
※まだ正しく表示されません。

$ yarn start

書き出されたindex.htmlをsrcディレクトリに移動して変更します。

/src/index.html
<!DOCTYPE html>
<!-- 省略 -->
  <body>
    <div id="app"></div>
    <script src="/js/bundle.js"></script> <!-- dist を js に変更 -->
  </body>
</html>

ファイルをコピーするパッケージを追加します。

yarn add -D cpx

src内のhtml・画像・フォントファイルをdistへコピーするコマンドを追加します。

package.json
{
  // 省略
  "scripts": {
    "watch:server": "browser-sync start --config bs-config.js",
    "watch:file": "cpx \"./src/**/{*.html,*.jpg,*.png,*.gif,*.svg,*.eot,*.ttf,*.woff,package.json}\" ./dist",
    "watch:js": "webpack -w",
    "start": "run-p watch:*",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  // 省略
}

srcディレクトリのassetsディレクトリ名をimgへ変更します。
/src/App.vueを変更します。

/src/App.vue
<template>
  <div id="app">
    <img src="./img/logo.png"> <!-- assets を img へ変更 -->
<!-- 省略 -->

webpackで画像ファイルのパスを/img、フォントファイルを/fontsとするためwebpack.config.jsを変更します。

webpack.config.js
// 省略
module.exports = {
  // 省略
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/', // /dist/ を / へ変更
    filename: 'js/bundle.js'
  },
  // 省略
  module: {
    rules: [
    // 省略
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: 'img/[name].[ext]?[hash]' // img/ を追記
        }
      },
      { // フォントファイルを使用する場合は以下を追記
        test: /\.(eot|ttf|woff)$/,
        loader: 'file-loader',
        options: {
          name: 'fonts/[name].[ext]?[hash]'
        }
      }
// 省略

以下をcliで実行し、ブラウザでVue.jsのアイコンが表示されたページが開かれれば成功です。

$ yarn start

まとめ

表示するだけならvue-cliで用意されたnpm scriptsのコマンドで問題ないですが、今回は自作でいろいろカスタマイズしていくので、あえてvue-cliで用意されたものは使用していません。
webpackは一から書き始めるといろいろ詰まってしまう場合がarunode,vue-cliで自動的に書き出された綺麗なものを使っています。
「ここは自作」「ここはツールのものを使う」この辺りの判断ができるようになると時間をうまく使えるようになるので、一つずつ理解して使えるものは使って効率的に作業していきましょう。