[Vue] Vue의 기초(1) - 설치 및 개발환경 구성

 Vue란?

 

Vue.js는 컴포넌트(Component) 기반의 SPA(Single Page Application)를 구축할 수 있게 해주는 프론트엔드 프레임워크이다. 컴포넌트는 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소로 재사용 가능하도록 구조화 한 것이고, SPA는 단일 페이지 어플리케이션으로 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태를 가리키며 빠른 페이지 변환과 적은 트래픽 양이 사용된다는 장점이 있다.

 

 React와의 차이점 (출처: 코딩애플)

 

조건문을 쓸 때 React에서는 tenary operator, && ||, if else enum .. 등이 있지만 vue는 vue-if, v-else만 있다.

반복문을 쓸 때 React에서는 {map}, forEach, for for in for of, 컴포넌트 render() 바깥에서 할지 안에서 쓸지 방법이 다양하지만 vue는 v-for로 정해져있다. 

 

협업할 때 코드의 스타일이 정해져있으면 통일시키기 용이하기 때문에 방법이 1개인 Vue를 쓰면 이점이 있다.

 

 

 Vue 설치와 개발환경 설정

 

@vue/cli란 vue 프로젝트를 빠르게 생성해주는 라이브러리이다.

npm install -g @vue/cli
또는
yarn global add @vue/cli

아래의 코드를 통해 vue 프로젝트를 생성할 수 있다.

vue create 프로젝트명

각종 웹개발 라이브러리 설치 도우미인 npm을 이용하기 위해서 Node.js를 설치해야 한다.

 

 App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  안녕하세요
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

프로젝트 src폴더의 App.vue(메인페이지)에서 코드를 짜면 된다.

<template> 안에는 HTML을 <script> 안에는 JS를 그리고 <style>은 CSS의 코드를 짠다.

 

npm run serve

위의 코드를 통해 실시간으로 실행결과를 볼 수 있다. (리액트는 npm run start로 localhost:3000이라면 vue는 8080)

 

 main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue를 HTML로 컴파일하여 index.html로 브라우저가 해석할 수 있게 해준다.

 

 메뉴 구성

node_modules: 프로젝트에 쓰는 라이브러리들

public: html 파일, 기타파일 보관

src: 소스코드 다 담는 곳

package.json: 라이브러리 버전, 프로젝트 설정 기록