【Vue】Vue3が標準の時代にVue2アプリを構築する手順の備忘録

概要

ネット記事のほとんどが Vue3 前提の情報ばかりになってしまったが、
Vue3 に未対応の一部のライブラリやプラグインを利用する等の理由で、Vue2 のアプリ構築方法を探している人のための構築手順の備忘録。

更に、ライブラリ対応の一例として v2 の Vuetify を導入する。

Vue CLI は現在メンテナンスモードになっており、通常のVueアプリ構築では利用非推奨となっていることに注意する。

前提

• Vue： v2.6.14
• Vue CLI： v5.0.8
• Vuetify： v2.6.13
• TypeScript は使用しない

Vue2 アプリ構築手順

Vue CLI をグローバルインストールする

npm install -g @vue/cli

Vue CLIで Vue2 のプロジェクトを作成する

# プロジェクト生成（今回は「vue2-demo」という名前で作った）
vue create vue2-demo

以降、以下のように質問形式でVueバージョンなどを答える

#  Vueのバージョンを選択（v2 を選択）
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
❯ Default ([Vue 2] babel, eslint) 
  Manually select features 

# yarn と npm どちらのパッケージマネージャを利用するか（npm を選択）
? Pick the package manager to use when installing dependencies: 
  Use Yarn 
❯ Use NPM 


# 以降、自動で処理が進む...
✨  Creating project in /Users/tommy/github/test/vue2-demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...

added 86 packages, and audited 935 packages in 5s

102 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
⚓  Running completion hooks...

📄  Generating README.md...

# ここまで表示されたらプロジェクト生成完了！！
🎉  Successfully created project vue2-demo.
👉  Get started with the following commands:

 $ cd vue2-demo
 $ npm run serve

動作確認

ローカルサーバ起動

npm run serve

localhost:8080 にアクセスして以下の画面が出ればOK

Vuetify v2を導入してみる

Vuetify v2 のコンポーネントはまだ v3 に完全移行できておらず、v2でしか利用できないコンポーネントがある場合は、Vue2 のプロジェクトに Vuetify v2 を追加しなければいけない。

以下のコマンドを実行して Vuetify をアプリに追加する

vue add vuetify

以降、質問形式でバージョンを答える

# コマンド実行後
📦  Installing vue-cli-plugin-vuetify...


added 8 packages, and audited 943 packages in 2m

103 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔  Successfully installed plugin: vue-cli-plugin-vuetify

# プリセットを選択（デフォルトで選択されている推奨設定で OK）
? Choose a preset: (Use arrow keys)
  Vuetify 2 - Configure Vue CLI (advanced) 
❯ Vuetify 2 - Vue CLI (recommended) 
  Vuetify 2 - Prototype (rapid development) 
  Vuetify 3 - Vite (preview) 
  Vuetify 3 - Vue CLI (preview) 

# 下記の表示が出たら追加完了
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

動作確認

ローカルサーバ起動

npm run serve

localhost:8080 にアクセスして以下の画面が出ればOK

同じ画面にアクセスしているが、見た目が Vuetify 追加によって少し変化している。
あとは、公式ドキュメントをみながらコンポーネントを追加利用するなどできる。