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

6555 ワード
vue-cli Vue.js Windows VSCode Git Windows テキストリンク

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

  • Visual Studio Code
  • Git for Windows
  • nodist
  • Yarn
  • vue-cli

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

1. VSCodeのインストール

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

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

  • Japanese Language Pack for VS Code 1.40.2
  • Material Theme 30.0.0
  • Material Icon Theme 3.9.1
  • Git History 0.4.6
  • ESLint 1.9.1
  • Vetur 0.22.6
  • Vue Peek 1.0.2
  • Debugger for Chrome 4.12.1

2. Gitのインストール

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

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

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

  • Use Visual Studio Code as Git's default editor
  • Git from the command line and also from 3rd-party software
  • Use the OpenSSL library
  • Checkout as-is, commit Unix-style line endings
  • Use MinTTY (the default terminal of MSYS2)
$ git --version
git version 2.24.0.windows.2

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

$ git config --global user.name trajanme
$ git config --global user.email [email protected]

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

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

3. node.jsのインストール

パッケージ管理マネージャは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がインストールできました。

4. yarnのインストール

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

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

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

$ yarn -v
1.19.1

5. vue-cliのインストール

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

$ yarn global add @vue/cli

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

$ yarn global bin

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

$ vue --version
@vue/cli 4.0.5

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

6. プロジェクトの作成～デプロイ

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

$ vue ui

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

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

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

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

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

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

8. GitHubへ登録

最後に、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での環境構築をしてみたのですが、案外開発はできそうな感じですね。

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