Vue-cli3からのVuetifyを試す

はじめに

VuetifyというVue.jsで使えるマテリアルデザインUIフレームワークを学んでみたいと思い、書き出してみることにしました。といいつつもVue.jsも大して理解していないため、合わせて学びを深めたいと思います。

利用するための準備

node.jsを準備しておきます。私の環境では「v10.15.3」がインストールされています。
windows10でnode.jsのバージョンを切り替えて使う

>node --version
v10.15.3

vue-cli3.x系を使いたいと思いますので、準備をします。
Vue-cliインストール

> npm install -g @vue/cli

または

> yarn global add @vue/cli

すると、いろいろ出力されてインストールが完了するはずです。
ただ、Vue-cli2系がある場合は、先にアンインストールします。（共存する方法は別にありますが、3系で進めるため説明は省きます）

> npm uninstall -g vue-cli

インストールが完了後、バージョンを確認します。無事3.X系がインストールされています。

>vue --version
3.5.1

以上、準備は完了です。

プロジェクトを用意する

createコマンドでプロジェクトを作成します。
実行するとsample1というディレクトリが作成されます。

> vue create sample1

インストールはマニュアルを選択します。とりあえずインストールしたいので、次のものを選択しました。

Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
 (*) Linter / Formatter
>(*) Unit Testing
 ( ) E2E Testing

いろいろ、選択させられるので、次のようにしました。

Vue CLI v3.5.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: default

完了後、ディレクトリ内に移動します。

> cd sample1

ひとまず起動してみる

devモードでの起動を次のコマンドで行います。

> npm run serve

すると次のようにアクセスするべきURLが表示するので、ブラウザでアクセスします。

 DONE  Compiled successfully in 3051ms
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://xxx.xxx.xxx.xxx:8080/

http://localhost:8080/ にアクセスすると無事表示されました。

CTRL+Cでdev起動モードを終了させておきます。

vuetifyのインストール

ここからやっと導入です。

> vue add vuetify

どのモードでインストールする？と聞かれるのでDefaultにしました。

? Choose a preset: Default (recommended)

無事インストール完了です。

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     .gitignore
     README.md
     babel.config.js
     package-lock.json
     package.json
     public/favicon.ico
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/assets/logo.svg
     src/components/HelloWorld.vue
     src/main.js
     src/plugins/vuetify.js

   You should review these changes with git diff and commit them.

起動してみる

先ほどと同じようにdevモードで起動します。

> npm run serve

デザインがvuetifyに切り替わりました。

これで準備が整いました。
次回以降vuetifyの基本を理解していこうと思います。

参考

[vuetifyjs quick-start] (https://vuetifyjs.com/ja/getting-started/quick-start)