WindowsのWSLにVue.js環境を構築する

今回はVue.jsの環境構築のお話。
WindowsのWSLでVue.jsを使用したい方に向けた記事です。

windows環境にすでにNode.js環境を構築済みだったためWSLでもすぐにvue.jsを使用できると思っていたのですが...

npm実行時に下記エラーが発生

$ npm -v
/usr/bin/env: ‘bash\r’: No such file or directory

Windows環境にnode.jsを入れていてもWSLではうまく動かなかった。

...ということでWSLでvue.js環境を改めて構築する

nvmのインストール

WSLでNode.jsを扱うには、nvm経由でNode.jsをインストールする必要がある。
そのためのnvmのインストールを行う

以下のコマンドでnvmのインストール

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

nvmがインストールできたら確認。(nvmと返ってくればOK)

$ command -v nvm
nvm

nvmと返ってこない場合は、一度WSLのターミナルを再起動するとうまくいく場合がある

Node.js LTS版のインストール

$ nvm install --lts

Node.jsがインストールできたら確認

$ node -v
v16.14.2

npmのバージョンも確認しておく

$ npm --version
8.5.0

(上記バージョンは環境によって異なります)

vue.jsのインストール

$ npm install -g @vue/cli

Vue.jsがインストールできたら確認

$ vue -V
@vue/cli 5.0.4

(上記バージョンは環境によって異なります)

vue.jsのプロジェクト作成

下記のコマンドでvueのテンプレート一式を作成する

$ vue create testproject

テストプロジェクトなので、すべてエンターキーでインストールを進めて構いません

インストールが完了したらvueを起動させます

$ cd testproject
$ npm run serve

起動したらlocalhost:8080へアクセスすると以下の画面が表示されます。

環境構築は以上。
WindowsのWSL上にもvue.jsの環境が構築できた。
WSL上ではnvmとnvm経由でのNode.jsのインストールが別途必要になるということがポイント