2022年のVue3環境に追いつく

Vue.js 2.x 系+VSCode+Vetur という構成を基本として Web アプリ開発環境を作成していたのですが、 2022年のおすすめ環境から取り残されていることに気付きました。今回はこれらの知識をアップデートするべく、環境を更新することにしました。

Vue3

Vue3 がリリースされてある程度の期間が経過しました。そろそろ触り始めないとまずそうです。Vue3 デフォルトの時代がきたようです。 Vue3 は 2022年の初めのころリリースとなりました。

個人的に大きな変化となったのが、 Vue 2.x 系で使用していた記述方法 「Options API」がどのように変わるかという点でした。Class Style Compoent になるのか Composition API になるのか、標準的になるほうに記述方法を切り替えたいと考えていました。

結果は、 Composition API がデフォルトとして採用されているようなので、こちらの記述方法に変えていくべきと考えています。

Vuex も非推奨へ

状態管理の Vuex も今となっては代替わりするようです。 Pinia という状態管理ライブラリを使うのが推奨されるようです。

プロジェクトの生成

プロジェクトの生成に vue-cli を使って生成していたのですが、今や生成方法が変わってしまったようです。

npm init vue@latest

上記のコマンドの代わりに、 npm init vue@3 でもよいみたいです。

このコマンドを実行して対話形式で設定を答えていくとプロジェクトが生成されます。ここで生成されるものでは、ビルドで Vite が使用されており、ここに時代の変化も感じました。

created by Rinker
¥3,960 (2023/02/04 18:57:54時点 Amazon調べ-詳細)

Visual Studio Code 拡張: Volar

Vue 2.x のころは、 Visual Studio Code (VSCode) 拡張として Vetur を使用していました。便利に使っていて、このままと考えていたのですが、 Vue 3 では使えないようです。今は Volar という拡張機能を使用していくのがよいとのことです。

プロジェクトの設定など

自分が使用するうえで基本のプロジェクト環境セットを次のようにしてみました。何度も環境構築で苦戦するのは避けたいので、今うまくいっている状況、生成の設定などをここに記載します。あとで検索で読み返そうと思っている自分のためでもあります。

プロジェクトの生成

npm init vue@latest

プロジェクトを生成した後は、フォルダを移動して npm install で各種ライブラリをインストールしておきます。

Bootstrap のインストール

Bootstrap を使いたいのでインストールしておきます。

npm install bootstrap bootstrap-vue-3

公式ページを見ると以下のライブラリも推奨インストールの手順にあったのでインストールします。

npm install unplugin-vue-components -D

続いてファイルを編集し、 Bootstrap を使えるようにします。

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'          // 追加
import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'  // 追加

import './assets/main.css'

createApp(App).mount('#app')

vite.config.ts ファイルを編集して、 BootstrapVue に関する設定を記述します。

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import Components from 'unplugin-vue-components/vite'
import { BootstrapVue3Resolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    vueJsx(),
    Components({
      resolvers: [BootstrapVue3Resolver()]
    }) ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

SourceMap の設定

vite.config.ts に build のカテゴリを追加して設定します。上記の設定ファイルでいうところの、 plugins ~ resolve の間に記載するのでよいでしょう。

  build: {
    sourcemap: true,
  },

VSCode からのデバッグ設定

launch.json ファイルは以下のような設定にしました。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "localhost に対して Chrome を起動する",
      "url": "http://localhost:5173",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

これだけではうまくデバッグができなかったので、 Chrome 側には Vue DevTools 拡張機能をインストールしました。その後は VSCode からのデバッグでもうまく動作するようになったようです。

その他

Vue.js の コンポーネントは、 Composition API の書き方であれば、 components ブロックに記載不要で、 import のみで使えるようです。他にも記述のタイプ量が減る方向で書き方が変わっていますし、慣れないうちは苦戦しそうですが乗り越えられると書きやすいと感じるのかなと思っています。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください