vue-cliの始め方・vue.jsを入門してみよう

Vue.js

前提条件

前提条件として、node.jsとnpmがinstallされている必要があります。

で確認しておきましょう。
もし、インストールがまだの場合は以下のリンクを参照してください。

https://qiita.com/akakuro43/items/600e7e4695588ab2958d

windowsなら

https://nodejs.org/ja/download/

です。

vue-cliのインストール

まず、vue-cliをグローバルにインストールします。

インストールされているか確認します。

プロジェクトの作成

そして、プロジェクトを作成します。
コマンドは、vue init [テンプレート名] [プロジェクト名]です。

webpackというアプリケーション用テンプレートを使用します。
コマンドを打った後、対話形式のモードになるので選んでいきましょう。

プロジェクト名です。
とりあえずenterで構いません。

プロジェクトの説明ですね。とりあえずenter。

作者名とメールアドレス。とりあえずenterで。

ランタイム + コンパイラ またはランタイムのみを選択できます。
今回は、ランタイム + コンパイラを選択。

vue-routerをインストールするかどうか。今回はYを選択。

今回はnを選択。

今回はnを選択。

今回はnを選択。

npmを選択するとnpmを使った自動インストールが始まります。
30秒ほど待つと完了です。

ディレクトリ構成を確認するとこんな感じです。

開発サーバーの立ち上げとプロジェクトのビルド

npm run devコマンドを打つと開発環境のWebサーバーが立ち上がり、

ブラウザで確認できます。

示された、http://localhost:8080にブラウザでアクセスし、

が表示されます。

また、

と打てば、実際に本番用のソースがdistフォルダに自動生成されます。

vue-cliを使えば、開発環境と本番のビルド環境がコマンドだけで簡単に生成できますね。