vue-cli로 vue 시작하기

본 글은 HTML, CSS, JS에 꽤나 익숙하고,
react.js를 사용한 경험이 있어 컴포넌트에 대한 이해가 있는 분이 이해가 쉬울 것으로 예상됩니다.

사용 OS는 macOS Mojave 10.14.5입니다

새로 들어간 회사 내 팀에서 팀 admin 페이지를 만드는 데 사용하는 frontend 라이브러리는 vue.js라고 하여 파일럿 프로젝트를 하는 겸 간단하게 공부를 해보았다.

설치

vue를 시작하는 방법은 여러 가지가 있고 여기에서 자세히 알 수 있으나, 가장 쉽고 간단한 방법은 vue-cli를 설치하여 vue 프로젝트를 시작하는 방법이다.

sudo npm install -g vue-cli

시작

vue init webpack vue-project

이렇게 하면 vue-project라는 폴더가 생기고 그 안에서 vue 프로젝트가 시작된다.
만약 미리 프로젝트 폴더를 만들었다면

vue init webpack .

라는 명령어를 실행하면 된다.

나오는 옵션들을 간략히 설명하면
vue-router는 react-router처럼 프론트 단의 라우팅을 간단히 해주는 라이브러리이다.
ESLint는 코드를 편집할 때 몇 가지 규칙을 따르도록 강제하도록 해주는 라이브러리인데 지금은 혼자하는 프로젝트이니 뺐다.

단위 테스트 코드와 nightwatch e2e tests는 잘 모르겠다.
나중에 vue를 깊게 봐야한다면 그때 찾아볼 계획이다.

프로젝트 구조

프로젝트가 생성되면 다음과 같은 프로젝트 구조를 같는다

build/
config/
src/
  App.vue
  assets/
    logo.png
  components/
    HelloWorld.vue
  main.js
  router
  index.js
static/
index.html
package.json

어떤 파일이 어떤 역할을 하는지, 그리고 어디를 수정해야 어떻게 바뀌는지 알아보자

package.json

node 기반 프로젝트에서 익숙한 package.json이다

build & config

빌드 관련 파일들, 설정 파일들이 들어 있다. 그나마 손댈 거라면, config/index.js 에서 port 설정 정도가 있을 듯 하다

index.html

템플릿 역할을 해줄 HTML 파일이다. CDN에서 무언가 가져와야 한다면 여기에 넣으면 된다.

src

중요한 src/이다.

assets/

이미지 파일 등을 넣는 곳이다.

components/

컴포넌트가 들어가는 곳이다. 리액트의 그 컴포넌트와 유사한 개념이다.

딱 열어보면 HelloWorld.vue가 있다.

114줄에 달하는 긴 파일인데 이 파일 같은 *.vue 파일이 무엇인지는 여기에서 조금 자세히 다뤄 보려고 한다

지금은 각 파일이 컴포넌트에 대응되며 컴포넌트는 이 디렉토리에 저장된다고 생각하면 된다.
즉, 내가 새로운 페이지 또는 컴포넌트를 만들고 싶다면 여기에 XXX.vue 파일을 넣으면 된다.

router/

index.js 파일 하나가 있으며 직관적으로 이해할 수 있다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

vue와 vue-router와 아까 봤던 component HelloWorld.vue를 가져온다.

그 후 Router를 vue에 집어 넣고 라우팅 목록을 export하고 있다.

만약 내가 컴포넌트를 추가하여 새로운 페이지에 넣고 싶다면 아래와 같이 몇 줄 추가하면된다.

import NewHelloWorld from "@/components/NewHelloWorld"

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    },
    {
      path: "/new",
      component: "NewHelloWorld"
    }
  ]
})

routes안에는 path, name, component를 프로퍼티로 가지는 객체를 넣는데 이때 name은 넣지 않아도 된다. name이 사용되는 때는

버튼을 누르면 다른 페이지로 가고 싶다! 이때 그 page의 URL 대신 page의 별명(이름)을 넣고 싶다

할 때이다.

보다 자세한 내용은 여기에서 다루고 있다.

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'

Vue.config.productionTip = false

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

결론 및 정리

결론은 이렇다.

vue-cli를 설치하고 vue 명령어를 통해 프로젝트를 시작한다.

그리고 하고 싶은 일에 따라 다음 경로를 찾는다

• CDN에서 무언가를 다운받아야 하면 index.html
• 이미지를 넣고 싶으면, src/assets/
• 새로운 페이지 또는 컴포넌트를 추가하고 싶으면 src/components
• 라우팅 설정 src/route/index.js
• npm 라이브러리 설정(나중에 예시를 보여드리겠습니다.) src/main.js

도움이 되셨으면 좋겠습니다~ vue를 짧게 사용해보고 작성한 글이니 틀린 내용은 언제든지 말씀해주세요!