SPA를 어쨌든 쉽게 만들어보십시오 (vue.js/axios/router/vuex/bootstrap)

================================================== ===
(추기)
앞으로 대규모 프로젝트를 만드는 분은 Nuxt.js를 권장합니다.
단지 학습이라는 관점에서 생각하면 하나 하나의 패키지를 설치
하면 Vue.js 자체의 이해를 높이는 데 도움이 될 것입니다.

================================================== ===

SPA(Single Page Application)로 웹 앱을 만들고 싶은 분은 많다고 생각합니다. SPA를 만들기 위해 vue.js는 매우 강력합니다. 웹 앱에서 가장 먼저 생각할 수 있는 최저 조건으로
· 라우팅 (router)
· 상태 관리 (veus)
· 서버 액세스 (axios)
· 외형을 정돈하는 프레임 워크 (bootstrap)
받을 수 있습니다. 이것을 vue.js를 사용하여 프로젝트를 시작하십시오. 첫 프로젝트를 시작한다는 곳에서 좌절하는 분도 많다(나를 포함해,,)라고 생각하기 때문에 자신에게의 비망록을 전해 소개합니다. 「어쨌든 간단」이 테마이므로 설정이나 코드의 내용은 미안 정도입니다. 간단하게 움직임을 확인할 수 있어 나중에 응용할 수 있는 것을 준비하는 것을 우선합니다.
(* node.js와 vue는 설치되어 있다고 가정합니다. 아래 링크를 참조하십시오)
htps : // jp. 아 js. rg/v2/구이데/인 s타치온. HTML

$ vue init webpack spa-sample

프로젝트 생성을 위한 상호작용이 발생하면 다음과 같다.

이제 프로젝트를 할 수 있었으므로 일단 확인합시다.

$ cd spa-sample
$ cd npm run dev

이 후 브라우저를 시작하고 localhost:8080으로 액세스하면 페이지가 되어 있습니다. 예제 페이지입니다.


여기에서 필요한 라이브러리를 설치합니다.

$ npm install vue-router
$ npm install vuex
$ npm install axios
$ npm install bootstrap-vue
$ npm install vuex-router-sync

설치는 일단 완료입니다. 이제 필요한 파일을 만듭니다.

spa-sample
   |-src
      |-main.js
      |-App.vue
      |-router.js (新規作成)
      |-aasets
      |-components
      |-pages(新規作成)
         |-Home.vue(新規作成)
         |-Sub.vue(新規作成)

우선 라우팅 설정. 이번에는 "Home"과 "Sub"의 두 페이지를 준비합니다.

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from '@/pages/Home.vue';
import Sub from '@/pages/Sub.vue';

Vue.use(VueRouter);

var router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/sub',
      component: Sub
    },
  ]
});

export default router;

그리고 앱 전체의 상태 관리를 관리를 작성합니다. (변수를 더하는 것만으로 거의 무의미한 상태 관리입니다만, 컴퍼넌트로부터 액세스 할 수 있는 것을 확인하는 것이 목적이므로 애경)

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.js'
import axios from 'axios'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Vuex from 'vuex'
import {sync} from 'vuex-router-sync'

Vue.use(BootstrapVue)
Vue.use(Vuex)

Vue.config.productionTip = false
Vue.prototype.$axios = axios

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment(state, amount){
      state.count += amount
    }
  },
  actions:{
    plus (context) {
      context.commit('increment', 1)
    }
  }
})
export default store
sync(store ,router)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router: router,
  components: { App },
  template: '<App/>'
})

그런 다음 각 페이지를 준비합니다. 우선은 Home로부터. Home에서는 컴포넌트에서 store에 액세스해 봅시다.

home.vue

<template>
  <div id="home">
    <div>
      <h2>Home</h2>
      <b-button
        size="lg"
        variant="outline-primary"
        @click="log"
      >
        Log
      </b-button>
      <b-button
        size="lg"
        variant="outline-primary"
        @click="plus1"
      >
        +1
      </b-button>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'Home',
    data() {
      return {
      }
    },
    methods: {
      log() {
        console.log(this.$store.state.count)
      },
      plus1() {
        this.$store.dispatch('plus')
      }
    }
  }
</script>

<style scoped>
</style>

우선 Sub를. Sub는 서버에 대한 액세스를 axios를 사용하여 수행합니다. 샘플로 우편 번호에서 주소를 가져옵니다.

sub.vue

<template>
  <div id="ip">
    <div>
      <h2>Sub</h2>
      <p>ここに郵便番号1000001の住所が表示します</p>
      <p>{{address}}</p>
      <div>
        <b-button
          size="lg"
          variant="outline-primary"
          @click="getAddress"
        >
        取得
        </b-button>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'Sub',
    data() {
      return {
        address: ''
      }
    },
    methods: {
      getAddress() {
        this.address = '住所を取得しています';
        this.$axios.get('https://api.zipaddress.net/?zipcode=1000001')
          .then((response) => {
            this.address = response.data.data.fullAddress;
            console.log(response)
          })
          .catch((reason) => {
            this.address = '取得に失敗しました';
          });
      }
    }
  }
</script>

<style scoped>
</style>

글쎄, 이것으로 전체가 끝났습니다. 바로 브라우저에서 확인해 봅시다.

Home

버튼이 두 가지 있습니다. 이것은 bootstrap 버튼입니다. Google 크롬 F12에서 개발자 모드로 전환하고 Log -> +1 -> Log를 번갈아 클릭합니다. 숫자가 더해져 가네요. 물론 Sub 페이지에서도 같은 store에 액세스할 수 있습니다. 응용하면 페이지 전체의 상태 관리를 할 수 있는 것이군요.

Sub

'취득'을 클릭하고 우편번호 API를 방문하여 주소를 확인합니다. 응용하면 백엔드를 구현하고 자체적으로 API를 만드는 등 서비스를 배포할 수 있군요.


어디까지나 「어쨌든 간단」이 테마이기 때문에 의미있는 페이지는 아니고, 외형도 좋지 않습니다. 처음 도전하는 것이 가장 고전하는 것이 프로젝트의 시작이 아닐까 생각합니다. 그래서 프로젝트의 템플릿으로 생각해 주시면.