【Vue.js】Vue CLI 2.5から3.0へのバージョンアップ

Vue.jsの習得がてら作成した個人事業主向けの各種税金・保険料の計算シミュレーションのVue ClIを2.5から3.0へバージョンアップした際の手順です。

参考ページ: https://cli.vuejs.org/guide/installation.html

スポンサーリンク

方針

webpackのバージョンも3→4へ上がるので、どうも2系で作成したプロジェクトをそのまま上げることはできないようです。そのため、いったん「Vue CLI 3」で作成したプロジェクトに2.5のソースを持ってくる形でバージョンアップします。

環境

ホスト

  • Windows 10
  • VirtualBox + Vagrant

ゲストOS

  • CentOS 7.4
  • Vue.js 2.5.17 → 3.1.3
  • Node.js v8.12.0
  • webpack 3 → 4.0

Vue CLIのバージョンアップ

旧バージョンの削除

まずは旧バージョンを削除します。(グローバルインストールしている場合のみ)

$ sudo npm uninstall vue-cli -g

Node.jsのバージョンは、8.9以上が必要(8.11以上推奨)なのでバージョン確認します。

$ node -v
v8.12.0

問題ありません。

Vue CLI 3.0のインストール

パッケージ名が、vue-cliから@vue/cliへ変更となってます。

$ sudo npm install -g @vue/cli

バージョン確認します。

$ vue -V
3.1.3

2018/11/26時点では、「3.1.3」がインストールされました。

プロジェクト作成

それでは、Vue CLI 3用のプロジェクトを作成します。
プロジェクト名： calc-tax-insurance-v3

$ vue cerate calc-tax-insurance-v3

ここから対話形式でプロジェクトの設定を行います。

プリセットの選択

プロジェクトであらかじめ使用するライブラリとかを、対話形式で導入設定するみたいです。

Vue CLI v3.1.3
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

とりあえず、Manually select featuresを選択してみます。

Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

なるほど、使用するライブラリやテストツールの選択ですね。Routerはvue-routerかな。
今回移行するプロジェクトはvue-router未使用なので、以下のように選択しました。
※ おそらく後からでもインストールできるはず。

Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◯ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
❯◉ Unit Testing
 ◯ E2E Testing

※ あとでE2E Testing入れ忘れたのに気づきました。。まぁ、後から入れればいいかな。

CSSプリプロセッサーの選択

次に進むとcssのプリプロセッサーの選択画面になります。(CSS Pre-processors選択したので)
Sass/SCSSを選択。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS
  Less
  Stylus

ESLintの設定

ルールはStandard使ってたので同じものを選択。

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
❯ ESLint + Standard config
  ESLint + Prettier

Lintをどのタイミングで実行するかの選択です。commitてどのタイミングだろう。。（Gitのコミットかな？？）
よくわからないので、いったん両方にしてみます。(「a」キーで両方選択できます)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Unitテストツールの選択

Mocha + Chai でいいかな。（どちらがあってるか選定していないのであとで比べてみよう）

? Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
  Jest

Babel、PostCSS、ESLint等の設定をどこでするかの選択

configファイルで個別に管理するか、package.jsonに一か所でまとめるかの選択かな。
とりあえず、どのような構成になるか見てみたいので別々にしてみます。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

選択内容をデフォルトのプリセットにするかの選択

対話形式で回答してった内容を次のプロジェクトでのデフォルトにするかの選択です。とりあえずNoかな。。

Vue CLI v3.1.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

ここまでくるとインストールが始まります。結構時間かかりますのでコーヒーでも飲みながら待ちましょう。
インストールが完了すると以下のようなメッセージが表示されます。

Binary found at /workspace/calc-tax-insurance-v3/node_modules/node-sass/vendor/linux-x64-57/binding.node
Testing binary
Binary is fine
added 198 packages from 130 contributors, updated 3 packages, moved 5 packages and audited 19627 packages in 98.399s
found 0 vulnerabilities

⚓  Running completion hooks…

📄  Generating README.md…

🎉  Successfully created project calc-tax-insurance-v3.
👉  Get started with the following commands:

 $ cd calc-tax-insurance-v3
 $ npm run serve

ディレクトリ構造

どのようなディレクトリ構造になったか確認します。

cd calc-tax-insurance-v3
$ tree -L 2 -I node_modules
.
├── babel.config.js
├── package.json
├── package-lock.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── img
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.js
│   ├── registerServiceWorker.js
│   └── store.js
└── tests
    └── unit

ぱっと見ですが、configディレクトリが無くなったくらいですかね～、旧パージョンとの違いは。これがどのように影響するのか気になるところではありますが。

動作確認

まずは素の状態で動作確認します。コマンド「npm run dev」ではなくなってますね。

npm run serve
  App running at:
  – Local:   http://localhost:8080/
  – Network: http://10.0.2.15:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

ん？ デフォルトでlocalhostだけでなくIPアドレスで接続できるようにサーバーが起動するみたいだけど、IPがVirtualBoxのアダプターのIPにマッピングされてしまいました。
変更しないと繋がらないので調整します。

プロジェクトディレクトリ直下に以下設定ファイルを追加します。※ デフォルトでファイルは作成されていませんでした。
vue.config.js

module.exports = {
  devServer: {
    host: '192.168.33.10',
    port: '8080'
  }
}

再起動

App running at:
  – Local:   http://192.168.33.10:8080/
  – Network: http://192.168.33.10:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

LocalとNetworkが同じIPになりましたが、Localは使うことがないはずなのでいいか。。

ブラウザで「http://192.168.33.10:8080/」にアクセスします。

vue-cli3-hello-world

OK!

プログラムの移行

ここからが本番です。以下手順で既存プログラムを移行します。

  1. package.jsonに手動で追加したパッケージを移行
  2. npm install
  3. src以下はApp.vue以外はそのままコピー
  4. App.vueはvueインスタンス生成している箇所が少し違ったので、その部分は残しつつ移行
  5. public/index.htmlを移行
    ※ 私の場合、App.vueとstore.jsはそのまま上書きで問題ありませんでした

動作確認してみます。

各種税金・保険料計算シミュレーションvue-cli3

動きました！

ただターミナル上でめっちゃESLintのエラーがでているので、ESLintの設定も移行しました。

ここまでで、buildもエラー無く通るようになりました。

npm run build

 DONE  Compiled successfully in 4746ms
  File                                      Size             Gzipped

  dist/js/chunk-vendors.ecf2bb48.js         101.93 kb        35.59 kb
  dist/js/app.17c76d54.js                   58.03 kb         13.08 kb
  dist/service-worker.js                    0.96 kb          0.54 kb
  dist/precache-manifest.507ee046e433610    0.45 kb          0.24 kb
  952bd29b37bb58f3e.js
  dist/css/app.94e82425.css                 2.33 kb          0.84 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

以上です。
vue-routeとか使ってなかったのでそこまで苦労しませんでした。まぁ、あまり凝ったことやってないのもあるのかなぁ。
vue-cli3系の新機能やvue uiとかも、おいおい使ってみようと思います。

プログラミング,vue.jsvue.js,vagrant

Posted by kawadev