【Vue】Vuetify.jsにコントリビュートするための準備

Vuetify.jsにコントリビュートしてみたい！という方に開発環境の構築を本記事でまとめました。

コードをcloneする

git clone https://github.com/vuetifyjs/vuetify.git

以降のコマンドはすべてcloneで取得したvuetifyディレクト配下で実行しています。

yarnコマンドを使用できるよう準備

• npmからyarnをインストールする

npm install -g yarn

パッケージをインストールする

yarn

ビルドの実行

yarn build

node-gypがグローバルなNode環境に入っていない場合はビルドに失敗します。 その場合は、npm install -g node-gypの実行後に改めてビルドしてください。

開発サーバの起動

• 起動する前に、packages/vuetify/dev/Playgroud.vue を以下に書き換える

packages/vuetify/dev/Playgroud.vue

<template>
  <v-container>
    <p>ただいま開発環境の動作確認中</p>
  </v-container>
</template>

<script>
  export default {
    data: () => ({
    //
    }),
  }
</script>

• 開発サーバを起動する

yarn dev

• ブラウザから http://localhost:8080/#/page1 にアクセス

Playgroud.vueの内容がブラウザから確認できれば、vuetify.jsの開発環境構築は完了です。

issueで上がっているバグを再現する際は、Playground.vueにコピペすると大抵は再現確認できるので、改修作業を行う際はPlaygroud.vueを利用しましょう。👍

PRを出す際は、既にMergeされているPRを参考に作成すると、レビューを見てもらいやすくなります。報告内容をFixes:xxxだけにしないで、修正前後の挙動の違いについても記載すると良さそうです。

参考記事：https://vuetifyjs.com/en/getting-started/contributing/#working-with-github