🤖

Vue2 + composition API + Vuetifyで環境構築する

2022/06/13に公開

Vue.js

Vuetify

tech

新しい職場でvue2を使ってwebアプリを開発することになったので、
今更ながらvue2のセットアップ方法を書くことにしました。

実行環境

@vue/cli: 5.0.4
vue: 2.6.14

始め方

公式サイトを参考にしながら
プロジェクトを作成していきます。

1. vue cliをインストール

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

2. プロジェクト作成

$ vue create my-vue2-sandbox

設定項目は以下の通り。（2系を使いたいので、2.xを選択）

3. 一旦動作確認

 $ cd my-vue2-sandbox
 $ npm run serve

以下ページが表示されていれば成功！

package.jsonはこんな感じになっています。

4. composition APIを追加する

composition apiをインストールして、

$ npm install @vue/composition-api

main.jsに追記する。

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import VueCompositionApi from "@vue/composition-api"; // 追加

Vue.use(VueCompositionApi); //追加
Vue.config.productionTip = false;

new Vue({
  router,

  render: function (h) {
    return h(App);
  },
}).$mount("#app");

5. vuetifyを追加する

$ vue add vuetify

今回はvue2で使うため、『Default』を選択

恐らくこんなエラーが出ます。
Component name "Home" should always be multi-word

これは、コンポーネント名は単語をcamelCaseでつなぎ合わせた名前を使うようにするルールのせいです。なので、HomeDefaultなど単語が二つ以上連続してれば問題ないが、HomeやAboutなど単一単語の場合はエラーになります。

単一単語名をつけたいケースも今後出てくると思うので、この設定を無効にします。
eslintにルールを追加します。

.eslintrc.js

  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off" //追加
  },

6. vuetify動確

$ npm run serve

このページが表示されていれば成功です！

最終的なpackage.jsonはこうなっています。

7. 拡張機能をインストール

Vetur (vue2用ツール）
prettier（コード整形ツール）