2024年6月現在、Vue 3が主流になっていますが、Vuetify 3の変更点を確認するためにVue 2の環境を用意することがあります。新規プロジェクトではVue 2を利用しませんが、Vuetify 3のアップデートに伴う変更点を確認するための環境を構築する方法をまとめました。
以前は、vue-cliがボイラーテンプレートとして利用されていましたが、現在はViteの登場により新規プロジェクトではViteを利用することが一般的です。本記事では、Viteを利用してVue 2とVuetify 2をインストールする手順を紹介します。
環境
- Node.js 20.12.1
- Vue v2.7.16
- Vuetify v2.6.14
Vue v2.7.16 リリースノート
Vuetify v2.6.14 リリースノート
Viteでインストールする
対話式でViteを呼び出します。選択項目で「Vue」を選ぶとVue 3がインストールされるため、「Vanilla」を選択して、後で直接Vue 2をインストールします。
コマンド実行
npm init vite
必要なパッケージをインストールします。
npm install
npm run dev
プロジェクトを作成して、vue2-vuetify2ディレクトリに移動し、npmでインストール・起動します。
cd vue2-vuetify2
npm install
npm run dev
これで、以下のような画面が表示されます。
Vue 2のインストール
起動を止めて、次にVue 2を直接インストールします。バージョンを固定してインストールし、必要なプラグインもインストールします。
npm install vue@2.7.16
npm install -D vite
npm install -D @vitejs/plugin-vue2
vite.config.jsの作成
次に、vite.config.jsを作成し、Vue 2をプラグインから呼び出す設定を行います。
touch vite.config.js
内容を以下のようにします。
// vite.config.js
import vue from '@vitejs/plugin-vue2';
export default {
plugins: [vue()]
};
サンプルソースの書き換え
main.jsのコードをVue用に修正します。
import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: 'Hello World'
},
template: `<div>{{message}}</div>`,
});
Vuetify 2をインストールする
次にVuetifyをインストールします。
npm install vuetify@2.6.14
vite.config.jsの編集
Vuetifyのコンポーネントを呼び出せるようにvite.config.jsを修正します。
npm install path
以下の内容に修正します。
import vue from '@vitejs/plugin-vue2';
import path from 'path';
export default {
plugins: [vue()],
resolve: {
alias: [
{
find: /^@\/(.+)/,
replacement: path.resolve(__dirname, 'src') + '/$1'
}
]
}
};
App.vueファイルの追加
srcフォルダを作成し、App.vueを追加します。表示確認用にVuetifyのコンポーネントを追加します。
<template>
<v-app id="app">
<v-container>
<v-btn color="primary" large>Vuetify 2 Button</v-btn>
</v-container>
</v-app>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
vuetify.jsの追加
src/vuetify.jsを追加し、Vuetifyの設定ファイルを作成します。
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
const opts = {};
export default new Vuetify(opts);
main.jsの修正と移動
main.jsをsrcに移動し、作成したVuetifyの設定ファイルをインポートします。また、App.vueファイルをrenderに追加します。
import Vue from 'vue';
import App from './App.vue';
import vuetify from './vuetify.js';
new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
起動
再度npm run devで起動し、App.vueに追加したVuetifyのコンポーネントが表示されたら完成です。
npm run dev
リポジトリ
今回の作成したリポジトリは以下になります。
参考記事
これでVue 2とVuetify 2の開発環境を構築する手順が完了です。
Discussion