LoginSignup
22

More than 5 years have passed since last update.

Vue-cli3からのVuetifyを試す

Last updated at Posted at 2019-03-22

はじめに

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/ にアクセスすると無事表示されました。

image.png

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に切り替わりました。
image.png

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

参考

vuetifyjs quick-start

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22