본문 바로가기

Vue

[Vue] 기초 다지기

웹 페이지 풀스택 개발을 맡게되었다.

Flutter는 보통 앱 개발에 많이 사용한다고 하고, React는 단시간에 배우기 어렵다고 해서 이미 알고 있는 HTML, CSS, Javascript를 활용할 수 있는  Vue로 정했다. 

 

Visual Studio Code에 Vue3를 설치하여 환경을 구축한다.

 

npm: 각종 웹 개발 라이브러리 설치 도우미

 

App.vue가 main 코드, index.html이 메인 화면이다.

App.vue의 코드를 html로 컴파일하여 화면으로 나타나게 된다.

<template> 아래에는 html을 짜고, <script> 아래에는 javascript를, <style> 아래에는 css로 작업하면 된다.

 

패키지들을 소개한다.

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

src: 소스코드를 담아두는 곳

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

 

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

 

참고

https://youtu.be/NONWar0jGLM?si=c9eRqMEPPc2EZNE8