目次
vue-cliとは
JavaScriptのフレームワークが注目を集めています。
私は業務で触れたことがありませんが、有名どころだとAngluarやReact.jsでしょうか。
いくつもあるJSのフレームワークですが、案件ごとにいつも何を使おうか検討すると「学習コスト」や「シンプルさ」などの理由からVue.jsを採用しています。
ただ、いまいちモダンなフレームワークであるVue.jsのスタンダードな使い方や構成がわかっていませんでした。
そこで、プロジェクトのテンプレートを自動で作成してくれるvue-cliというものがあると聞き、せっかくなので今回は少し触ってみたいと思います。
開発環境
今回の環境は以下の通りです。
OSやエディタの違いはさほど影響はないと思います。
- Windows10
- VSCode
npmをインストール
おそらくWindowsの方はインストーラからやったほうがお手軽だと思います。
あるいは、Nodistをつかってバージョン管理をしてもいいでしょう。
vue-cliをインストール
ここからが本題です。
vue-cliをグローバルにインストールしましょう。
npm i -g vue-cli
インストールが成功していると、バージョンが表示されると思います。
vue --version
2.9.3
さっそくプロジェクトを作成する
インストールが完了しましたら、続いてプロジェクトを作成します。
作成する方法は、vueコマンドを使用します。
vue init "テンプレート" "プロジェクト名"
でプロジェクトが作成できます。
テンプレートについては、6種類用意されているようです。
- webpack
- webpack-simple
- browserify
- browserify-simple
- pwa
- 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人でやってみたのですがものの数分で導入することができました。
このまま個人開発を続けていこうと思います。
