背景

業務でvueを使うことになったのでさわってみることにしました。バージョン2は少し古いようですが、業務で使うのであえて2を使います。

前提

npmコマンドが使える環境

作るもの

ランダムで猫の画像を表示するアプリ使用webapi https://aws.random.cat/meow

セットアップ

まずはcliをインストールします。-gを付けないとこの後のPJ作成が出来ないので付けます。

npm install -g vue-cli

PJを作成します。質問が大量にあれますが全てデフォルト・一番上の選択肢でよいと思います。

vue init webpack {PJ名}

webapiとhttp通信をするために必要なaxiosを入れます。

npm install axios

components配下にRandomCatというvueファイルを作成します。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/d53f5138-a37c-3df1-602c-e5ab24e57c87.png)

routerフォルダ配下のindex.jsを編集します。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import RandomCat from '@/components/RandomCat'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'RandomCat',
      component: RandomCat
    }
  ]
})

main.jsを編集します。 Vue.prototype.$axios = axiosと記述することで、別のviewファイルでわざわざ importしなくともaxiosが使えます。

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

先ほど作ったRandomCat.vueを編集します。データバインディングする時は、srcの前に:が必要です。

RandomCat.vue

<template>
  <!-- <img src="cat">では無いので注意 -->
  <img :src="cat">
</template>

<script>

export default {
  name: 'RandomCat',
  data () {
    return {
      cat: null
    }
  },
  mounted () {
    this.$axios
      .get('https://aws.random.cat/meow')
      .then(response => (this.cat = response.data.file))
      .catch(error => (console.log(error)))
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

おまけ：デバッグ設定

config配下のindex.jsのdevtoolプロパティを編集します。

index.js

devtool: 'source-map',

debugger for chromeを入れます。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/8f313026-1e00-d102-a76a-ccbcd75f8b2f.png)

launch.jsonを編集します。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*"
        }
      }
    ]
  }

感想

webapiを叩くだけですが、デバッグ設定とか結構こけました。。。