Vue.jsは日本語のドキュメントも整備されていて情報も多いので助かりますね。
でそのVue.js + webpackでいい感じの環境を作る必要があって用意してみました。
- Vue.js
- webpack
- vue-router（あったほうが良さそうなので使います）
- Babel（これもあったほうが良さそう的なので使います）
- サーバーとのHTTP通信はjQueryを使います（元々プロジェクトに入っていたのでさらに追加するよりもいいだろうという判断です）
node -v
まずはお決まりのNode.js入ってるか確認。
npm -v
npm（Node.jsのパッケージマネージャー）も入ってるか確認。
webpack -v
webpackも入っているか確認。
もし入ってなかったら
npm install -g webpack
-gオプションはGlobalオプションのこと。
git clone https://github.com/shigekitakeguchi/npm-webpack-vuejs.git
https://github.com/shigekitakeguchi/npm-webpack-vuejs
GitHubから落として使ってください。
カスタマイズなりなんなりして。
cd npm-webpack-vuejs
落としたフォルダ内に移動する。
├── LICENSE
├── README.md
├── app
│ ├── index.html
│ └── scripts
│ └── bundle.js
├── bs-config.json
├── package.json
├── src
│ ├── components
│ │ └── app.vue
│ └── scripts
│ └── index.js
└── webpack.config.jsファイル・フォルダ構成はこんな感じ。
LICENSEやREADME.mdはプロジェクトには直接はいらないファイルですね。今回は、わかりよいようにコンポーネントを使ったサンプルを入れてます。
「.vue」という珍しい拡張子のファイルがVue.jsのコンポーネントですね。説明はのちほど。
npm install
これで必要なパッケージがインストールされるはず。
{
"name": "npm-webpack-vuejs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack -w",
"lite": "lite-server",
"start": "concurrently \"npm run lite\" \"npm run webpack\""
},
"keywords": [],
"author": "shigeki.takeguchi",
"license": "MIT",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-es2015": "^6.13.2",
"concurrently": "^2.2.0",
"css-loader": "^0.23.1",
"lite-server": "^2.2.2",
"vue-html-loader": "^1.2.3",
"vue-loader": "^8.5.3",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1"
},
"dependencies": {
"jquery": "^3.1.0",
"vue": "^1.0.26",
"vue-router": "^0.7.13"
}
}中身はこんな感じ。 けっこういろいろはいってますね。
落としてきたpackage.jsonからインストールすればいいんですがそれぞれのパッケージの説明を。
npm install --save-dev babel
はい、Babelです。
npm install --save-dev babel-core
https://github.com/babel/babel/tree/master/packages/babel-core
言わずもがな、Babelのコンパイラのコア。
npm install --save-dev babel-loader
https://github.com/babel/babel-loader
webpackでES2015構文で書いたファイルをトランスパイルするのに必要。
npm install --save-dev babel-plugin-transform-runtime
未対応なブラウザでも動くように変換するやるらしいですね。
babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた
npm install --save-dev babel-preset-es2015
BabelでES2015を使うときに必要なやつです。
npm install --save-dev vue-loaderwebpackでvue.jsを扱うようにするやつです。
npm install --save-dev concurrently
https://github.com/kimmobrunfeldt/concurrently
concurrentlyは複数のコマンド実行できるようにするため。具体的に何をしているかは後ほど説明。
npm install --save-dev lite-server
https://github.com/johnpapa/lite-server
webpackにもwebpack dev serverというのがあるみたいだけどlite-serverのがシンプルで良さそうなので使ってみた。
ただし設定ファイルは必要でした。
npm install --save-dev webpack
https://github.com/webpack/webpack
webpackですね。
npm install --save vuevue.jsです。HTMLでscriptタグで読み込むのではなくrequireで読み込めるようにするためですね。
npm install --save jquery同じくjqueryもwebpack.ProvidePluginで設定して利用できるようにします。
npm install --save vue-routervue-router.jsもrequireで読み込めるようにします。
"scripts": {
"webpack": "webpack -w",
"lite": "lite-server",
"start": "concurrently \"npm run lite\" \"npm run webpack\""
},npm start
このコマンドでlite-serverを立ち上げwebpackでwatchを行いJavaScriptの変更を監視するようにしている。
"start": "concurrently \"npm run lite\" \"npm run webpack\""scriptsの中にあるstartがこれにあたる。
npm run lite
npm run webpack
これらのコマンドはそれぞれ独立したコマンドですが、最初にちょっと触れたがconcurrentlyにダブルクオーテーションでくくってスペースで区切って引数で渡せば並行して実行することになる。便利。
"webpack": "webpack -w",これはwebpackのwatch（監視）を走らせている。こちらも後ほど触れるがwebpack.config.jsonで記述されたことをもとに監視している。
"lite": "lite-server",lite-serverを立ち上げている。bs-config.jsonに設定ないようを記述している（こちらも後ほど触れる）。
webpackの設定です。
var webpack = require("webpack");
module.exports = {
entry: './src/scripts/index.js',
output: {
path: __dirname + '/app/scripts',
filename: 'bundle.js',
publicPath: '/app/',
},
module: {
loaders: [
{
test: /\.vue$/, loader: 'vue'
}
]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
}),
new webpack.optimize.UglifyJsPlugin(),
]
}entryにもとファイル（複数ある場合は配列で持たせる）。outputに出力される設定を記述。今回はbundle.jsっていう一般的によく使われているらしい名称のまま。
けっこうシンプルですね。
依存するパッケージがいろいろあってエラーが出てインストールする感じでした。うーん。
npm install --save-dev css-loadernpm install --save-dev vue-style-loaderこのふたつのパッケージは「.vueファイル」（コンポーネント化したファイル）でCSSを記述するのでそのために必要ってことですね。
npm install --save-dev vue-html-loaderこれも「.vueファイル」（コンポーネント化したファイル）でHTMLを記述するのでそのために必要ってことです。
{
"injectChanges": "true",
"files": ["./app/**/*.{html,htm,css,js}"],
"watchOptions": { "ignored": "node_modules" },
"server": { "baseDir": "./app" }
}lite-serverの設定はドキュメントルートをappの直下にしたかったのと監視対象のファイル（html、css、js）が変更されたらリロードしてinjectChangesというBrowsersyncを動すため。
このページを参考にHello Worldしました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>npm Webpack Vue.js</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="/scripts/bundle.js"></script>
</body>
</html>app/index.htmlです。
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data: function() {
return {
msg: 'Hello world!'
}
}
}
</script>src/app.vueです。styleとhtmlとscriptsがひとつになってるのでキモい人にはキモいかもですが考え方を変えればわかりやすいですね。好みの別れるところでしょうが。。。
あとAtomでvueのコンポーネントをシンタックスハイライトしてくれるパッケージです。
var Vue = require('vue');
var VueRouter = require('vue-router');
Vue.use(VueRouter);
var appComponent = Vue.extend(require('../components/app.vue'));
var App = Vue.extend({});
var router = new VueRouter();
router.map({
'/': { component: appComponent}
})
router.start(App, '#app');routerを使ってコンポーネントapp.vueを呼び出します。 成功すると赤い文字で「Hello world!」と表示されます。
vue.jsは軽量で扱いやすいMVVMフレームワークですね。
Riot.jsの方が新しくてここのところ注目されているらしいですがvue.jsは日本語ドキュメントが充実していて情報も豊富なので入門しやすいのが特徴ですね。