手順のまとめ
- 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をインストール
npm install vue
webpackをインストール
webpackは開発時に使うパッケージなので、--save-devオプションを付けてインストールします。
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を読み込むことになり、テンプレートの変換が行われません。
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モジュールを読み込んでいることに注目してください。
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
アクセスするhtmlファイルを作成
./dist/index.htmlを作成します。
最終的にブラウザからアクセスするファイルです。
このファイルからは、バンドルされた./dist/main.jsを読み込みます。
<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
ここまでの作業で、一通りの作業完了です。
参考リンク
こんなときにどうするか
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プロパティを設定していなかったために、テンプレートへのコンパイルができずにかなりハマりました。