Vue.js入門

2726 ワード
Web npm Vue.js JavaScript babel JavaScript テキストリンク

目的

とりあえずインストールまでやろう。
備忘録として残そう。

Vue.jsって何？

  • Javascriptのフレームワーク
  • MVVMパターンを採用している
  • 双方向データバインディングを行うのが主な役割

手順

以前、Node.jsを触った事があったのでnpmは入ってた・・・

npmとは
Node.jsのパッケージを管理するツール
インストール方法は割愛します。

VueCLIのインストール

$ npm install -g @vue/cli

プロジェクトの作成
上手くいったからプロジェクト作るぞー
あれ、以下のメッセージ出てうまくいかない・・・

$ vue create test

  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli

どうやらVueCLIのバージョンが3未満の為、"create"コマンドは使えない模様

一旦、VueCLIをアンインストール

npm uninstall -g vue-cli

npmのバージョンを上げよう

npm update npm

もう一度、Vueをインストールしてプロジェクト作成しよう

$ npm install -g @vue/cli
$ vue create test

途中で選択を求められる
babelってなんやねん・・・
eslintってなんやねん・・・
とりあえずdefaultで作成しよう。

❯ default (babel, eslint) 
  Manually select features

*babelとは？
最新のJavascriptで書かれたコードを、サポートされていないブラウザの為に以前のバージョンに変換してくれるツール

*eslintとは？
Javascriptの静的検証ツール
コードを実行する前に明らかなバグを見つけてくれる

動作確認

$ cd test
$ npm run serve

http://localhost:8080/にアクセス

まとめ

npmのバージョンが古かったり、VueCLIのバージョンが古かったりと回り道が多かったが、なんとかインストールは終了。
分からない言葉が多かったので意味は適宜残していきます。