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 が使用されており、ここに時代の変化も感じました。
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 のみで使えるようです。他にも記述のタイプ量が減る方向で書き方が変わっていますし、慣れないうちは苦戦しそうですが乗り越えられると書きやすいと感じるのかなと思っています。
コメント