Help us understand the problem. What is going on with this article?

Vue1.0からVue2.0でハマったこととか

More than 3 years have passed since last update.

vue1.0からvue2.0の移行は結構大変なのでメモっておきます。絶賛移行中なので随時更新していく予定です。
ここではプラグインもvueに含まれることとします。

webpackに調整が必要

module.exports内に以下の記述が必要。

webpack.config.js
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },

処理が、 standalone build と runtime-only build に分離されているようで上記設定が必要。
参考:http://bouzuya.hatenablog.com/entry/2016/09/23/235959

ライフサイクルの変更

image

readyしかほぼ使ってなかったのでmountに差し替えるだけで良かったのですが、色々使ってたらつらそう。
beforeUpDateとupdatedが2で追加。

{{{html}}}が動かない

v-htmlのみになったので差し替える必要があります。
WYSIWYGエディタとかMarkdownを使っている場合差し替えが必要です。

vue-routerの挙動とか

vue-routerは1の挙動だとrouteオブジェクト内のactiveやdeactive、readyなどでうまいことやる仕組みだったのですが、大幅に変更されています。
ここが結構書き換えのつらいポイントだと思います。

ルート単位ガードとコンポーネント内ガード

ルート単位での処理が追加されました。これによりURLに応じた処理が可能になります。
コンポーネント内ガードは今までと同じようにコンポーネント内に処理を書きますが、route内に生やすようなものではなくなっています。

1
export default {
  route: {
    activate: function(transition) {
      // 処理
      transition.next();
    }
  }

2
export default {
  beforeRouteEnter (route, redirect, next) {
   //処理
   next();
  }
}

v-linkも変更されたりしてるのでドキュメントを読みましょう。

http://router.vuejs.org/ja/advanced/navigation-guards.html

vuex@next、vue-resourceは今のところ問題なし。

エイヤっとvue1.0で使ってるやつを色々アップデートしてwebpack2にしたらビルドできなくなったりしたので、webpack→webpack2の仕様変更もチェックしたほうが良いかもしれません。

tanshio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away