vue-cliを使ってVue.jsのプロジェクトをお手軽にはじめてみる

vue-cliとは

JavaScriptのフレームワークが注目を集めています。

私は業務で触れたことがありませんが、有名どころだとAngluarやReact.jsでしょうか。

いくつもあるJSのフレームワークですが、案件ごとにいつも何を使おうか検討すると「学習コスト」や「シンプルさ」などの理由からVue.jsを採用しています。

ただ、いまいちモダンなフレームワークであるVue.jsのスタンダードな使い方や構成がわかっていませんでした。

そこで、プロジェクトのテンプレートを自動で作成してくれるvue-cliというものがあると聞き、せっかくなので今回は少し触ってみたいと思います。

vue-cliのソースはこちら

開発環境

今回の環境は以下の通りです。

OSやエディタの違いはさほど影響はないと思います。

  • Windows10
  • VSCode

npmをインストール

おそらくWindowsの方はインストーラからやったほうがお手軽だと思います。

あるいは、Nodistをつかってバージョン管理をしてもいいでしょう。

Node.js公式サイト
Nodistのダウンロード

vue-cliをインストール

ここからが本題です。

vue-cliをグローバルにインストールしましょう。

npm i -g vue-cli

インストールが成功していると、バージョンが表示されると思います。

vue --version
2.9.3

さっそくプロジェクトを作成する

インストールが完了しましたら、続いてプロジェクトを作成します。

作成する方法は、vueコマンドを使用します。

vue init "テンプレート" "プロジェクト名"

でプロジェクトが作成できます。

テンプレートについては、6種類用意されているようです。

  1. webpack
  2. webpack-simple
  3. browserify
  4. browserify-simple
  5. pwa
  6. simple

純粋にVue.jsを学習したい場合は6がいいかもしれません。

各テンプレートの詳しい説明はこちら

今回は2の「webpack-simple」でやってみたいと思います。

webpack-simpleテンプレート

コマンド実行

vue init webpack-simple my-pj

コマンドを実行すると色々な質問をされます。

一つ一つ丁寧に回答しても良いですし、すべてEnterでもOKです。

こんな感じになるかと思います。(すべてEnter押下しました)

? Project name my-pj
? Project description A Vue.js project
? Author Sugimoto <sugimoto@xxxx.com>
? License MIT
? Use sass? No

   vue-cli · Generated "my-pj".

   To get started:

     cd my-pj
     npm install
     npm run dev

作成されたプロジェクトを見てみる

ちゃんと作成されていますね。

まずはローカルホストで実行してみる

いろいろなモノをインストール。

npm i

続いて、サーバを起動

npm run dev

自動でブラウザが立ち上がり、画面が表示されましたね。

まとめ

まずはお試しでサクッとやってみたい場合は大変重宝すると思います。

今回この記事を書くにあたり、はじめて最初から1人でやってみたのですがものの数分で導入することができました。

このまま個人開発を続けていこうと思います。

合わせて読みたい!