▶ 技術めも
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
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