VueのコンポーネントライブラリであるVuetifyですが、ちょっと前に1.0.0がリリースされました。
しかし、npm i vuetifyでインストールできるバージョンはメジャーリリース前の0.17.6となっています。

https://www.npmjs.com/package/vuetify

そこで、現時点(2018/02/02)で最新版を手元で使用する方法を備忘録として残しておきます。

npmでGitHubからインストール(失敗)

npmは以下のコマンドで直接GitHubからインストールすることができます。

npm install {user名}/{repository名}#{ブランチ名}

実際に実行したコマンド

$ npm i -D vuetifyjs/vuetify#dev

結果、Vuetifyのpackage.jsonに書かれている依存で必要なものはインストールされましたが、
ビルドに必要なディレクトリやファイル(/build等)がもってこれませんでした :cry:
image.png

原因や仕組みは調査中。知っている方がいたらコメントください。

別のディレクトリにクローンしてローカルモジュールとして扱う(成功)

ざっくり言うとnpm installでインストールできないなら、直接クローンしてビルドしてローカルモジュールにしてしまえばいいじゃないということです :smirk:

クローンしてビルド

local_modulesというディレクトリを作成して、そこにクローンしました。

$ mkdir local_modules
$ cd local_modules
$ git clone https://github.com/vuetifyjs/vuetify.git
$ cd vuetify

クローンしただけなので当たり前ですが、ビルドに必要なファイルもそろっています。
image.png

package.jsonを参考に必要なものをインストールしてビルドします。

$ npm install
$ npm run build

ビルドが完了するとdistes5というディレクトリが作成されると思います。
これでVuetifyのビルドが完了したので、Vuetifyを使う側でインストールします。

ローカルモジュールのインストール

ローカルモジュールのインストールは通常のモジュールのインストールとほとんど一緒で、モジュールのパスを渡すだけです。

$ npm i -D local_modules/vuetify

するとpackage.jsonには以下のように追加されるはず。

package.json
{
  "devDependencies": {
    "vuetify": "file:local_modules/vuetify",
  }
}

あとはいつも通り開発するだけです :sunglasses:

参考にした記事

http://efcl.info/2014/10/04/npm2-local-module/
https://qiita.com/nyamogera/items/9f40ed2aa2767d351fce
https://qiita.com/DQNEO/items/d166e25449124a3f2b4d

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.