🤖

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

2022/06/13に公開約2,300字

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

実行環境

@vue/cli: 5.0.4
vue: 2.6.14

始め方


https://cli.vuejs.org/guide/installation.html
公式サイトを参考にしながら
プロジェクトを作成していきます。

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(コード整形ツール)

必要に応じでワークスペースを設定する

https://zenn.dev/one_dock/articles/b151b113515945

Discussion

ログインするとコメントできます