More than 3 years have passed since last update.

Vueの環境構築を初心者ながらしてみた

Last updated at 2020-07-28Posted at 2020-07-28

#入社研修で使ったVue.jsの環境構築をしたい
自分と彼女の写真をまとめたサイトを
作ろう！と思った笑
時間があまりないため、使ったことあるVue.jsをフロントのフレームとして採用

###詰まったところ

・VueCliバージョン管理
Vueのバージョン確認むずかった。
vue-cliでインストールしてた。

#VueCliバージョン管理が問題
結論
**vue-cliと@vue/cli**のさにマジでひっかけられた。

###$ npm run dev ？？？？
サクッと検索して出てきた記事を元に環境構築をしてみたけど
サーバーを動かすところで$ npm run devを入力することに。

ここで、思いっきり違和感。
研修の時は$ npm run serveでやったぞ。。。
何かがおかしい。。。
（あとで、package.jsonの問題らしい記事を見つけたけど。）

#バージョン確認
バージョン確認をしてみて、
VueCliが２．xx.xなバージョンになってた。
バージョンの確認方法（以外に苦戦した）

$ npm vue --version

これはnpmのバージョンが出ます。

$ vue --version

これはVue/Cliのバージョンがでます。

え、Vueのバージョンは？？？

👇プロジェクトごとにインストールしてる時
$ npm list vue

プロジェクトにVueがインストールされてないと
└── (empty)を返されます。

👇グローバルにインストールしている場合
$ npm list -g vue

└─┬ @vue/cli@4.4.6
　 └── vue@2.6.11 みたいな感じで返ってきます（2020/07/28現在）

#インストールすべきは@vue/cli
そして、

$ npm install -g vue-cli
と
$ npm install -g @vue/cli

の差を発見できました！
どうやらVueCli3からは$ npm install -g @vue/cliを使用するのが正しいようです。

公式っぽい下記のサイトには$ npm install -g vue-cliで書いてあるのでご注意を。。
https://v1-jp.vuejs.org/guide/installation.html

ちなみに、package.jsonをいじったら
$ npm run sureveできるっぽい

#プロジェクト作成

$ vue create [プロジェクト名]

聞かれることには、とりあえずエンターで応答。
うまくいくと

🎉  Successfully created project vue.
👉  Get started with the following commands:

 $ cd [プロジェクト名]
 $ npm run serve

と教えてもらえるので、それに沿って$ npm run serveする！
うまくいくと

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

と出るので、好きな方にアクセスして

Welcome to Your Vue.js App

を拝みましょう。
お疲れ様でした！