VueJS 2.x 構築

vue js + webpack

@see
体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023
http://qiita.com/hosomichi/items/25041c1d46452de84aa6
Vue.jsを使った大規模開発に必要なもの
http://qiita.com/m0a/items/34df129d6d8991ebbf86
単一ファイルコンポーネントの使い方まで
http://qiita.com/sygnas/items/c0228eabbb3157766d5c
Vue2.x系のハマりどころ
https://aloerina01.github.io/javascript/vue/2017/03/08/1.html
webpack最低限(JavaScript編)
http://qiita.com/tatsuyankmura/items/539c56837fc3a5f258b5

Chrome - Vue.js devtools

for MAC

brew install npm

make package.json

npm init

install webpack

# LOCAL INSTALL
npm install webpack vue-loader  --save-dev
npm install webpack vue-template-compiler  --save-dev
npm install webpack css-loader  --save-dev
npm install vue --save

# GLOBAL INSTALL
npm install webpack -g

Vue Router 使用時

npm install webpack vue-router  --save-dev

webpack.cinfig.js

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + "/build",
    filename: 'build.js'
  },
  module: {
    loaders: [
      { test: /\.vue$/, loader: 'vue-loader' },
    ]
  }
}

src/main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

// var app = new Vue(App).$mount('#app')

src/App.vue

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

<style>
  .red { color: #f00; }
</style>

<template>
  <h1 class="red">{{ msg }}</h1>
</template>

template, CSS ファイル分割の場合

<script>
  module.exports = {
    data: function () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>

<style src="./app.css"></style>
<template src="./app.html"></template>

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vue sample </title>
  </head>
  <body>
    <div id="app"></div>
    <script src="build/build.js"></script>
  </body>
</html>

AUTO build

webpack --watch

作成ファイル

> ダウンロード