l12a

白ウサギを追え

Vue 3.0 (vue-next) ベータ版 導入からビルドまで

メジャーアップデートである Vue 3.0 のベータバージョンが vue-next として公開されているので触っていきます。

github.com

本記事では Vue-CLI を使ってプロジェクトの立ち上げから、ベータバージョンの導入と、それをエラーなくビルドできるようにするところまでを扱います。
Composition API 等の新機能への書き換えなどは行いません。

ベータバージョンであるため、タイミングによっては本記事の内容が正しくない可能性が多分にあります。
そのことを念頭におき、最新の状況はご自身の目で調べてください。

環境の用意

まず以下の通りに開発環境を用意しました。

$ node -v
v14.0.0
$ npm -v
6.14.4
$ vue -V
@vue/cli 4.4.1

プロジェクト作成

Vue-CLI を使ってプロジェクトを作成し、起動確認までを行います。

プロジェクト作成

任意の名前で、プロジェクトを作成します。

$ vue create myapp

プリセットはマニュアルを選択し、僕がよく使う構成でセットアップしました。

Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

起動確認

ディレクトリを移動してアプリケーションを起動し、ブラウザでアクセスして起動を確認します。

$ cd myapp
$ npm run serve

確認できたら終了しておきます。

vue-next 導入

続いて、vue-next を導入します。

$ cd myapp
$ vue add vue-next
 WARN  There are uncommited changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? (y/N) 

インストール前に現在までの状態をコミットしておくよう勧められます。
そのままインストールを実行しても構いませんが、いくつかのソースコードは自動的に書き換えられます。

必要に応じて、あらかじめコミットしてください。

この状態でもう一度アプリケーションを起動すると、複数のエラーが表示されますので、次節からこれを修正していきます。

vue-next のための調整

TypeScript のバージョン変更

TypeScript のバージョンを 3.9 から 3.8 に変更します。
これは 3.9 への対応がなされるまでの間の限定的な回避方法です。

問題への対応は PR があがっています。

myapp/package.json

- "typescript": "~3.9.3",
+ "typescript": "~3.8.3",

package.json を変更したら、npm run install を実行して取得しなおしてください。

型定義ファイル変更

以下の通り型定義ファイルを変更します。

myapp/src/shims-vue.d.ts

 declare module '*.vue' {
-  import Vue from 'vue'
-  export default Vue
+  import { ComponentOptions } from 'vue'
+  const component: ComponentOptions
+  export default component
 }

また、myapp/src/shims-tsx.d.ts は削除します。
ここまでで調整は終わりです。次節でソースコードを修正します。

ソースコードの修正

本記事ではプロジェクトの作成から実施したため、サンプルのアプリケーションコードが含まれている状態です。
一部にエラーが起きているので必要な箇所を修正します。
vue-next の導入時に自動的に書き換えられた部分は予めコミットしておき、手作業で改変した部分のみ紹介します。

router 修正

vue-router-next のリポジトリを参考にして修正します。

github.com

Typings の節に

To make typings more consistent and expressive, some types have been renamed. Keep in mind these can change until stable release to ensure consistency. Some type properties might have changed as well.

とあります。

myapp/src/router/index.ts

-import { RouteConfig, createRouter, createWebHistory } from 'vue-router'
+import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 import Home from '../views/Home.vue'
 
-const routes: Array<RouteConfig> = [
+const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',

store 修正

vuex のリポジトリを参考にして修正します。

github.com

Breaking changes の節に

Installation process has changed

To align with the new Vue 3 initialization process, the installation process of Vuex has changed.

To create a new store instance, users are now encouraged to use the newly introduced createStore function.

とあります。

myapp/src/store/index.ts

-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
-export default Vuex.createStore({
+export default createStore({
   state: {
   },
   mutations: {

テストコード(Jest) 修正

vue-test-utils-next のリポジトリを参考にして修正します。

github.com

propsData ✅ now called props

プロパティ名が変わっています。

describe('HelloWorld.vue', () => {
   it('renders props.msg when passed', () => {
     const msg = 'new message'
     const wrapper = shallowMount(HelloWorld, {
-      propsData: { msg }
+      props: { msg }
     })
     expect(wrapper.text()).toMatch(msg)
   })

コンポーネント修正

最後にコンポーネントの定義方法を修正します。

 <script lang="ts">
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
-export default Vue.extend({
+export default defineComponent({
   name: 'HelloWorld',
   props: {
     msg: String

ここまでの修正で、エラーや警告が消えて、サンプルアプリケーションを起動できるようになりました。

おわり

次からは Vue 3.0 で使えるようになる先進機能を試していきたいと思います。

lnly.hatenablog.com