皆様はじめまして、エンジニアの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
上記の画面が出れば成功です。
最後に
まだまだVueCliでできることは、たくさんありますが今回はインストールからプロジェクト作成まで最短で実装してみました。
次は紹介していない機能や応用した実装を紹介したいと思います。
最後までご一読くださりありがとうございました。
バレットグループについてはこちら
