vite + vue3 + vuetify アプリを作成する

vite + vue3 + vuetify アプリを作成する

2024/01/23 00:00:00
Program
Node, Vuetify, Vite

前提 #

vite vs vue-cli #

ue.js の生みの親、 Evan You 氏が作ったビルドツール
開発時は ES モジュールをそのままインポートするため、バンドル処理がなく高速に動作するらしい

アプリ作業エリア生成 #

git-bash で以下を実行

# インストール済み node 確認
$ fnm list
* v8.14.1 default
* system

# インストール可能バージョン検索
$ fnm list-remote
...
v20.11.0 (Iron)
...

# LTS の v20.11.0 をインストール
$ fnm install v20.11.0
Installing Node v20.11.0 (x64)

# とりあえず利用をv20.11.0にしておく
#  - 戻すには $ fnm default を実施すると元の状態に戻るはず(error表示されるが戻る?)
$ fnm use v20.11.0
Using Node v20.11.0
# 使用バージョンを確認しておく
$ node --version
v20.11.0
$ npm --version
10.2.4

# vite を利用してプロジェクトディレクトリを作成する
$ npm create vite@latest
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y)
√ Project name: ... vue3-vuetify-sample
√ Select a framework: » Vue
√ Select a variant: » JavaScript

Scaffolding project in C:\home\developer\work\node-test\vue3-vuetify-sample...

Done. Now run:

  cd vue3-vuetify-sample
  npm install
  npm run dev

$ cd vue3-vuetify-sample
$ echo "20.11.0" > .node-version
$ git init
$ git add .
$ git commit -m "first commit"

$ npm i
...
npm notice
npm notice New minor version of npm available! 10.2.4 -> 10.3.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.3.0
npm notice Run npm install -g npm@10.3.0 to update!
npm notice
# npm 更新通知が表示されたら指示に従って更新しておく
$ npm install -g npm@10.3.0
# 確認
$ npm --version
10.3.0

# 初期アプリが起動するか確認
$ npm run dev
  VITE v5.0.12  ready in 490 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ブラウザで http://localhost:5000/ にアクセスすると以下が表示される

vuetify 導入 #

vuetify インストール

$ npm install vuetify

src/main.js に vuetify を適用するように修正する

$ emacs src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import 'vuetify/styles';  // vuetifyパレットカラーを利用するためにはGlobal CSSの”vuetify/styles”のimportが必要
import { createVuetify } from 'vuetify';

const vuetify = createVuetify();
createApp(App).use(vuetify).mount('#app');

src/App.vue に vuetify の部品を使用するよう修正する

$ emacs src/App.vue

<script setup>
import { VBtn } from 'vuetify/components/VBtn'
import { VChip } from 'vuetify/components/VChip'
</script>

<template>
  <v-btn>Button</v-btn>
  <v-chip>Chip</v-chip>
</template>

<style scoped>
</style>

実行し確認する

$ npm run dev
  VITE v5.0.12  ready in 490 ms
  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
$ git add .
$ git commit -m "add vuetify"

ブラウザで http://localhost:5000/ にアクセスすると以下が表示される

vuetify コンポーネントを自動importできるようにする #

使用するコンポーネントを以下のようにいちいちimportするのは面倒。
vite-plugin-vuetify で対応できるのでインストールと設定を行う。

import { VBtn } from 'vuetify/components/VBtn'
import { VChip } from 'vuetify/components/VChip'

vite-plugin-vuetify をインストール

$ npm install -D vite-plugin-vuetify

vite.config.js に vuetify コンポーネントを自動importする設定を追記する
ついでに 5000 ポートで起動するように設定しておく

$ emacs vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vuetify()],
  server: {  // ついでに 5000 ポートで起動するように設定しておく
    port: 5000,
    strictPort: true
  }
});

src/App.vue に vuetify コンポーネントのimportを削除する

$ emacs src/App.vue

<script setup>
</script>

<template>
  <v-btn>Button</v-btn>
  <v-chip>Chip</v-chip>
</template>

<style scoped>
</style>

実行し確認する

$ npm run dev
  VITE v5.0.12  ready in 744 ms
  ➜  Local:   http://localhost:5000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
$ git add .
$ git commit -m "add vite-plugin-vuetify"

ブラウザで http://localhost:5000/ にアクセスすると以下が表示される

参考URL #