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

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


## 目次

* 表示編 ←イマココ
* [ルーター編](https://qiita.com/buchiya4th/items/f154191c8157bbd2239a)
* [コンポーネント編](https://qiita.com/buchiya4th/items/d5a62722f1fc26230df0)
* [CSS編](https://qiita.com/buchiya4th/items/6f5db9f58ee66982438e)
* [JS編](https://qiita.com/buchiya4th/items/3f3b9c6e48866e6d9d27)
* [ライブラリ編](https://qiita.com/buchiya4th/items/b4814c0018f9311af461)
* [メタ編](https://qiita.com/buchiya4th/items/dd8f16dfcd296bd247bb)
* [ビルド編](https://qiita.com/buchiya4th/items/71649f8fbd2f72b9e6e7)


## 前提

* タスクは`npm scripts`で一限管理
* コマンドは`yarn`を使用
* `vue-cli`の`webpack-simple`を使用


## バージョン

* "vue": "^2.5.11"
* "webpack": "^3.6.0"


## 手順

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

vue-cliを追加します。

```bash
$ yarn add -D vue-cli
```

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

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

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

```bash
$ yarn
```

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

browser-syncを追加します。

```bash
$ yarn add -D browser-sync
```

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

```js: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`を実行します。

```bash
$ yarn watch:server
```

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

```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を追加します。

```bash
$ yarn add -D npm-run-all
```

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

```js: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`を実行します。
※まだ正しく表示されません。

```bash
$ yarn start
```

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

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

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

```bash
yarn add -D cpx
```

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

```js: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を変更します。

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

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

```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のアイコンが表示されたページが開かれれば成功です。

```bash
$ yarn start
```

## まとめ

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