手順のまとめ

npmはインストール済の前提
Vue.jsをインストール（npm install vue）
webpackをインストール（npm --save-dev install webpack webpack-cli）
webpack.config.jsを作成、編集。（編集内容は下記）
src/index.jsにVue.jsの処理を書いていく。
dist/index.htmlというhtmlファイルを作成する。（<script>タグでdist/main.jsだけを読み込む。（編集内容は下記））
npx webpackを実行

ここまでの手順を終えると、dist/index.htmlにアクセスすることで閲覧できます。

はじめに

npm、webpackを使ってVue.jsをインストールして開発する方法を紹介します。
Vue.jsをモジュールとして読み込み、開発はES2015で行います。
最終的にwebpackでモジュールをバンドルします。
お決まりの、「Hello world」を表示させてみます。

npmについては過去に記事を書いています。
npmの基礎知識 - Qiita

手順

必要なモジュールをインストール

npmはインストール済の前提です。

Vue.jsをインストール

bash

npm install vue

webpackをインストール

webpackは開発時に使うパッケージなので、--save-devオプションを付けてインストールします。

bash

npm install --save-dev webpack webpack-cli

環境設定

webpack.config.jsを作成

ここでは下記のように作成します。

./src/index.jsにVue.jsの処理を書きます。
./src/index.jsを含めてバンドルしたものが、./dist/main.jsに出力されます。
modeはdevelopmentにしていますが、productionでも動きます。
ついでにwatchをtrueにして、./src/index.jsを修正したらすぐにwebpackが実行されるようにします。
resolveの設定が重要です。
これをしておかないとランタイム限定、コンパイラなしのVue.jsを読み込むことになり、テンプレートの変換が行われません。

webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  mode: 'development',
  watch: true,
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.min.js'
    }
  }
}

公式ドキュメントにランタイム、コンパイラの説明があります。
インストール — Vue.js

実際の開発

JavaScript開発

./src/index.jsでVue開発していきます。
importでvueモジュールを読み込んでいることに注目してください。

./src/index.js

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

アクセスするhtmlファイルを作成

./dist/index.htmlを作成します。
最終的にブラウザからアクセスするファイルです。
このファイルからは、バンドルされた./dist/main.jsを読み込みます。

./dist/index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue app</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="./main.js"></script>
  </body>
</html>

最後にwebpackを使ってモジュールをバンドル

下記のコマンドで、バンドルされたjsが生成されます。
今回のwebpack.config.jsの設定の場合、./dist/main.jsに書き出されます。
アクセスするhtmlファイルからこのmain.jsにアクセスする形です。

npx webpack

ここまでの作業で、一通りの作業完了です。

参考リンク

Webpackで始めるVue.js

こんなときにどうするか

npmの代わりにYarnを使いたい。

「手順のまとめ」のコマンドが若干変わります。

Vue.jsをインストール（yarn add vue）
webpackをインストール（yarn add --dev webpack webpack-cli）

VueXもインストールしたい

「手順のまとめ」のコマンドが若干変わります。

Vue.jsとVueXをインストール（yarn add vue）

エントリーポイントと出力先を調整したい

webpackの基本だけどハマりやすいentryの設定と[name] - Qiita

余談

webpack.config.js内のresolveプロパティを設定していなかったために、テンプレートへのコンパイルができずにかなりハマりました。