지난 해 회사 홈페이지 리뉴얼 할때 SPA기반의 Router를 찾다가 접하게된 vue.js. 처음 느낌은 굉장히 쉽다였다. 그리고 공식 홈페이지도 한글화 되어 있고 쉽게 잘 설명 되어 있다는 것.
모든 언어의 시작인 helloworld를 브라우저에 출력해 보도록 하자.

Vue.js 설치

• Vue.js는 공식CLI 를 제공한다.
• 프로젝트를 만들고자 하는 디렉토리로 이동한 다음 아래와 같이 입력

  $ npm install --global vue-cli 
  # permission에러가 날경우 sudo로 하자.
  $ vue init webpack hellworld
  # project name, description등 질문이 나오면 그냥 엔터
  # vue-router, ESLint등 설치 묻는다. 난 무조건 다 설치하였다.
  # 질문에 다 대답을 하면 설치가 진행된다.
  

• npm(Node.js Package Manager)은 Node.js에서 사용가능한 자바스크립트 모듈들을 패키지화시켜 모아놓은곳 이며, cli형식으로 간단하게 설치할 수 있다.
• webpack이 궁금하다면 여기를 확인하자.
• 설치가 완료 돼면 helloworld디렉토리가 생성되었을 것이다.

  $ cd helloworld
  $ cat README.md
  

서버 실행 및 화면 확인하기

• 위와같이 README.md파일을 확인하게 되면 기본적인 사용 방법에 대하여 설명되어 있다.
• 그럼 개발서버를 실행해보도록 하자.

  $ npm run dev
  블라블라
  I  Your application is running here: http://localhost:8080
  

• http://localhost:8080으로 실행중이라고 당신의 어플을 실행중이란다. 브라우저로 접속해보자.

HelloWorld 찍어보기

• hellworld디렉토리 하위에 많은 디렉토리 및 파일이 있지만 일단 src디렉토리에만 집중해보자.

  Kyuui-MacBook-Pro:helloworld lohan$ tree ./src/
  ./src/
  ├── App.vue
  ├── assets
  │   └── logo.png
  ├── components
  │   └── HelloWorld.vue
  ├── main.js
  └── router
    └── index.js
  

브라우져에 나오는 화면은 App.vue에서 시작을 해서 index.js에서 HelloWorld.vue로 Router를 /로 설정을 했기 때문에 위와 같은 화면이 나온다. 그럼 vue파일을 하나 만들어서 화면에 나오도록 해보자.

• src/comonents에 MyHelloWord.vue파일을 아래와 같이 만들어보자.

    <template>
        <h2>hellowrld!!!</h2>
    </template>
  

• src/router/index.js에 routes를 추가하자.

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import MyHelloWorld from '@/components/MyHelloWorld'
  
    Vue.use(Router)
  
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/myhelloworld',
          name: 'MyHelloWorld',
          component: MyHelloWorld
        }
      ]
    })
  

• 첫화면에서 MyHelloWorld로 갈 링크가 필요하니 App.vue에서 링크를 추가하자

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <ul>
          <li><router-link v-bind:to="{ name: 'HelloWorld' }">HelloWorld</router-link></li>
          <li><router-link v-bind:to="{ name: 'MyHelloWorld' }">MyHelloWorld</router-link></li>
        </ul>
        <router-view/>
      </div>
    </template>
  

• 인덱스와 MyHelloWorld링크를 클릭했을때의 화면이 나온다면 성공

• 주소표시줄의 #이 성가시다면 아래와 같와 같이 src/router/index.js를 수정하자.

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import MyHelloWorld from '@/components/MyHelloWorld'
  
    Vue.use(Router)
  
    export default new Router({
      mode: 'history',  //추가
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
          path: '/myhelloworld',
          name: 'MyHelloWorld',
          component: MyHelloWorld
        }
      ]
    })