이번 vue.js에 Vuex와 VueRouter를 추가하여 SPA를 제작하겠습니다.

이번에 사용하는 VueCLI라는 명령줄 기능을 사용하면 30분도 걸리지 않고 Vue.js에서 SPA를 만드는 토대를 정돈할 수 있습니다.

VueCLI, Vuex, VueRouter라는 Vue.js에서 SPA를 만들 때 필수 3 개의 라이브러리를 사용하여 Vue.js 응용 프로그램을 만드는 방법을 설명합니다.

Vue-CLI로 Vue 애플리케이션의 토대 만들기

VueCLI가 로컬 시스템에 설치되어 있지 않은 경우

npm i -g vue-cli

터미널에서 실행하여 VueCLI를 전역 설치합니다.

VueCLI를 사용하여 Vue 애플리케이션의 토대를 만듭니다. 프로젝트를 만든 디렉토리로 이동하여

vue init webpack-simple <プロジェクト名>

그러면 다음과 같은 파일 구성 프로젝트 디렉토리를 만들 수 있으므로,

プロジェクトディレクトリ
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

프로젝트 디렉토리에 들어가서

npm i

명령을 두드리고 node_modules를 설치하십시오.

이제 Vue.js 단위의 최소 구성 응용 프로그램을 만들었습니다. 프로젝트 디렉토리 내에서

npm run serve

를 입력하면 다음과 같은 화면이 브라우저에 표시되고 Vue 응용 프로그램이 시작됩니다.

VueRouter로 라우팅 처리 가능

Vue 응용 프로그램의 병아리가 생겼을 때 Vue.js의 SPA에서 페이지 전환을 허용하는 VueRouter를 설정합니다. 먼저 vue-router를 설치합니다.

npm i -S vue-router

설치가 완료되면 src 디렉토리 아래의 main.js

main.js

import Vue from 'vue';
import VueRouter from 'vue-router'; /*VueRouterをインポート*/
import App from './App.vue';
import { routes } from './routes'; /*routes.jsをインポート(ルート情報を書き込むファイル)*/

Vue.use(VueRouter); /*VueRouterをVueのミドルウェアとして使用する宣言*/

const router = new VueRouter({   /*routes.jsの情報をVueRouterに入れる*/
  routes
});

new Vue({
  el: '#app',
  router,   /*Vueをインスタンス化する際にrouterを渡す*/
  render: h => h(App)
})

로 변경

다음으로, 라우팅 정보를 포함하는 "routes.js"파일을 src 디렉토리 아래에 작성하고, 그 파일 (src/routes.js)을 이하와 같이 기재한다.

routes.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Work from './views/Work.vue';
import Skil from './views/Skil.vue';
import SkilFront from './views/SkilFront.vue';
import SkilBack from './views/SkilBack.vue';
import SkilOther from './views/SkilOther';
import ContactForm from './views/ContactForm.vue';

Vue.use(Router)

export default new Router({
    mode: "history",
   routes: [
       { path: '/', component: Home},
       { path: '/skil', 
         component: Skil,
         children: [
             { path: "Front", component: SkilFront},
             { path: "Back", component: SkilBack},
             { path: "Other", component: SkilOther,}
         ]},
        { path: '/profile', component: Profile},
        { path: '/work', component: Work},
        { path: '/contact', component: ContactForm},
        ]
});

· 필요한 구성 요소 가져 오기 (이번에는 Component 디렉토리에 Home.vue, Profile.vue, Work.vue 등으로 작성)

· 가져온 구성 요소를 표시하려는 경로와 연결

이번에는 프로필 SPA를 만들 생각이므로 Home, Skill, Profile, Work, Contact 각각을 라우팅하기 위해 이렇게 설정.
필요한 구성 요소 가져 오기 (이번에는 Component 디렉토리에 A.vue, B.vue, C.vue로 작성)

마지막으로, routes.js에서 설정한 컴포넌트를 표시하는 위치를 설명해 보겠습니다.
App.vue

App.vue

<template>
  <v-app>
    <v-content>
      <header-menu></header-menu>
      <router-view/>
    </v-content>
  </v-app>
</template>

<script>
import HeaderMenu from './views/HeaderMenu.vue'
export default {
  name: 'App',
  components: {
    HeaderMenu,
  },
  data: () => ({
    //
  }),
};
</script>

로 변경하십시오.

그러면 "router-view"라고 표시된 부분에 routes.js에서 설정한 구성 요소가 표시됩니다.

여기까지 만든 상태에서 "http://localhost:8080/#/a'에 액세스

마지막으로

다음 번에는 여기에 VueX를 도입하겠습니다.