【Vue.js】VueCliを使用して開発環境を最短で実装

  皆様はじめまして、エンジニアのid:d_sasaです。

今回はVueCilのインストールからプロジェクト作成までやっていきたいと思います。

VueCliはVue.jsを開発するための準備をしてくれる便利なツールです。 とにかく簡単に早くVue.jsを実装したい方にお勧めです!

Vue.jsとは

そもそもVuejsとは何なのか、Vue.jsの良い点を含めて簡単に説明したいと思います。

Vue.jsはJavaScriptフレームワークです。 特徴として、双方向データバインディングに特化しておりシンプルで学習コストも低いといわれています。
さらに、Vue.jsはコンポーネント指向で開発を行うフレームワークで、ボタンやフォームなど、複数の画面で使うものをコンポーネント単位で区切り、他画面で再利用することができます。

そんなVue.jsをさらに簡単に出来てしまうVueCli下記で使用いていきたいと思います。

Nodejsのインストール

Vue CLIを使うには「npm」(Node Package Manager)がインストールされていなければなりません。npmはNode.jsに含まれているツールです。まだ入れていなければ、先にNode.jsをインストールしてください。

下記のサイトからインストールできます。 nodejs.org

※Node.jsのバージョンは8.9以上必要です。

Node.jsのバージョンが8.9に満たない方は上記のサイトから最新のバージョンを再インストールしてください。

Node.jsのバージョン確認コマンド

node --version

VueCliのインストール

下記のコマンドからインストールできます。

npm install -g @vue/cli

インストール出来たらvueコマンドでヘルプメッセージとともに確認できます。

vue

上記のコマンドで表示されたヘルプメッセージにも書かれていましたが、vuecliのバージョンを確かめたいときはオプション--versionを添えて打ち込みます。

vue --version

vue serverのインストール

vue serverやvue build コマンドを使うために、予めインストールしておきます。

npm install -g @vue/cli-service-global

プロジェクト作成

では早速プロジェクトを作っていきます。 vue create プロジェクト名(hello-world) で作成できます。

vue create hello-world

上記のコマンドを打つと下記の選択肢が現れるので、最初はdefaultを選びましょう。

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

プロジェクトをローカルサーバーで開く

まず作成したプロジェクトのディレクトリーに移動します。 移動したらnpmのrunコマンドで実行します。 http://localhost:8080/でページを開けます。

cd hello-world
npm run serve

f:id:d_sasa:20191014023550p:plain 上記の画面が出れば成功です。

最後に

まだまだVueCliでできることは、たくさんありますが今回はインストールからプロジェクト作成まで最短で実装してみました。

次は紹介していない機能や応用した実装を紹介したいと思います。

最後までご一読くださりありがとうございました。


バレットグループについてはこちら

bltinc.co.jp