More than 5 years have passed since last update.

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

Last updated at 2018-09-12Posted at 2018-03-12

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

やりたいこと

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

必要なものをインストールする。

ざっと、必要なものは以下のとおりです。

"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

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

<!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

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ディレクトリで以下のコマンドを実行すればサーバが起動します。

./node_modules/.bin/webpack-dev-server --hot --inline

hot-reloadが不要な場合は、引数はつけなくてもいいです。

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

package.json

{
  "scripts": {
    "start": "webpack-dev-server --hot --inline"
  }
}

その後以下のコマンドでサーバが起動できます。

npm run start

アクセスしてみる

webpack-dev-serverが起動したらhttp://localhost:8080 にアクセスします。
以下のような画面が出ていれば構築は完了です。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up