Techvenience

Technology × Convenience - Vue / React / Next / Nuxt / ChatGPTなどのIT技術がもたらす便利さをお伝えします。最近はChatGPTなどのAI技術を使ってブログを書いています。

【Vue.js】VueCLIを使用したアプリケーション作成【Webpack】

【Vue.js】VueCLIを使用したアプリケーション作成【Webpack】

Macでの導入になります。Windowsもほとんど変わらないかと思いますが、ツール名などはMacを前提に話していますのでご注意ください。

VueCLI導入

VueCLIの導入については以下のページで説明しています。数分くらいで終わりますので、VueCLIを導入してみてください!
www.sky-limit-future.com

プロジェクト作成

プロジェクト名はご自分で決めてください!ここでは「trading」という名前で作成します。
ターミナルで実行します。

vue init webpack trading

いくつか質問されますが適当でもOKです。vue-routerを使いたい場合は「Y」を入力しましょう。
私はテスト関連を全てNoにしました。最後の質問ではnpmを選択しました。
質問に答えるとプロジェクトが作成されます。

ローカル起動

作成したプロジェクトの動作確認を行います。
プロジェクトに移動します。(ターミナル)

cd trading

ここはご自分で作成したプロジェクト名を指定してください。
該当ディレクトリに移動したら以下のコマンドを実行します。

npm run dev

実行後、以下のurlにアクセスすればデフォルト実装の画面が表示されます。

http://localhost:8080

正しく表示されれば環境構築完了です。