vue-cliはvue.jsを使用したプロジェクトの開発環境を作成する公式のツールです。

環境

注意

vue.js + typescriptについては記載していません。
vue-cliの3系からtypescriptのプロジェクトが作成できるようになる様なので、正式にリリースされた際また記載できたらと思います。

vue-cliインストール

vue-cliをグローバルにインストールします。
これでvueコマンドが利用できるようになります。

npm install -g vue-cli

テンプレートを検索

vue-cliでプロジェクトを作成する際の、テンプレートの検索方法は以下となります。

vue list

2018/04/01時点で以下のテンプレートが表示されました。

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

プロジェクトの作成

vue-cliを利用してプロジェクトを作成します。
今回はwebpackテンプレートを利用します。

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

vue initを実行するとnpm initの様にプロジェクトについて質問がありますので、任意で設定してください。今回は、「Enter」連打しました。

作成されたら、プロジェクトフォルダに移動し、必要なパッケージをインストールします。

cd <プロジェクト名>
npm install

動作確認

以下コマンドを実行すると、開発用にサーバが立ち上がります。
コンソールに出力されたURLにアクセスすると、vue-cliが用意した画面が確認できます。

npm run dev

参照

vue.js 公式
vue-cli github

奥山

ECMAScript,Javaを扱います。
最近は、vue.jsなどフロントエンドの技術に興味あり！

中日ドラゴンズを応援してます。