kz’s blog

興味のあることについて書いていきます。

Windows で Vue.js を開発する環境を整える

環境

Windows10 Enterprise

nodist インストール

github.com

f:id:kz62:20181016212432p:plain:w600

ダウンロードしたインストーラーを実行してインストールします。

コマンドプロンプト起動

以下作業はコマンドプロンプトで行うので起動しておいて下さい。

nodist バージョン確認

$ nodist -v
0.8.8

バージョンが表示されればOKです。

Node.js インストール

Node.js をインストールする前に、どのバージョンがインストール可能かを確認しておきます。

インストール可能な Node.js の確認

$ nodist dist
Could not read response for https://nodejs.org/dist/index.json
Could not read response for https://iojs.org/dist/index.json
Could not read response for https://nodejs.org/dist/index.json.
Sorry.

上記が出た場合はプロキシの設定をします。

$ set HTTP_PROXY=http://[プロキシのドメイン or IPアドレス]:[プロキシのポート]

もう一度確認

$ nodist dist
  0.1.14
  0.1.15
  ~中略~
  10.10.0
  10.11.0
  10.12.0

インストール

上記で確認したバージョンの Node.js をインストールします。

$ nodist + v10.12.0

※とりあえず最新をインストールします。

バージョン確認

$ node -v
v7.2.1

あれ?7.2.1になっとる。

インストールされている Node.js を確認してみます。

$ nodist
  (x64)
> 7.2.1  (global: v7.2.1)
  10.12.0

どうやらデフォルトでは 7.2.1 が選択されているっぽいですね。

最新に切り替えます。

$ nodist v10.12.0
v10.12.0
Default global pacakge update dsuccessful.

もう一度バージョン確認

$ node -v
v10.12.0

無事切り替わりました。

npm のバージョン確認

$ npm -v
4.0.5

バージョンが表示されていればOKです。

vue-cli インストール

いよいよ Vue.js を使用したアプリを開発するための vue-cli とやらをインストールします。

インストール

$ npm install -g @vue/cli

vue バージョン確認

$ vue --version
3.0.5

バージョン3以上であればOKです。

Vue プロジェクト作成

適当なフォルダに移動し、プロジェクトを作成します。

vue create hello-world

この場合hello-worldというプロジェクトが作成されます。

途中で下記のような選択を迫られるので、とりあえずdefaultを選択しておきます。(作成するアプリによって適宜選択した方が良いです。)

Vue CLI v3.0.5
? Please pick a preset:
> default (babel, eslint)
  Manually select features

ローカルで起動

最後に起動し、アクセスすることができれば完了です。

起動コマンド

$ cd hello-world
$ npm run serve

アクセス

http://localhost:8080/

画面が表示されればOKです。