vue-cliを使ってvue.jsを使ったプロジェクトの開発環境を整える

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

環境

項目 バージョン
node.js 8.11.1
vue-cli 2.9.3

注意

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

vue-cliインストール

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

テンプレートを検索

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

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

プロジェクトの作成

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

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

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

動作確認

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

参照

vue.js
vue.js 公式
vue-cli github

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA