m1ndy5's coding blog

ABOUT Vue.js 본문

프론트엔드/vue.js

ABOUT Vue.js

정민됴 2023. 5. 28. 21:08

Vue.js란?

  • 프론트엔드 개발을 쉽게 하기 위한 프레임워크
  • SPA(Single Page Application)를 구축하는데 이용

SPA란?

단일 페이지 애플리케이션이라는 뜻으로 페이지가 바뀔 때마다 서버에서 HTML을 보내주어 새로고침되는 SSR(Server Side Rendering)과 다르게 새롭게 바뀌는 부분의 특정 데이터만 요청하여 새로고침 없이 한 페이지에서 특정 부분만 변경되는 것을 의미

Vue.js의 장점

  • 배우기 쉬움
  • 다른 프레임워크 React, Angular에 비해 가볍고 빠름
  • 컴포넌트 기발 프레임워크로 뷰 구성, 코드 재사용이 용이

사용방법

Vue.js를 사용하려면 일단 Node.js가 설치 되어있어야 한다.
이후

npm init vue@latest

라는 명령어를 통해서 vue의 최신 버전에 필요한 패키지들을 다운받자.
최신 버전이 아니라 특정 버전을 다운 받고 싶다면 latest 부분에 버전을 적으면 된다.


자신이 만들 프로젝트에 맞게 설정한 후 시키는대로 따라치면 된다.


이런 화면이 뜨면 성공~~

src/main.js

import './assets/main.css' 

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

const app = createApp(App) 

app.use(router) 

app.mount('#app')

모든 Vue 애플리케이션은 Vue에서 제공하는 내장 함수인 createApp()을 통해 애플리케이션 인스턴스를 생성함으로써 시작

src/App.vue 에 보면 메인 페이지에서 본 화면의 코드가 적혀져 있고 이는 Root component가 된다.

createApp()으로 생성한 app 변수는 mount()를 해주지 않으면 랜더링 되지 않기 때문에
app 변수를 담을 특정 HTML 엘리먼트의 위치를 지정해야 함

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

index.html을 보면 div id="app" 부분을 볼 수 있고 이 부분에 렌더링이 된다는 의미이다.

'프론트엔드 > vue.js' 카테고리의 다른 글

Vue.js 기본 템플릿 문법  (0) 2023.05.28
'프론트엔드/vue.js' Related Articles more