10分でできるVue.js CLIの導入|Vue.js入門

Vue.jsを導入する前に

Vue.js公式サイト
https://jp.vuejs.org/v2/guide/

Vue.jsはNode.jsがインストールされていないと動作しません。
Nodeバージョン6系以上が推奨なのでターミナルコマンドもしくは公式サイトからNode.jsをインストールしましょう!

ターミナルコマンドの場合

[shell] node -v //Node.jsのバージョンを確認 [/shell]

公式サイトからダウンロードの場合

https://nodejs.org/ja/

Node.js公式サイト

Vue.jsとは何か?

Vue.jsとはMVVMと言われるJavaScript上で動作するフレームワークです。

「Model View ViewModel(MVVM)」はGUIで描画しているデータを ・Model ・View ・ViewModelの3つの部分に分割し設計することで、リアルタイムにDOMの表示を切り替えることができます。

ざっくりした言い方だと「データ(Model)と描画(View)の間の情報の伝達と状態保持(ViewModel)をしながら、DOMに描画(View)する」イメージです!

Vue.js導入の3つの方法

1.CDNからの読み込み(scriptタグで読み込む)
2.npm install vue でインストールしてカスタマイズする
3.Vue CLI の導入を実施する(CLIとはコマンドラインの略です)

以上の導入方法にはそれぞれメリットがあります。

1は、既存のプロジェクトに対する追加導入や、Node.jsなどの導入が難しい場合に向いています。
2は、導入後にカスタマイズをしたいケースです。とくにnpmコマンドではなくgulpなどのタスクランナーと共存させたい場合に向いています。
3は、新規で導入し、かつvue.jsが推奨する開発環境から特にカスタマイズをする必要が無い場合に向いています。

今回は新規で一から開発に向いている3番のCLIで環境を整えたいと思います。

Vue CLIのインストール

Vue CLIのインストールをする際にターミナル(コマンドライン)を使用します。
任意のフォルダを作成して以下のコマンドを起動していきます。
Vue.js公式サイトにもインストール手順が記載されています。https://jp.vuejs.org/v2/guide/installation.html#CLI

[shell] npm install –global vue-cli # vue-cli をインストール vue init webpack my-project #"webpack"ボイラープレートを使用した新しいプロジェクトを作成する(my-project部分は任意のフォルダで大丈夫です) cd my-project #my-projectフォルダに移動 npm install #my-projectフォルダにNodeモジュールをインストール npm run dev #vueを起動する [/shell]

npm installを使用してvue-cliをインストールします。(公式サイト)

[shell] npm install –global vue-cli # vue-cli をインストール [/shell]
vue-cli をインストール

vue init webpackで新しいプロジェクトを作成します。今回は「my-project」というフォルダにVue開発環境を構築していきます。

[shell] vue init webpack my-project #"webpack"ボイラープレートを使用した新しいプロジェクトを作成する(my-project部分は任意のフォルダで大丈夫です) [/shell]
新しいプロジェクトを作成

cdコマンドで作成したフォルダに移動してください。

[php] cd my-project #my-projectフォルダに移動 [/php]
cdコマンドで作成したフォルダに移動

移動した先のフォルダにnpm installでNodeモジュールをインストールします。インストールするモジュールはpackage.jsonに記載されています。

[shell] npm install #my-projectフォルダにNodeモジュールをインストール [/shell]
Nodeモジュールをインストール
Nodeモジュールインストール後

以上でVue CLI開発環境は整いました!
npm run devコマンドでvueを起動すればブラウザに「Welcome to Your Vue.js App」と表示されます。

[shell] npm run dev #vueを起動する [/shell]
vueを起動する

無事起動できました!Welcome to Your Vue.js App!

めちゃくちゃ導入しやすいVue.js!!!!!!

5行コマンドを打ち込むだけで環境開発を整えられるVue.jsのフットワークの軽さは魅力的ではないでしょうか?
Node.jsとnpmコマンドが使用できればすぐにでも構築できます。
次回は実際にVue.jsをカスタマイズしていこうと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です