【Vue】Vue CLIのセットアップからプロジェクト作成までの流れ

vue

最初にVueを勉強しようとすると大抵、jQuery同様にhtmlの中にscriptタグでVue.jsまでのリンクを設定して実行することが多いかと思います。

ただ、本格的にVueのアプリケーションを作成するとなるともっと効率よく開発する必要があるのですが、その方法を忘備録としてメモ。

Node.jsのインストール

さて、その環境を整えるのにVue CLIというソフトウェアが必要になってくるのですが、それをインストールするためにパッケージ管理ツールとしてnpmを使います。npmを使うにはNode.jsが必要になってくるのでインストールします。
*Node.jsについては割愛します。

Node.js

インストールが終わったらコマンドプロンプトを立ち上げてnode -vと打って確認してみましょう。問題なくNode.jsのバージョンが表示されれば成功です。
Node.jsをインストールするとnpmが使えるようになります。

node -vでバージョンを確認

Vue CLIのインストール

Vue CLIとはVueを開発する為のコマンドツールです。プロジェクトの枠をサクッと作成したり表示を確認したり、必要なツールをインストールしたりできるツールです。
npmが使えるようになったので、コマンドプロンプトで以下のコマンド入力するとVue CLIがインストールされます。

npm install -g @vue/cli

通常であれば、エラーなくインストールが終わります。
これに続いて、Vue cli-service-global というプログラムをインストールします。こちらもVue CLIを使う上で必要なソフトウェアのようです。

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

以上で、Vue CLIのインストールが完了したので次はVueのプロジェクトの作成です。

Vueのプロジェクトを作ってみる

さて、実際にVueのプロジェクトを作成してみる

プロジェクトを作成するフォルダに移動

デスクトップでもいいのですが、乱雑になるのでVueのプロジェクトをまとめるvuetestなど適当なフォルダを作ってそこにプロジェクトを作成します。
そしてcdコマンドでvuetestフォルダまで移動する。

C:\Users\the_z>cd C:\Users\the_z\OneDrive\デスクトップ\vuetest\

Vueプロジェクトを作成する

いよいよVueプロジェクトを作成します。Vue CLIのコマンドを使って以下のコマンドで作成します。

vue create プロジェクト名

vue create  myapp

プリセットを指定する

プロジェクトを作成すると以下のような質問画面が表示されます。
最初はdefault (babel,eslint)が選択されているかと思います。

プリセットとはあらかじめ必要なプログラム・・例えばTypeScriptを使えるようにしておくとかVuexをインストールするなどですが最初のうちはデフォルトのままで良いかと思います。後からでもVuexなど必要な機能は追加できます。

このままEnterキーを押すとプロジェクトが作成されます。

マニュアルの場合

もう一つのManually select featuresを選択すると以下のようにVuexやRouter、TypeScriptなどが選択できます。

プリセットを選択

画像だとBabelが選択されている状態ですので、矢印キーで上下してスペースキーで選択することができますので、必要であれば他のプリセットも選択してEnterキーで進みます。進んだ後はプログラムの設定に関する事ですが、そのままEnterキーで進めばプロジェクトが作成されます。

プロジェクトを実行する

プロジェクトが作成されたら、作成したプロジェクトのフォルダまでcdコマンドで移動して、npm run serveコマンドで実行できます。

cd  \vuetest\myapp  　//作成したプロジェクトフォルダまでcdコマンドで移動
npm run serve

すると以下の画像のようにサーバーが起動し http://localhost:8080/　とアドレスが表示されるのでブラウザでアクセスしてみましょう。

成功していれば「Welcome to Your Vue.js App」というデフォルトで用意されている画面が表示されるはずです。

プロジェクトを終了する

プロジェクトを終了するにはコマンドプロンプトの画面で、ctrl+c で終了することができる。

プロジェクトをビルドする

さて、プロジェクトを作成していろんなファイルが自動的に作成されていますが、これを実際に公開するには一旦プロジェクトをビルドして公開用のファイルを作成する必要がありますが、 npm run build のコマンドを実行すれば公開用ファイルが作成されます。

npm run build

まとめ

一旦、プロジェクトの作成から実行までの流れは以上です。
他にもありますが、それは気付いたときにまた防備録としてメモします。