배경

업무에서 vue를 사용하게 되었기 때문에 만져 보기로 했습니다.
버전 2는 조금 오래된 것 같습니다만, 업무로 사용하기 때문에 굳이 2를 사용합니다.

전제

npm 명령을 사용할 수 있는 환경

만드는 것

무작위로 고양이의 이미지를 표시하는 앱
사용 webapi htps : // 아 ws. 랜드 m. 카 t / 메오 w

설정

먼저 cli를 설치합니다. -g를 붙이지 않으면 이 후의 PJ 작성을 할 수 없기 때문에 붙입니다.

npm install -g vue-cli

PJ를 만듭니다. 질문이 많지만 모든 기본값/최상위 옵션
좋다고 생각합니다.

vue init webpack {PJ名}

webapi와 http 통신을하는 데 필요한 axios를 넣습니다.

npm install axios

components 아래에 RandomCat이라는 vue 파일을 만듭니다.


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을 넣습니다.


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를 두드릴 뿐입니다만, 디버그 설정이라든지 상당히 벌어졌습니다. . .