【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

#インストール
/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="http://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="./template.js"></script>
</body>
</html>

■「template.js」にVue.jsのお作法にそった内容を記述
※ご回答希望の場合は、ご連絡先も記入ください
"意見が持てる" デジタルコラム
絶賛配信中!

メルマガ詳細はこちら >>>

送信時点で「Privacy Policy」に同意したものとみなします。
広告を含むご案内のメールをお送りする場合があります。
   
         
最後までお読みいただき、ありがとうございました。
以下も、ぜひご活用ください^^
出版物
ITmedia
メルマガ
Site Access Log by HTTP Header

    >情報システムの

    情報システムの"教科書"本を発売中!


    ■ 情シス、システムコンサルタント、システムエンジニアの方へ
    情シスの定石(技術評論社)

    ■ システムエンジニア、情シスの方へ
    システム設計の教科書(技術評論社)

    CTR IMG

    株式会社グロリア ご紹介