--- title: Vue 2 を使ってみる tags: vue2 Vue.js vue-router Vuex vue-cli author: Satachito slide: false --- 以下の流れが理解が速そうです。 JavaScript のライブラリとして扱って、単一の html を作る     ↓ vue-cli を使って node.js ベースの開発をする。 なんで、まずは単一の html で、Vue + vue-router と Vue + vuex でサンプルを作って見ます。 # 単一の html ## vue 早速単一の html を作ってみます。以下のファイルをローカルに作ってブラウザで開きます。 ```
{{ message }}
``` ブラウザに Hello Vie! と表示されれば OK! 公式ページの以下の内容に相当しています。 https://jp.vuejs.org/v2/guide/installation.html#CDN https://jp.vuejs.org/v2/guide/index.html#宣言的レンダリング (必要とされるキー以外の名前がプログラム上に現れないように変更してあります。) ## vue + vue-router ```
Go to Foo Go to Bar
``` 公式ページの以下の内容に相当しています。 https://router.vuejs.org/ja/essentials/getting-started.html (必要とされるキー以外の名前がプログラム上に現れないように変更してあります。) ## vue + vuex ```
{{ $store.state.count }}

``` 公式ページの以下の内容に相当しています。 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 ? 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 ``` と実行すると、(ローカルで実行していれば)ブラウザが開いて今作ったページを表示してくれます。 必要なファイルをちょっとみてみます。 ```index.html the-webpack-simple
``` メインの html で id が app の div のところが、vue によって置き換わっていきます。 続く・・・・http://qiita.com/Satachito/items/2988e4dea236ce1ef644