나도개발자

화면이 전환될 때, 전환하는 행위를 Route로 칭한다.

SPA 제작 시 뷰에서 제공하는 유용한 라우팅 라이브러리가 Vue Router이다.

1. vue-router 설치

> npm i --save vue-router

2. router.js 추가

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

Vue.use(VueRouter); // vue 에서 vue router 를 사용하기 위해 알려줘야합니다.

const router = new VueRouter({
  mode: "history",
  routes: [
    { path: "/", component: Home },
    {
      path: "*",
      component: ErrorPage
    }
  ]
});

export default router;

3. main.js에 router 추가

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

4. App.vue에 router-view 추가

<template>
  <div>
    <router-view/>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

computed : 캐싱처리. message 값이 변경되면 호출한다. 값이 변경되지 않으면 이전의 값을 반환한다.

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

methods : 렌더링시 항상 호출한다.

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

■ Vue : 사용자 인터페이스를 구축하기 위한 JavaScript Framework

1) SFC (Single File Components) : 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방식으로 확장자 명이 vue인 파일을 SFC라고 한다.

2) SFC 구조 : <template /> <script /> <style />

■ Vue 시작하기

1) NodeJS를 설치한다.

 - node.js? JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임

 - NodeJS를 설치해야 npm을 사용할 수 있다.

2) npm?

 - Node Package Modules로 node.js 기반의 모듈을 모아둔 집합 저장소로 개발자들이 Node.js 기반의 JavaScript로 개발된 오픈 소스를 모듈로 올려 놓는다. 따라서, 개발에 필요한 jQuery, Webpack등의 모듈을 npm 명령어를 통해 쉽게 다운받을 수 있다.

3) npm 명령어

 - npm i -g @vue/cli : 뷰 설치

 - vue --version : 뷰 버전 확인

 - vue create 프로젝트명 : 뷰 프로젝트 생성

 - npm run serve : 프로젝트 실행

 - npm run build : 프로젝트 빌드

 - npm i -g serve : 웹서버 설치 명령어

 - serve -s dist : 웹서버에서 빌드한 파일 실행