Vue.js 事始め
環境
node: v6.11.0 npm: v3.10.10
Install
下記のコマンドで package.json
を作成、
webpack, vue
のインストールを行う。
npm init npm install -g webpack npm install --save-dev vue
webpack.config.json
const path = require('path'); module.exports = { entry: { 'js/main': './src/js/main.js' }, output: { path: path.join(__dirname, 'public'), filename: '[name].js' }, + resolve: { + alias: { + 'vue$': 'vue/dist/vue.common.js' + } + } }
npm
でインストールした vue
はランタイム限定ビルドのため、
完全ビルドを利用する場合は、バンドラでエイリアスを設定する必要がある(上記のコードの + 部分)。
https://jp.vuejs.org/v2/guide/installation.html#ランタイム-コンパイラとランタイム限定の違い
index.html
<div id="app"> {{ message }} </div>
main.js
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
webpack コマンドを打って、
> webpack
index.html
をブラウザで開き、 Hello Vue!
が画面に出力されれば OK
Hello Vue!