【Vue.js】「Vue CLI」を使って、webpackテンプレートからサンプルアプリを作成する。

vue-CLIで、webpackテンプレートを使って、Vue.jsの環境を構築します。

webpackについては以下の記事で解説していますのでもしあまり詳しくないという方はご覧ください。

【webpack】設定の基本や「loader(ローダー)」について

Node.jsや、npmがインストールされており、vue-cliの構築が終わったものとします。

インストール手順

下記のコマンドを実行します。

途中で、下記のようなメッセージが問われます。

これはインストールした方がよいでしょう。

ESlintは、構文チェックを行ってくれるツールになります。

自動テストツールをインストールするかどうか問われます。自動テストを行いたい場合はインストールを実行します。

インストール後のディレクトリ構成

ディレクトリ	説明
build	Webpackのビルド用スクリプト
config	Webpackのビルド設定
dist	ビルドされたファイルはここに入る。「npm run build」コマンド実行時に生成される。
src	ビルド対象のファイルを入れる。
└assets	画像、フォントを入れる。
└components	単一ファイルのコンポーネントを入れる。
└router	ルーティング設定を入れる。
└App.vue	アプリケーションのルートになるコンポーネント
└main.js	エントリポイント（初めに読み込まれるファイル）
static	Loaderを介さずに、そのままdistに入るファイル
index.html	SPAのインデックスになるHTMLテンプレート

開発サーバーを起動

下記のコマンドで、アプリをdevモードで起動することができます。

基本は、devモードの場合は、「http://localhost:8080」にアクセスするようになっているのですが、下記のファイルを編集することにより、ＩＰ経由で別サーバーからアクセスすることも可能になります。

プロジェクト名/config/index.js

.

コマンド

コマンド	説明
npm run dev	開発サーバーを起動する。
npm run build	プロジェクトを運用モードとして実際にビルドできるコマンド,distフォルダに静的ファイルができるので、これをホスティングサーバーにアップロードしたりします。