あなた
vue-cliでVueを触りたいんだけどどうやって導入すればいいの？
てんし君
いいね！今回はMacにvue-cliを導入する方法を紹介していくよ
こんな方におすすめ
- Vue-cliをMacにインストールしたい方
- Vue.jsを使いたい方
vue-cliのインストールからプロジェクト作成まで動画でも紹介しています
記事と併用して見ると理解度が増すと思います！
そもそも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
を開いておなじみの画面ができたら成功です。
わかりにくいところは動画でみてもらった方がいいと思います。
（僕がプログラミング勉強してるのは動画ベースなので）
