Vue란?

1. Vue

Vue.js(뷰)는 프로그레시브(Progressive) 자바스크립트 프레임워크로, 사용자 인터페이스(UI)를 만들기 위해 사용된다.

한마디로 웹 화면을 더 동적으로 만들고 유지보수를 쉽게 해주는 도구

2. 특징

1) 컴포넌트 기반

화면을 작은 단위로 나눠서 개발 가능

재사용성과 유지보수성이 높음

2) 반응형(Reactivity) 시스템

데이터가 변경되면 자동으로 화면이 업데이트됨

3) 단일 파일 컴포넌트(SFC, .vue 파일)

HTML, CSS, JS를 한 파일에서 관리 가능

코드 가독성이 좋고 유지보수가 쉽다.

4) 확장성

Router, Pinia, CLI/Vite 등 다양한 툴을 지원하고 있다.

CLI와 Vite는 Vue 개발 환경을 제공하는 빌드 도구

Vite 기반에서 Vue 프로젝트 생성하기

Node.js 설치

Vite를 사용하려면 node.js가 필요하다.

터미널에서 아래 명령어를 입력해서 버전을 확인하자

node -v

node.js가 없으면 공식사이트에서 LTS 버전을 다운받아서 설치하자

Node.js가 설치되었으면 명령프롬프트에서 아래 명령어를 실행하자

npm init vite [프로젝트명] -- --template vue

vue, javascript를 선택해서 설치가 완료되면 나오는 명령어를 실행해서 프로젝트 폴더로 이동하고 npm도 설치하면된다.

cd [프로젝트명]
npm install

이제 아래 명령어를 실행하면 Vue 앱이 실행된다.

npm run dev

기본 프로젝트 구조

my-vue-app
│── node_modules/     # npm 패키지들이 저장되는 폴더
│── public/           # 정적 파일(파비콘, 이미지 등)
│── src/              # 핵심 코드 폴더
│   ├── assets/       # CSS, 이미지, 아이콘 등
│   ├── components/   # Vue 컴포넌트 파일들
│   ├── App.vue       # 메인 앱 컴포넌트
│   ├── main.js       # 진입 파일 (Vue 앱을 실행하는 코드)
│── index.html        # 기본 HTML 파일
│── package.json      # 프로젝트 정보 및 의존성 목록
│── vite.config.js    # Vite 설정 파일

빌드 & 배포

아래 명령어를 실행해서 생성된 dist/ 폴더의 파일들을 웹 서버에 배포하면 된다.

npm run build

세팅할때 자주 쓰는 것들

router, vuerify, pinia를 되게 자주 씀

npm install vue-router vuetify pinia axios

router 설정

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from 'axios'
import router from './router'

const app = createApp(App);
app.use(router);
app.config.globalProperties.$axios = axios;
app.mount('#app');

router index 설정 예시

import { createMemoryHistory, createRouter, createWebHistory } from 'vue-router'
import Main from '../components/Main.vue'
import BoardList from '../components/BoardList.vue'
import BoardWrite from '../components/BoardWrite.vue'
import BoardDetail from '../components/BoardDetail.vue'

const routes = createRouter({
  history: createWebHistory(), //createWebHistory(), -> for browser history
  routes: [
    {
      path: '/',
      component: Main,
      children: [
        {path: '', component: BoardList, name: 'board_list'},
        {path: 'write', component: BoardWrite, name: 'board_write'},
        { path: '/board/:idx', name: 'board_detail', component: BoardDetail, props: true },
      ]
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      // 이전 위치로 이동 (뒤로 가기/앞으로 가기 할 때)
      return savedPosition;
    } else {
      // 항상 맨 위로 이동
      return { top: 0 };
    }
  }
});


export default routes

vuetify 설정

// main.js (또는 main.ts)
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles' // Vuetify 기본 스타일

const vuetify = createVuetify()

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

pinia 등록

// main.js (또는 main.ts)
import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)