概要
本記事では、Macで「Vue.js」を使って開発したい人向けに
開発環境を構築する手順を解説します。
Vue.jsとは
Vue.jsはWebアプリケーションの主にUI部分を構築する際に使用する
オープンソースのJavaScriptフレームワークです。
Webアプリケーションの開発において必要な機能がセットになったツールのようなもので、
扱いやすく使い方を覚えると少ない記述で実装ができます。
目標
とりあえずMacOSでVue.jsを動かすところまでを、
できるだけ最小構成で構築します。
localhostにアクセスしてwelcome画面を表示させるのがゴールです。
実行環境
OSバージョン : macOS Monterey version 12.2.1
環境構築に必要なもの
Vue.jsの開発環境を構築するために、
① nodebrew
② Node.js
③ npm
④ Vue.js
この4つをMacOSにインストールしていきます。
Homebrewはインストール済みの前提で進めていきます。
Homebrewが入っていない場合はインストールしてから進めてください。
ステップ1 : nodebrewをインストール
まず「nodebrew」というツールをインストールします。
nodebrewは、次にインストールするNode.jsのバージョン管理ツールです。
nodebrewを入れておくと、PCに複数バージョンのNode.jsをインストールする際に
管理しやすく便利です。
Macの「ターミナル」を立ち上げて、
nodebrewをインストールするために下記コマンドを実行します。
$ brew install nodebrew
コマンドを実行すると、大量の文字が表示されるかと思いますが
コマンドの実行が完了したら、インストールが成功しているかを
確認します。
下記コマンドを実行します。
$ nodebrew
nodebrewのバージョンと、使用できるコマンドが一覧表示されれば
インストールが成功しています。
$ nodebrew
nodebrew 1.2.0
Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backward compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>
nodebrew prune [--dry-run] Uninstall old versions, keeping the latest version for each major version
Example:
# install
nodebrew install v8.9.4
# use a specific version number
nodebrew use v8.9.4
ステップ2 : Node.jsをインストール
次に「Node.js」をインストールします。
Node.jsはJavaScriptをサーバー側で動作させるプラットフォームです。
Node.jsをインストールすることで、Vue.jsをインストールするために必要な
npmをインストールすることができます。
インストール可能なNode.jsを確認するために下記コマンドを実行します。
$ nodebrew ls-remote
v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
~~ 略 ~~
v18.0.0 v18.1.0 v18.2.0 v18.3.0 v18.4.0 v18.5.0
バージョンを指定してNode.jsをインストールするコマンドはこちら。
$ nodebrew install-binary インストールしたいバージョン
最新の安定版をインストールしたい場合は下記コマンドを実行します。
$ nodebrew install-binary stable
「Installed successfully」と表示されればインストール成功です。
$ nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v18.5.0/node-v18.5.0-linux-x64.tar.gz
##################################################################################################################################################################### 100.0%
Installed successfully
※環境によっては以下のエラーの発生する場合があります。
Warning: Failed to create the file
Warning: /home/ユーザー名/.nodebrew/src/v18.5.0/node-v18.5.0-linux-x64.tar.gz:
Warning: No such file or directory
curl: (23) Failure writing output to destination
download failed: https://nodejs.org/dist/v18.5.0/node-v18.5.0-linux-x64.tar.gz
※その場合は下記コマンドを実行して、ディレクトリを作成してから
再度インストールのコマンドを実行します。
$ mkdir -p ~/.nodebrew/src
インストールが成功したら、これを使用できるように設定（有効化）します。
下記のコマンドを実行して、現在インストールしてあるnodeのバージョン一覧を表示します。
$ nodebrew ls
v18.5.0
current: none
「current」の部分には、現在設定されているnodeのバージョンが表示されます。
（設定していない場合は「none」が表示されます。）
表示されたnodeのバージョンを確認し、以下のコマンドを実行してnodeを設定します。
$ nodebrew use v18.5.0
use v18.5.0
もう一度"nodebrew ls"を実行し、「current」に先ほど設定したバージョンが
表示されていることを確認します。これでnodeが設定されました。
$ nodebrew ls
v18.5.0
current: v18.5.0
ステップ3 : npmをインストール
「npm」はJavaScriptのモジュールを管理するパッケージマネージャーです。
Node.jsをインストールした段階で、一緒にインストールされているはずなので
下記コマンドを実行し、インストール済みであることを確認します。
$ npm -v
8.12.1
バージョンが表示されればインストール済みです。
ステップ 4 : Vue.jsをインストール
「Vue.js」をインストールします。
Vue.jsを使って開発をする予定のフォルダに移動して
下記コマンドを実行します。
$ npm install -g @vue/cli
Vue.jsがインストールされたかを確認するために、下記コマンドを実行します。
$ vue --version
@vue/cli 5.0.8
バージョンが表示されればインストール完了です。
ステップ5 : Vue.jsのプロジェクトを作成
Vue.jsのプロジェクトを作成します。
プロジェクトを作成するフォルダに移動し、
下記コマンドを実行します。
$ vue create プロジェクト名
コマンドを実行すると、Vueプロジェクトの設定を決定するための
選択肢やY/nの質問が表示されていきます。
今回はデフォルトの設定でプロジェクトを作成していきます。
"Please pick a preset:"は「Default ([Vue 3] babel, eslint)」を選択します。
（【矢印】キーで移動、【return】キーで決定。）
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 3] babel, eslint) ← これを選択
Default ([Vue 2] babel, eslint)
Manually select features
"Pick the package manager to use when installing dependencies:"は
「Use NPM」を選択します。
Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)
? Pick the package manager to use when installing dependencies:
Use Yarn
❯ Use NPM ← これを選択
このように表示されれば、プロジェクトの作成が完了です。
ステップ6 : Vue.jsのwelcome画面を表示
最後にVue.jsのwelcome画面を表示させます。
作成したVue.jsプロジェクトのローカルサーバーを起動します。
先ほど作成したプロジェクトフォルダに移動し、
下記コマンドを実行します。
$ npm run serve
> vue@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 2761ms 14:26:04
App running at:
- Local: http://localhost:8080/
- Network: http://172.31.3.14:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
このように表示されれば起動成功です。
Chromeなどのウェブブラウザを開いてアドレス欄に
http://localhost:8080/
を入力してVue.jsのwelcome画面が表示されればゴールです。
最後に
ここまで、Vue.jsの開発環境を構築する手順を解説しましたがいかがでしたでしょうか。
今回は最小構成での構築だったので、今後はプロジェクトの設定など
ぜひ色々調べて試しながら環境構築してみてください。
最後まで読んでいただきありがとうございました。