vuejs

最新のvue-cliをMacにインストールしてプロジェクトを作る

2019年10月20日

あなた
vue-cliでVueを触りたいんだけどどうやって導入すればいいの?
てんし君
いいね!今回はMacにvue-cliを導入する方法を紹介していくよ

こんな方におすすめ

  • Vue-cliをMacにインストールしたい方
  • Vue.jsを使いたい方

vue-cliのインストールからプロジェクト作成まで動画でも紹介しています

記事と併用して見ると理解度が増すと思います!

 

vue.jsインストール方法の動画サムネ
>>動画はコチラ

そもそもvue-cliとは

ざっくり言ってしまえばvueアプリケーションを作りやすくしてくれるツールです。

vueプロジェクトを簡単に構築することができます!

 

vue-cliインストール手順

 

Vueが使えないことを確かめます。もしここで古いバージョンが表示されたら消しておきましょう。

vue -version

 

古いバージョンが表示されたらアンインストール

(2.○系は古いです)

npm uninstall -g vue-cli

 

[/st-mybox]

 

最新のVueをインストール

npm install -g @vue/cli

 

フォルダを作って移動

 

mkdir sample1
cd sample1

 

Vueプロジェクト作成

今回は froontendというプロジェクトです。

 

vue create frontend

 

このままだと遅いからhttps//......を使う?と聞かれています。

これはyesでOK

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

 

vueをデフォルトで作る?それとも手動で作る?と聞かれます。

最初の動作確認の意味合いが強いので今回はデフォルトを選択します。

手動でvue createを実行する際の詳細は別記事にまとめます。

?  Please pick a preset:
>  default (babel, eslint)
   Manually select features

 

プロジェクトが問題なく作られれば以下の表示が出てきます。

🎉  Successfully created project frontend.
👉  Get started with the following commands:
$ cd frontend
$ npm run serve

 

実行

cd frontendでfrontendに移動した後実行しましょう。

 

npm run serve

 

http://localhost:8080

を開いておなじみの画面ができたら成功です。

わかりにくいところは動画でみてもらった方がいいと思います。

(僕がプログラミング勉強してるのは動画ベースなので)

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-vuejs

© 2024 エンジニアてんし君ブログ