Vue 2.6 を 2.7 にしてみた

そろそろcomposition apiを試したく、心はreactだけどvue projectたくさんあるので、勉強してみる

なぜ vue 3 ではなく 2.7 なのか

2.7からcomposition apiがplugin不要で使えるようになったらしい
vue3でvue2コードを動かすにはcompatというpluginが必要
それもけっこう設定があってめんどい、怖いので、いったん2.7の方が安全じゃない的な想像
あと、できれば2.7でcode freezeして、機能追加するときにはreactに移行してやりたい。。

upgrade手順

まず、古いprojectの例として昔vuexの勉強をしたこれを使う
https://github.com/kujiy/vuex-study/tree/master/src

これは vue-cli-service で作ったほぼ巣のproject。
vue は 2.6.11 だった。この頃作ったprojectがたくさんあるのでちょうどいい。

package.json

    "vue": "2.6.11",

まず起動しない。。

vue-cli-serviceがなくて起動しなかった。

まず node.js のversionをできるだけ新しくする。

nvm use stable

nodeってバージョン上げてもなかなか問題でなくて、好印象

まずpackage.jsonに沿ってpackagesを入れる

yarn

なぜか vue-cli-serviceが使えないので手動でも打つ

yarn add @vue/cli

で、コマンドが使えるようになった

vue-cli-service

vue を 2.7 にする

ここで v2-latest のバージョンを選ぶ。
https://www.npmjs.com/package/vue?activeTab=versions

yarn add vue@2.7.14

これでpackage.jsonも書き換わった。

起動すると version mismatch エラー。vue-template-compiler もupgradeする。

yarn add vue-template-compiler@2.7.14

これだけで起動した。

vue-cli-service serve
# or
yarn serve

Options API を Composition API にする

そもそも vue には Extends API というものがあって、こう書くらしいんだが

<script lang="ts">
import Vue from "vue";
 
export default Vue.extend({
});
</script>

In addition to the answers provided, there is a practical use case for calling Vue.extend() directly if you are using TypeScript.

TS 使ってると extends api を使うみたいだ。なるほど。これ js だからな。いろんな書き方があってマジわけわかめ。

僕のファイルはそうなってない。

    export default {
        name: 'HelloWorld',
        computed: {

これは Options API と言うらしい。

で、こんな感じにすれば composition apiになる

import { ref, reactive } from "vue";
export default {
  setup() {
    const countRef = ref(1);
   
    return {
      countRef,
    };
  },
};

最後に全部returnするあたりが今やってるreact projectぽくて好印象。

あとは一通り、このサイトのを実施して、data, method, computed, emit あたりを学びました。
ほとんどそのまま使えそう。

うし、なんか行けそうな気がしてきた！

ref
https://tech.noricgeographic.com/vue-cli-vue%E6%9C%AC%E4%BD%93%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%A2%E3%83%83%E3%83%97%E3%82%92%E3%81%99%E3%82%8B/
https://www.asobou.co.jp/blog/web/composition-api1
https://kobatech-blog.com/vue-composition-api/