■ はじめに

Vuetify - A Material Design Framework for Vue.js
っていうのを触れる機会があったので、メモ。

過去の記事を漁っていたら、以下の関連記事で少しだけ触れていた。。。

https://dk521123.hatenablog.com/entry/2018/05/26/005948

【１】Vuetify とは？

* Vue.js対応のマテリアル デザイン フレームワーク
* MIT License (商用利用可能)

※ マテリアル デザイン フレームワークについては、
　以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/05/26/005948

公式サイト

https://vuetifyjs.com/ja/
テンプレート
https://vuetifyjs.com/ja/resources/themes/

【２】環境設定

１）Node をインストールする

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2018/06/05/211900

２）コマンドで設定を行う

# プロジェクトを作っていない場合は、
# 「補足：新規プロジェクトを立ち上げる場合」を参照。

# インストール
vue add vuetify

補足：新規プロジェクトを立ち上げる場合
https://dk521123.hatenablog.com/entry/2020/12/22/192553

の「２）vue init コマンド / vue create コマンド」より抜粋
~~~~~~~
# 「my-app」ってプロジェクトを新規で立ち上げる
vue create my-app
~~~~~~~
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 2.x <=★2.x系にしないとエラー★
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Pick an E2E testing solution: WebdriverIO
? Pick browsers to run end-to-end test on Chrome
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as:

Vue CLI v4.5.9
・・・略・・・
~~~~~~~

cd my-app

# インストール
vue add vuetify

補足：警告・エラーに関するトラブルシューティング

* 以下の関連記事を参照のこと。

https://dk521123.hatenablog.com/entry/2021/02/08/000000

【３】サンプル

今回は、「Hello.vue」を追加してみる

src/App.vue

<template>
  <v-app>
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'App',

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

src/router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
// ★ここを追加★
import Hello from '../views/Hello.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // ★ここを追加★
  {
    path: '/hello',
    name: 'Hello',
    component: Hello
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

動作確認

[1] 以下のコマンドでローカル環境のサーバ起動
~~~~~
npm run serve
~~~~~

[2] ブラウザで以下のURLにアクセスする

http://localhost:8080/hello

プログラムの超個人的なメモ

Memo for Programming.

【Vue】Vuetify ～入門編～

■ はじめに

目次

【１】Vuetify とは？

公式サイト

【２】環境設定

【３】サンプル

関連記事