【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を使い続けていると整合性の…

記事情報や役立ち情報を発信します!
Click to Hide Advanced Floating Content
Click to Hide Advanced Floating Content