かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

Vue CLI3 でプロジェクトを作成する【Vue.jsのイントールとセットアップ】

この記事をシェアする

Vue.jsでアプリを作るためのVue CLI3を使ったVueのセットアップ方法です。

そもそもVue.jsってなんだ?という方はこちらの記事をどうぞ

www.katonobo.com

Vue CLI3のセットアップ手順

【前提】

まず最初に、Node.jsのインストールを行なっていることが前提です。まだNode.jsをインストールしてない場合はNode.jsのインストールを完了してください。

Node.js

Vue cli3のインストール

パッケージ管理ツール「npm」でインストールします。

npm install -g @vue/cli

Vue cli3のプロジェクトをセットアップする

ターミナルなどのコマンドラインで以下のコマンドを入力します。

$ vue create my-project

 「my-project」は自分のプロジェクト名です。

次に、いくつかの質問がされるので、以下のように選択してください。

無事セットアップが完了したら、以下のようなコマンドの案内が出ますので、実行してください。

$ cd my-project
$ npm run serve

「npm run serve」を実行すると、ローカルホストのURLアドレスが出ますので、そのアドレスを自分のブラウザにコピぺしてください。

App running at:
- Local: http://localhost:8080/
- Network: http://10.81.133.130:8080/

(今回はhttp://localhost:8080/ にアクセスしてねということです。この「8080」は変わっている場合がありますので自分のコマンドラインに表示されているアドレスと入力)

ローカルホストの画面

ローカルホストの画面

 

この画面がブラウザで表示されれば成功です。

以上がVue Cli3のインストールとプロジェクトの設定でした。初めは深く考えず、この記事で紹介した選択肢でセットアップしてください。後々使っていけば意味もわかってきますし、その時に自分の好みに設定すれば良いと思います。

 

その他Vue.jsの基本的な記事:

www.katonobo.com

www.katonobo.com

www.katonobo.com

www.katonobo.com