[Vue.js] Vue 프로젝트 생성하기

순서
1. 원하는 곳에 작업용 폴더 만들기
2. 작업용 폴더 VSC에서 열기
3. Vue 프로젝트 생성하기
4. 3에서 생성한 프로젝트 파일 open하기

1. 원하는 곳에 작업용 폴더 만들기

작업용 폴더 위치

필자는 C:\Users\eyi\vue-workspace 해당 위치로 폴더를 만들었습니다.

2. 작업용 폴더 VSC에서 열기

VSC의 File - open folder 메뉴에서 만들었던 작업용 폴더 vue-workspace를 열어줍니다.

VSC에서 작업 폴더 열기

열면 위의 사진과 같이 대문자로 VSC에 표시됩니다.

3. Vue 프로젝트 생성하기

PS C:\Users\eyi\vue-workspace> vue create vuedongsan

PowerShell(터미널)에서 vue create 프로젝트명 입력하여 vue 프로젝트를 생성합니다.

필자는 부동산 사이트를 만들어 볼 것이므로 vuedongsan이라는 프로젝트를 생성하였습니다.

vue 프로젝트 생성

4. 3에서 생성한 vuedongsan 프로젝트 파일 open하기

vue 프로젝트 폴더 열기

VSC의 파일- 폴더열기에서 아까 만든 프로젝트 폴더를 열어줍니다.

프로젝트명이 굵은 글씨로 뜨면 폴더열기 성공입니다.

자 이제,

여기에서 App.vue에서 코드를 작성하면 됩니다.
<template> 안에는 HTML 코드를 작성,

<script>안에는 JS 코드를 작성,

<style>안에는 CSS 코드를 작성합니다.

실행된 모습

실행된 모습입니다!

앱을 실행할 수 있는 주소

• Local: http://localhost:8080/
• Network: http://172.21.10.58:8080/

프로젝트 파일 부연설명

웹 브라우저는 .vue파일을 열 수가 없습니다.
그런데 컴파일할 때 App.vue를 index.html로 컴파일 해주기 때문에 웹사이트처럼 동작합니다.

• node_modules : 프로젝트에 쓰는 라이브러리
• src: 소스코드를 다 담아두는 곳
• public : html 파일, 기타파일 보관하는 곳
• package.json : 라이브러리 버전, 프로젝트 설정 기록