📖

Vue CLI から Vite へ移行した時の記録

2022/10/20に公開

TypeScript

Vue.js

Vite

tech

はじめに

後輩に言われて気付いたのですが、いつの間にか Vue CLI がメンテナンスモードになっていました。

https://cli.vuejs.org/

今後は新しい方法でプロジェクトを作ってくれとの事で、公式サイトを見てみると今後は vite が使用されるとの事。

移行は基本的にスムーズでしたが、少し注意点もあったので記録として残しておきます。

2023.8.17 追記
@volar/vue-language-plugin-pug が @vue/language-plugin-pug リネームされたので、記事内の記述も更新しました。

プロジェクトを作る

まずは公式にある通りにプロジェクトを作ります。

npm create vue@latest

色々と聞かれるので、必要な情報を入れていきます。

Vue.js - The Progressive JavaScript Framework

√ Project name: ... test
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for both Unit and End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes

pug と stylus を使えるようにする

以前は pug を使うために pug-plain-loader のインストールも必要でしたが、pug だけで良くなりました。
また、以前は stylus はプロジェクトを作る時にインストールできましたが、今後は手動で入れる必要があるようです。と言っても、stylus を追加するだけです。

VSCode で Volar を入れていると「pug を使用するプロジェクトでは @vue/language-plugin-pug をインストールして適切な設定をするように」とメッセージが出てくるので、従います。

yarn add --dev pug stylus @vue/language-plugin-pug

tsconfig.json に以下の設定を追加します。

{
  ...
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
  ...
}

vue-tsc を最新にする

これも Volar がメッセージを出してくるので、既にインストールされている vue-tsc を最新にします。

yarn add --dev vue-tsc@latest

.eslintrc.cjs を編集する

<template lang="pug"> を使用する場合は、以下のように overrides を追加しないと lint の warning が出ます。

module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-essential",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "@vue/eslint-config-prettier",
  ],
  parserOptions: {
    ecmaVersion: "latest",
  },
  overrides: [ // 追加
    {
      files: ["*.vue"],
      rules: {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "off",
      },
    },
  ],
};

Vue CLI の時の記事ですが、詳しくは以下で。

stylus のエイリアスは使えない

残念ながら、stylus のエイリアスはサポートされていないようです。

現状では、既存プロジェクトから移行する時は、stylus コード内で

@import "~@/style.styl"

とかやっている部分を全て相対パスに書き換えていく必要がありそうです…

おわりに

Vite 爆速ですね🚀

追記

interface や type をインポートする時は、必ず import type を使用する必要があるようです。

// import { Test } from "./test";  // 😖
import type { Test } from "./test" ; // 😘

VueCLI を使用して作ったプロジェクトでは普通にインポートしても warning は出るもののビルドは出来て表示もされていましたが、今後は実行時エラーになってしまうようです。

Uncaught SyntaxError: The requested module '/src/test.ts' does not provide an export named 'Test' (at App.vue:4:10)