Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue 2 を使ってみる

More than 3 years have passed since last update.

以下の流れが理解が速そうです。

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

と実行すると、(ローカルで実行していれば)ブラウザが開いて今作ったページを表示してくれます。
必要なファイルをちょっとみてみます。

index.html
<!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 によって置き換わっていきます。

続く・・・・http://qiita.com/Satachito/items/2988e4dea236ce1ef644

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away