More than 5 years have passed since last update.

実家でコーディングがしたかったので、Vue.jsの開発環境を構築してみた。

Posted at 2019-11-22

実家のWindows環境でVue.jsのコーディングをするための環境を用意しました。
開発って何それ？って感じの普通の家なので、Gitあたりからインストールしないといけない。。

あたりをインストールするとこまでやりました。

1. VSCodeのインストール

公式からダウンロードしてインストールしました。

プラグインはいったん以下をインストール(バージョンは登録時点でのものです)。

WindowsはGit for WindowsでGitをインストールするようです(詳しく知らない...)。

WindowsでGitを扱うときは改行コードに気を付けないといけないので、この記事を参考にしてインストールしました。
ググったらProgateとかはCheckout Windows-styleでしたが、古いんですかね？知っている方いたら教えてください。

とりあえず以下を選択しておきました。

$ git --version
git version 2.24.0.windows.2

ついでにユーザ情報を登録しましょう。

$ git config --global user.name trajanme
$ git config --global user.email sample@example.com

大文字小文字の違いを無視せず、ログで日本語が正しく表示できるようにしておきます。

$ git config --global core.ignorecase false
$ git config --global core.quotepath false

パッケージ管理マネージャはyarn使ってるんですが、Node.js 4.0以上が必要なようなので、インストール。

Windowsだとnode.jsの管理ツールはnodebrewじゃなくて、nodistというのが一般的なようです。

公式のNodistSetup-v0.9.1.exeを押してダウンロードします。

$ nodist -v
0.9.1

$ node -v
v11.13.0

node.jsがインストールできました。

Vue-CLIをインストールするためのパッケージ管理マネージャとしてyarnをインストールします。

npmでいいや、って人は、飛ばしてnpm installしてください。

yarnは公式からインストールできます。

$ yarn -v
1.19.1

ようやくvue-cliをインストールするとこまできました。。

$ yarn global add @vue/cli

インストール後にvueが認識されなかったので、環境変数を追加しました。
(Git Bashを再起動してもうまくいかないなら、環境変数の可能性大)
追加すべき環境変数は、以下で調べることができます。

$ yarn global bin

環境変数に追加したら、Git Bashを再起動しましょう。

$ vue --version
@vue/cli 4.0.5

無事インストールできました。

vue uiを使うと、ブラウザで簡単にプロジェクトを作成できる。

$ vue ui

ブラウザで新規を選択すると、プロジェクト情報を入力するように言われます。

プロジェクトフォルダやパッケージマネージャを選択します。

プリセットはデフォルトで。

プロジェクトを作成したら、タスクからserveを選択して、「タスクの実行」を押下します。

http://localhost:8080/にアクセスすれば、サービスがデプロイされたことを確認できます。

ちなみに、Visual Studio Code でプロジェクトフォルダを開けば、ソースを修正することができるようになっていることも確認できます。

最後に、GitHubへpushするとこまでやります。

VS CodeでCtrl+Shift+Pを押してからTerminalと入力すれば、VS Codeにターミナルが出現します。

$ git remote add origin <githubのリポジトリURL>
$ git push -u origin master

SSHの秘密鍵とか用意しなきゃかなーと思ってたら、GitHubのログイン画面が出てきて、そのままpushできました。便利や。。

今回、iPad Proだとガッツリソースを修正するのやっぱり面倒だな、、と思い、Windowsでの環境構築をしてみたのですが、案外開発はできそうな感じですね。

何かアドバイスや、こうした方がいいなどあれば、ご教示ください。