Vuetifyの使い方：Vueプロジェクトへのインストール手順

課題を持った人

VuetifyというVue.jsで使える、マテリアルデザインのフレームワークの存在を知りました。導入方法を教えてください。

筆者

わかりました！Vueプロジェクト作成〜Vuetify導入までの手順を解説します。VueプロジェクトにVuetifyをインストールして、マテリアルデザインのWebアプリの雛形を作っていきましょう。

当記事は以下の環境で確認しました。

・Windows 7 (x64)、Ubuntu 18.04.2
・Node.js v10.15.3
・npm v6.4.1

1 １．Vue CLIでプロジェクトを作成する
2 ２．Vuetifyを導入する

１．Vue CLIでプロジェクトを作成する

Vuetifyを使うために、まずは、Vue CLIを使ってVue.jsの雛形を作成していきましょう。Vue CLIを使うとターミナル上でいくつかの質問に答えていくだけで、素早くVue.jsの雛形を準備することができます。

Node.js(npm)をインストールする

Vue CLIを使うにはNode.js(npm)のインストールが必要です。Node.jsは公式サイトからダウンロードして直接インストールしてもいいのですが、Node Version Manager(nvm)を使うと、プロジェクトに合わせてバージョンを変更することができるので便利です。今後のために、できればnvmの使用をおすすめします。

Node.jsを直接インストールしたい方は公式サイトからダウンロードして、インストーラーを使ってインストールしてください
nvmを使ってNode.jsのバージョン管理をしたい方は、こちらの記事に手順をまとめてあります

Vue CLIをインストールする

Node.jsのインストールが完了してnpmが使えるようになったら、Vue CLIをインストールします。

$ npm i -g @vue/cli

1	$ npm i -g @vue/cli

Vue CLIがインストールされたか、バージョン情報を表示してみましょう。僕の場合はバージョン3.6.3が表示されましたが、インストールした時によって異なります。

$ vue --version
3.6.3

1 2	$ vue --version 3.6.3

Vueプロジェクトの雛形を作成する

vueコマンドを使ってVueプロジェクトの雛形を作成していきます。まずは、Vueプロジェクトを作成するフォルダを作成します。お好きな場所で問題ありません。参考に僕の場合は以下のようにします。cdコマンドでホームディレクトリに移動して、mkdirコマンドでvue-projectフォルダを作成して、cdコマンドでvue-projectフォルダ内に移動しています。

$ cd ~/ && mkdir vue-project && cd $_

1	$ cd ~/ && mkdir vue-project && cd $_

Vueコマンドを実行します。

$ vue create .

1	$ vue create .

質問には以下のように答えます。ここでは、Vueプロジェクトで使用する機能を設定しています。今回は、Babel、Vuex、Linter、Sassを使うようにしました。慣れてきたら用途に応じて選択してみるとよいと思います。

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Vuex, CSS Pre-processors, Linter
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) N

? Please pick a preset: Manually select features

? Check the features needed for your project: Babel, Vuex, CSS Pre-processors, Linter

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)

? Pick a linter / formatter config: Standard

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json

? Save this as a preset for future projects? (y/N) N

しばらくするとインストールが完了します。インストールが完了したら、vueプロジェクトを起動してみましょう。

$ npm run serve

1	$ npm run serve

Vueプロジェクトの雛形を作成することができました。

２．Vuetifyを導入する

つぎに、１で作成したVueプロジェクトの雛形にVuetifyを導入します。

$ vue add vuetify

1	$ vue add vuetify

質問がでてきますので、つぎのように答えます。ここでは、Vuetifyの基本的な設定をしています。慣れてきたらアレンジしてみるといいと思います。

? Choose a preset: Configure (advanced)
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? Yes
? Use custom properties (CSS variables)? Yes
? Select icon font Material Design Icons
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale (Use arrow keys) English

? Choose a preset: Configure (advanced)

? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes

? Use custom theme? Yes

? Use custom properties (CSS variables)? Yes

? Select icon font Material Design Icons

? Use fonts as a dependency (for Electron or offline)? No

? Use a-la-carte components? No

? Use babel/polyfill? Yes

? Select locale (Use arrow keys) English

インストールが完了したら、Vueプロジェクトを起動してみましょう。

$ npm run serve

1	$ npm run serve

画面にVuetifyのロゴが表示されていたらVuetifyのインストールは正常に完了しています。

筆者

VueプロジェクトにVuetifyを導入することができたら、マテリアルデザインのWebアプリを作る準備が整いました。Vuetifyのコンポーネントを使ってWebアプリを作っていきましょう！

１．Vue CLIでプロジェクトを作成する

Node.js(npm)をインストールする

Vue CLIをインストールする

Vueプロジェクトの雛形を作成する

２．Vuetifyを導入する

Vuetifyの使い方：実践の前に覚えておいた方がいいこと