【Vue+Typescript】セットアップから実行まで

前提条件

• Nodeインストール済

CLIインストール

まずはCLIをインストールします。 Vue用のコマンドランツールで、Reactでいうところのcreate-react-appのようなものです。

yarn global add @vue/cli

インストール後確認

--versionコマンドを実行してインストールされているか確認します。

vue --version

下記のようにバージョンが表示されていればOKです。

@vue/cli 4.5.7

※プロキシ環境下で仕様する場合

HTTP_PROXYなどの環境変数にプロキシ設定を通しておきましょう。

プロジェクト作成

createコマンドでプロジェクトを新規作成します。

vue create ts_vue_app

下記のようにv2系を使うかv3系を使うかを聞かれます。 先にオプションで使用する機能を選びたいので、ここではどちらも選ばずに、[Manually select features] を選びます。

すると使用する機能を聞かれるので、TypescriptとRouterを選びましょう。

改めてv2系かv3系かを聞かれます。 v3系を選びましょう。

class-styleを使うかを聞かれます。 使用するのでyと入力しましょう。 ※以降もいろいろ聞かれますが、全てデフォルトにしました。

続けてyarnかnpmのどちらを使うかを聞かれます。 こちらはyarnを選択します。

しばらく待つとプロジェクトが作成されます。 VSCodeで開いてみます。 また、yarn installでモジュール一式をインストールしましょう。

cd ts_vue_app && code ./

VSCode拡張

Vue開発におけるオススメの拡張機能は以下の通りです。

Vetur

シンタックスハイライトやスニペット等、Vueにおける開発に必要な機能が一式揃っています。 カスタマイズも効きやすいので、以下の公式ドキュメントを一読することをオススメします。

• Vetur

インストールは下記コマンドで行います。

code --install-extension octref.vetur

プロジェクト実行

次に、作成したプロジェクトを動かします。 まずはモジュール一式をインストールしましょう。

yarn install

それでは早速実行してみましょう。 実行はyarn serveで行います。

yarn serve

成功した場合はlocalhost:8080で下記画面が表示されます。

src/componentsやsrc/views以下のファイルが描画に関わるファイルなのでこれらを変更してみましょう。 Reactと同じようにホットリロードがかかるので、変更内容が即時反映されます。

まとめ

今回はVue+Typescriptの環境構築手順と、オススメのVSCode拡張についてご紹介しました。

Reactに慣れた方だと特に.vueファイルの記法が取っつきにくいように感じるかもしれません。 細かい記法や、ライブラリの紹介についてはまた後の機会としたいと思います。

SNSでシェアする

タグ

• vue
• typescript
• javascript
• vscode
• 環境構築
• セットアップ