以下の流れが理解が速そうです。
JavaScript のライブラリとして扱って、単一の html を作る
↓
vue-cli を使って node.js ベースの開発をする。
なんで、まずは単一の html で、Vue + vue-router と Vue + vuex でサンプルを作って見ます。
単一の html
vue
早速単一の html を作ってみます。以下のファイルをローカルに作ってブラウザで開きます。
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app'
, data: {
message: 'Hello Vue!'
}
})
</script>
ブラウザに Hello Vie! と表示されれば OK!
公式ページの以下の内容に相当しています。
https://jp.vuejs.org/v2/guide/installation.html#CDN
https://jp.vuejs.org/v2/guide/index.html#宣言的レンダリング
(必要とされるキー以外の名前がプログラム上に現れないように変更してあります。)
vue + vue-router
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-router"></script>
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>
</div>
<script>
new Vue({
router: new VueRouter({
routes: [
{ path: '/foo', component: { template: '<div>foo</div>' } }
, { path: '/bar', component: { template: '<div>bar</div>' } }
]
})
}).$mount('#app')
</script>
公式ページの以下の内容に相当しています。
https://router.vuejs.org/ja/essentials/getting-started.html
(必要とされるキー以外の名前がプログラム上に現れないように変更してあります。)
vue + vuex
<!DOCTYPE html>
<meta charset='utf-8'>
<title></title>
<script src='https://unpkg.com/vue'></script>
<script src='https://unpkg.com/vuex'></script>
<div id="app">
{{ $store.state.count }}
<p>
<button @click="increment( { amount: 1 } )">+</button>
<button @click="incAsync( { amount: 2 } )">incAsync</button>
<button @click="delayed( { amount: 3 } )">delayed</button>
</p>
</div>
<script>
new Vue({
el: '#app'
, store: new Vuex.Store({
state: {
count: 0
}
, mutations: {
increment: ( state, payload ) => state.count += payload.amount
}
, actions: {
incAsync( { commit }, payload ) {
return new Promise(
( resolve, reject ) => setTimeout(
() => {
commit( 'increment', payload )
resolve()
}
, 1000
)
)
}
}
})
, methods: Object.assign(
Vuex.mapMutations( [ 'increment' ] )
, Vuex.mapActions( [ 'incAsync' ] )
, { delayed( payload ) {
this.$store.dispatch( 'incAsync', payload ).then(
p => this.$store.commit( 'increment', payload )
)
}
}
)
})
</script>
公式ページの以下の内容に相当しています。
http://vuex.vuejs.org/en/state.html
http://vuex.vuejs.org/en/getters.html
http://vuex.vuejs.org/en/mutations.html
http://vuex.vuejs.org/en/actions.html
＋ボタンを押すと、1増えます。
incAsync ボタンを押すと、1秒後に2増えます。
delayed ボタンを押すと、1秒後に6増えます。
vue-cli ベース
vue-cli は node 上で動くさまざまな vue アプリケーションのテンプレートを作成してくれるツールです。
node / npm のインストール
こちらから
https://nodejs.org/ja/
vue-cli のインストール
npm i vue-cli -g
作成できるテンプレートの一覧を見てみます。
$ vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
まずは simple のテンプレートを作ってみる。
$ vue init simple the_simple
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init simple#1.0 the_simple
? name the_simple
? author sat@example.com
vue-cli · Generated "the_simple".
name と author を入力します。（リターンでデフォルトにしてくれます）
the_simple というディレクトリが作られ、index.html がその中にできます。
このテンプレートは node を使いません。
次に webpack-simple のテンプレートを作ってみます。
$ vue init webpack-simple the-webpack-simple
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack-simple#1.0 the-webpack-simple
? Project name the-webpack-simple
? Project description A Vue.js project
? Author Satoru Ogura <satoru.ogura@me.com>
? Use sass? No
vue-cli · Generated "the-webpack-simple".
To get started:
cd the-webpack-simple
npm install
npm run dev.
以下のファイルができあがります。
the-webpack-simple
├── README.md
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ └── main.js
└── webpack.config.js
このテンプレートは node を使います。
To get started に書いてある通り
$ cd the-webpack-simple
$ npm install
$ npm run dev
と実行すると、（ローカルで実行していれば）ブラウザが開いて今作ったページを表示してくれます。
必要なファイルをちょっとみてみます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>the-webpack-simple</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
メインの html で id が app の div のところが、vue によって置き換わっていきます。