フロントエンド開発のフレームワーク「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のお作法にそった内容を記述
絶賛配信中！
メルマガ詳細はこちら >>>
広告を含むご案内のメールをお送りする場合があります。
最後までお読みいただき、ありがとうございました。
以下も、ぜひご活用ください^^
以下も、ぜひご活用ください^^
