開発環境
🌟Mac OS Mojave
CodePenやJSFiddleでCDN（インターネット経由）でも開発できますが、
ローカル環境での構築手順をまとめます。
Vue.jsの公式サイト
http://vuejs.org/
↑英語
Vue.jsの公式 日本語訳されたサイト
http://jp.vuejs.org/
↑日本語
【Vue.js】Vuejsをchromeブラウザでデバッグする方法
https://qiita.com/nonkapibara/items/8b587013b6b817d6dfc4
1.nodebrewをインストールする
brew install nodebrew
下記エラーが出た。＞＜
xcrun: error: active developer path ("/Applications/Xcode.app/Contents/Developer") does not exist
Use sudo xcode-select --switch path/to/Xcode.app to specify the Xcode that you wish to use for command line developer tools, or use xcode-select --install to install the standalone command line developer tools.
See man xcode-select for more details.
Error: An exception occurred within a child process:
CompilerSelectionError: nodebrew cannot be built with any available compilers.
Install GNU's GCC:
brew install gcc
エラー内容を見ると、CLTをインストールしたら良いっぽいので、
CLTをインストールする
brew install gcc
CLTをインストールできたので
再度、Nodebrewをインストールする
brew install nodebrew
インストール確認をする
nodebrew -v
インストール成功
nodebrew 1.0.1
2.Node.jsをインストールする
nodebrew/src のディレクトリを作る
mkdir -p ~/.nodebrew/src
Node.jsをインストールする
nodebrew install-binary latest
Installed successfully
が表示され、インストール成功
バージョンを確認する
nodebrew ls
v12.8.0
が表示される
使用するバージョンを指定する。
nodebrew use v12.8.0
３.パスを通す
bash_profileを開いて
vi ~/.bash_profile
以下の内容を追加する
export PATH=$HOME/.nodebrew/current/bin:$PATH
vimで書き込みを行うときは、iを押します。
一番下の行に-- INSERT --と出て、入力モードになります。
書き込みが済んだら、escを押して入力モードを解除します。
この状態で、:wqと打つと保存してvimを終了してくれます。
（保存しないで終了したい場合は:q）
確認する
cat ~/.bash_profile
4.設定ファイルを読み直す。
exec $SHELL -l
5.ここまでの確認をする
node -v
v12.8.0
が表示されたOK
pm -v
6.10.2
が表示されたOK
6.Vue CLI3のインストールする
インタラクティブなプロジェクトのひな型作成 - @vue/cli
設定なしに即使えるプロトタイプ作成 - @vue/cli + @vue/cli-service-global
npm install -g @vue/cli
npm install -g @vue/cli-service-global
バージョンの確認
vue --version
3.10.0
が表示されOK
7.Vue.js Devtoolsをインストール
Vue.js Devtoolsは、Vue.jsの開発をサポートする Chromeブラウザの拡張機能
Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
8.新しいプロジェクトを作成する
vue create testone-app
下記表示がされた
? Your connection to the default npm registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation? Yes
翻訳すると、デフォルトのnpmレジストリへの接続が遅いようです。
とりあえずYでEnter
下記表示がされた
Vue CLI v3.10.0
? Please pick a preset: default (babel, eslint)
とりあえずEnter
これで、プロジェクトの作成完了
9.アプリケーションの起動
cd testone-app
サーバー起動
npm run serve
下記が表示された
DONE Compiled successfully in 2670ms
App running at:
- Local: http://localhost:8080/
- Network: http://10.38.109.192:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
下記にアクセスする
http://localhost:8080/
成功
★開発サーバを停止する時は ctrl + c
🍬Vue.js🍬
— non (@nonnonkapibara) October 19, 2019
Vue CLI（v4.0.4） でVue.js作って、
Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩
【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）https://t.co/W7sWcleX4A#Vue #vuejs #Firebase pic.twitter.com/ajUgvvvoSZ
🎬Vue.js🎬
— non (@nonnonkapibara) October 20, 2019
YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル
作ってみたよぉ。
Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡
ちゃんと動いたよぉ😍https://t.co/y7hw3zHRlI#Vue #vuejs #firebase pic.twitter.com/C5zCM6n78R