Vuetify.jsのsampleが表示できるまで環境を構築する

Vuetify.jsを使ってマテリアルデザインに挑戦してみようと思ったので、環境構築についてのメモです。

# やりたいこと
* 普段からvue-cliは使っていないので、今回も使いません。
* webpackで一つのJavaScriptファイルにまとめてしまおうと思っています。
* webpack-dev-serverを利用します。
* 単一ファイルコンポーネントにします。
* 公式ドキュメントにあるSampleをコピペして動くところまでやります。

# 必要なものをインストールする。
ざっと、必要なものは以下のとおりです。

```js
"dependencies": {
  "vue": "^2.5.14",
  "vuetify": "^1.0.6"
  "material-design-icons": "^3.0.1",
},
"devDependencies": {
  "@babel/core": "^7.0.0-beta.40",
  "@babel/preset-env": "^7.0.0-beta.40",
  "babel-loader": "^8.0.0-beta.0",
  "css-loader": "^0.28.10",
  "style-loader": "^0.20.3",
  "url-loader": "^1.0.1",
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10",
  "vue-loader": "^14.2.1",
  "vue-template-compiler": "^2.5.14",
  "webpack-dev-server": "^3.1.1"
}
```
babelはいつもの癖でなんとなく入れています。

# 設定する
## ディレクトリ構成
```
vuetify-sample
├　html/
│　└　index.html
├　node_modules/
├　src/
│　├　components/
│　│　└　index.vue
│　└　js/
│　 　└　index.js
├　webpack.config.js
└　package.json
```

## index.vue
以下のURLの単一ファイルコンポーネントをそのままコピペして利用します。
https://github.com/vuetifyjs/vuetifyjs.com/blob/dev/examples/layouts/googleContacts.vue

## index.js
```js:index.js
import Vue from "vue";
import Vuetiry from "vuetify";
import "vuetify/dist/vuetify.min.css";
import "material-design-icons/iconfont/material-icons.css";
import Index from "../components/index.vue";

Vue.use(Vuetiry);
new Vue({
  el: "#app",
  template: "<Index />",
  components: { Index }
});
```

## index.html
```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="assets/index.js" defer></script>
</head>

<body>
    <div id="app"></div>
</body>

</html>
```

## webpack.config.js
```js:webpack.config.js
const path = require("path");
module.exports = {
  mode: "development",
  context: path.resolve(__dirname),
  entry: {
    index: "./src/js/index.js"
  },
  output: {
    path: "/dist",
    publicPath: "/assets/"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      },
      {
        test: /\.vue$/,
        use: ["vue-loader"]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        use: ["url-loader"]
      }
    ]
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js"
    }
  },
  devServer: {
    contentBase: "html",
    port: 8080
  }
};
```
webpack-dev-serverは8080ポートで起動するようにしています。
contentBaseやpublicPathでしばらくハマりました。

# 起動してみる
今回はwebpack-dev-serverをグローバルインストールしていないので、パスを通すか、以下のようにnode_modules配下のコマンドを実行するようにします。
vuetify-sampleディレクトリで以下のコマンドを実行すればサーバが起動します。

```sh
./node_modules/.bin/webpack-dev-server --hot --inline
```
hot-reloadが不要な場合は、引数はつけなくてもいいです。

または、以下のようにpackage.jsonにscriptを追加する方法もあります。

```js:package.json
{
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  }
}
```
その後以下のコマンドでサーバが起動できます。

```sh
npm run start
```

## アクセスしてみる
webpack-dev-serverが起動したらhttp://localhost:8080 にアクセスします。
以下のような画面が出ていれば構築は完了です。
![localhost_8080_ (1).png](https://qiita-image-store.s3.amazonaws.com/0/133607/d1a76f11-853f-a26b-f275-44ba27d9467d.png)