![見出し画像](https://assets.st-note.com/production/uploads/images/52249812/rectangle_large_type_2_8c87ca138099709ecfb6599fd758f1ce.jpeg?width=1200)
#40 Vue.jsアウトプット
こんにちは、hiroです😃
最近朝活が充実してます。朝活の内容としては、以下となります。
①朝の散歩(約20〜30分)
②瞑想(5分)
③読書(30分)
④プログラミング学習(約1〜2時間)
働いていた時は「時間が無いから」と良く言い訳をしていた事もありましたが、「時間を作る努力をしていなかった」かなと最近感じる次第です。朝活で他にもオススメがありましたらコメント下さい!🙇♂️
Vue CLI
・Vue CLIとは、 "Vueアプリ向け" のCLIベースの大規模開発ツール。
・ファイルの分割が容易になる。
・最終的なコードのミニファイ化(余計なスペースやコメントを削除する)
・"Babel" 、"TypeScript" 、"ESLint" などのplugin使用時、簡単にセットアップしてVueアプリプロジェクトで容易に利用出来るようにする。
・ "HMR(Hot Module Replacement)" 通常はリロードで反映するが、コードを保存するだけで差分のみを反映する仕組み。これ便利。
・".vue" 、 "TS" 、"SCSS" 、"Pug" 、"ES6" などの使用が容易。
インストールと初期設定
・"npm(ノードパッケージイングマネージャー)" とはパッケージを管理するツール。以下ターミナルでコマンドを入力し、Vue CLIインストールからアプリファイルの生成までを実行する。
■npmのインストール
npm install -g @vue/cli
■Vueのバージョン確認
vue --version
■開発アプリの作成
vue create アプリ名
■ディベロップメントサーバーの起動
npm run serve
■開発用のサーバ内容(npm run serveコマンド後に表示される)
App running at:
- Local: http://localhost:○○/ (ローカルサーバ)
- Network: http://○○.○○.○.○○:○○/
■アンインストール方法
npm uninstall -g @vue/cli
■本番環境のためのbuildコマンド
npm run build
様々な便利ツールがあり学習する時に大変助かってます。開発した皆様ありがとうございます!
本日も最後まで読んで頂きありがとうございました🙇♂️
※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇
■参考教材
Udemy 超Vue.js2 完全パック
この記事が気に入ったらサポートをしてみませんか?