vue.js入門

はじめに

フロントエンドに疎くなってきたので、Vue.jsに入門してみます。

環境構築

いろいろやり方はあるようでCDNを使う方法であればだいぶ設定を省けそうですが、 ここではローカル環境にnodeを入れて設定する方法をしていきます。

前提

環境構築する環境はmac osを前提としています。

nodeを入れる

普通にnode.jsを入れる方法もありますが、ここではnode.jsのversion管理をできる、nvmを使った設定を していきます。

nvmの環境構築

公式はこちら

github.com

こちらも構築方法はいろいろあるようですがGit Installとされている方法を使っていきます。 手順としては

  1. 任意の場所でgit cloneする
  2. latest versionをcheckoutする
  3. shに追加する
  4. nvm.shの実行
  5. 設定確認

1. 任意の場所でgit cloneする

以下のようにcloneする。 ※ここではルートディレクトリ直下にcloneしています。

git clone https://github.com/nvm-sh/nvm.git .nvm
Cloning into '.nvm'...
remote: Enumerating objects: 8347, done.
remote: Counting objects: 100% (93/93), done.
remote: Compressing objects: 100% (59/59), done.
remote: Total 8347 (delta 42), reused 74 (delta 34), pack-reused 8254
Receiving objects: 100% (8347/8347), 3.02 MiB | 4.50 MiB/s, done.
Resolving deltas: 100% (5265/5265), done.

2. latest versionをcheckoutする

ルート直下にcloneした.nvmディレクトリに移動し、最新versionをcheckoutします。

cd ~/.nvm/
git checkout v0.38.0

3. 環境設定

.bashrcとかbash_profileなどに以下の設定を入れます。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

手元ではbash_profileに追加してみました。

4. nvm.shの実行

以下のようにnvm.shを実行します。

. ./nvm.sh

5. 設定確認

nvmコマンドが使えるか確認します。 以下でコマンドの結果が正常に帰ってくればOK。

nvm -help

nvmの使い方

installするnodeのversionによってコマンドがあるようです。

最新版

以下で最新版をdownloadするとのこと。

nvm install node

version指定

以下でversionを指定した方法ができるようです。

nvm install 6.14.4 # この指定だと6.14.4を指定するとのこと

installできるversionを調べる

以下でinstallできるversionを確認することができます。

nvm ls-remote

使いたいversionを指定する方法

nvm use

今回はversion指定で

LTSの最新を対象にしてみます。 ※この時点ではv14.17.4が最新のよう。

nvm install 14.17.4

nodeのversionを確認

以下コマンドでversionを確認してみます。

node --version
v14.17.4

期待どおりのversionになっているので設定OKです。

Vueの設定をする

準備ができたのでここからVueの環境構築をします。

作業用ディレクトリ

適当なディレクトリに今回のプロジェクト用のディレクトリを作成しておきます。

mkdir hello-vue-app

Vue CLIをインストール

開発に使うようなのでインストールします。 cli.vuejs.org

この手順の前に実施したnodeをインストールするときに入っているnpmを使う方法、もしくは yarnを使う方法があるようです。

yarnのほうが以下の観点で良さそうですが、今回はnpmを使って進めます。 * 依存パッケージの管理が良さそう（npmだとバージョン違いの依存プログラムをインストールする可能性があるとのこと） * インストール速度が速い

実際にインストール

公式サイトに記載されているGetting Startedに従って行います。 以下コマンドでインストールします。

npm install -g @vue/cli

インストールできているか以下のコマンドで確認します。

vue --version
@vue/cli 4.5.13

versionが確認できたのでOK。

Vueプロジェクトの作成

先程インストールしたVue CLIを使ってプロジェクトを作成します。

コマンドを簡単に。 ※以下のprojectnameのところを任意の名前にして実行するようです。

vue create projectname

ここではhello-vueという名前で作成してみます。

vue create hello-vue

上記コマンドを実行すると選択肢が表示されました。 f:id:set21set21:20210803191752p:plain

ここではVue 3を選択します。 選択後、プロジェクトの初期化がされ、コマンドを実行した配下にディレクトリが作成されています。

ls
hello-vue

ローカル起動

ディレクトリに移動し、以下コマンドを実行すると、vueが立ち上がります。

npm run serve

以下にブラウザでアクセスしてみます。 http://localhost:8080/

以下のような画面が表示されたので設定OKです。 f:id:set21set21:20210803192901p:plain

まとめ

コードは何も書いていないですが、vueの環境設定を中心に行いました。 次回、コードを触ってみて、画面を動かしたいと思います。