【Vue.js】Vue CLI 開発環境構築〜動作確認メモ(Mac)

フロントエンド開発のフレームワーク「Vue.js」を使ってみようと思い、Mac上に環境を構築しました。
今後の開発につながるように「Vue CLI」環境で構築しました。

「企画中のアプリ」に適しているか、技術調査です。

Vue.js - The Progressive JavaScript Framework…

構築環境

  • MacBookPro 15インチ(2018)
  • macOS Catalina(10.15.4)

インストール

いくつかの管理ツールを利用して環境を整えます。

操作はMacの「ターミナル.app」から行います。

下記が必要となります。

  • Xcodeコマンドラインツール
    Homebrewのインストールに必要。
  • Homebrew
    Macのパッケージ管理ツール。
    Nodebrewのインストールに必要。
  • Nodebrew
    Node.jsの管理ツール。
  • Node.js
    Vue.jsの稼働に必要。
  • Vue.js
    フロントエンド開発のフレームワーク。

Xcodeコマンドラインツール

#インストール
xcode-select --install

Homebrew

Homebrew

The Missing Package Manager for macOS (or Linux).…

#インストール
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

#インストールの確認
#Homebrewの問題をチェックするコマンド(だが、インストールできていないと動かない)
#Warningがたくさん出るかも
brew doctor

HomebrewのWarningが気になる方は、以下をご参考ください。

一馬力のメモ帳

Homebrewの問題をチェックしてくれる brew doctor コマンド。 Homebreを使い続けていると整合性の…

Nodebrew

#インストール
brew install nodebrew

#インストール確認
nodebrew -v
>nodebrew 1.0.1

Node.js

#インストール
nodebrew install latest

#以下のエラーが出た場合、エラー内容の通り、フォルダを作ればOK
>Fetching: https://nodejs.org/dist/v14.3.0/node-v14.3.0-darwin-x64.tar.gz
>Warning: Failed to create the file
>Warning: /Users/xxxxxx/.nodebrew/src/v14.3.0/node-v14.3.0-darwin-x64.tar.gz
>Warning: : No such file or directory
mkdir -p ~./nodebrew/src

#インストール確認
node -v
>v14.3.0

#Node.jsを有効化
nodebrew use 14.3

Vue CLI

#インストール
npm install -g @vue/cli

#インストール確認
vue --version
>@vue/cli 4.4.1

#稼働確認用サービスのインストール
npm install -g @vue/cli-service-global

動作確認

#プロジェクトを作成
#「test-cli」は任意の名前
#作成したいフォルダでコマンド実行
vue create test-cli

#サーバを起動
vue serve

#止めるときは「Ctrl + c」

何の味気もないですが、無事に起動しました。

蛇足

なお、Vue.jsを試したいだけであれば上記の環境構築は不要で、HTMLソースから直接「Vue.js」を取り込めば使えます。

■「xxx.html」のソース

〜中略〜
<body>

〜内容の記述〜
<!-- body終了直前に記述 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="./template.js"></script>
</body>
</html>

■「template.js」にVue.jsのお作法にそった内容を記述

関連リンク

関連記事

フロントエンドの開発を行う際に、シングルページアプリケーションが作りやすいと言われている「Angular」環境を構築してみました。 備忘録をかねたメモです。 「Angular」はGoogleが中心となって開発されているフレームワ[…]

Vue.js - The Progressive JavaScript Framework…

Homebrew

The Missing Package Manager for macOS (or Linux).…

一馬力のメモ帳

Homebrewの問題をチェックしてくれる brew doctor コマンド。 Homebreを使い続けていると整合性の…

記事情報や役立ち情報を発信します!
>− あなたと共に、未来を創る −

− あなたと共に、未来を創る −

この理念の元、あなたに寄り添い、あなた以上に未来を見据え、その未来に向けてトータルでサポートいたします。
その場限りではない、末永いお付き合いを望んでおります。

あなたの頭脳になりたい。全ては、明るい未来のために。

CTR IMG
Click to Hide Advanced Floating Content
Click to Hide Advanced Floating Content