[vue] vue 프로젝트 생성 및 생성 시 각 파일의 용도

1. node.js 설치

Node.js — Node.js® 다운로드

Node.js — Node.js® 다운로드

 

node.js란?

:google v8 엔진을 기반으로 만들어진 서버 측 자바 스크립트 언어이자 플랫폼

(vue.js 관련 도구를 설치하고 앱의 의존성 라이브러리를 관리)

• node.js가 나오면서 백엔드 개발이 가능해졌음
• node.js와 함께 Express라는 웹 프레임 워크를 이용해서 vue.js 애플리케이션이 액세스하는 백엔드 API 서비스를 작성.
• 즉, 원래 node.js는 백엔드에서 쓰려고 설치함

vue

프론트엔드 프레임워크

(프론트엔드:클라이언트 컴퓨터에서 실행되는 코드)

vue로 프로젝트를 진행했는데 node.js가 꼭 필요한가?

→ 꼭 필요한 것은 아니다.

 

Node.js는 Vue 자체를 구동하거나 실행하는 데 필요한 것이 아니다.

대신, Vue 프로젝트를 개발하고 관리하기 위해 필요한 도구들을 실행하는 데 사용한다.

예를 들어 webpack, vite 같은 도구들은 node.js로 동작한다.

따라서 사용하면 개발이 편하다.

npm도 node.js설치시 동작

npm으로 dependency(필요한 라이브러리나 모듈) 관리함.

npm 명령어

npm 명령어 설명

npm init	프로젝트 초기화
npm install	package.json의 패키지 설치
npm run [스크립트명]	package.json의 스크립트 명령 실행

 

참고) 크롬 브라우저 vue.js dev tools도 설치하면 디버깅 기능 사용 가능하다.

Vue.js devtools - Chrome Web Store

Vue.js devtools - Chrome 웹 스토어

 

 

 

1. VScode 실행후 ctrl+j눌러서 터미널(powershell이 기본) 실행    

 

 

2. vite를 이용해 vue 프로젝트 생성

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

이렇게 생성하고 나면

이렇게 뜨는데 현재 생성하는 프로젝트 디렉터리로 이동하여 관련 패키지를 설치하고 npm run dev로 개발용 웹서버를 구동하여 실행하라는 명령어다. 그대로 입력해주면 된다.

 

3. 프로젝트 디렉터리로 이동/ package.json의 패키지 설치

cd [프로젝트명]
npm install 

3-1. 다만 vue router, pinia, axios등을 설치하고 싶으면 아래처럼 입력한다

 npm i vue-router@4 pinia axios

여기서 i는 install과 같다. 축약형이다. 즉 위 명령어는 아래와 같다

npm install vue-router@4 #4.x 설치하라는 뜻
npm install pinia
npm install axios

 

개발용 웹서버 구동

npm run dev

dev가 package.json에 vite 이므로 vite로 실행한다.

포트번호(5175)는 다를 수 있다.

local에 뜨는 url로 접속해주면 된다.

vue 프로젝트 각 파일의 용도

1. node_modules/

• 설명: 프로젝트에서 사용하는 모든 외부 라이브러리와 종속성(dependencies)이 저장되는 폴더.
• 내용: Vue.js와 관련된 패키지, 그 외에 설치한 모든 npm 패키지가 포함
• 주요 파일: 이 폴더는 자동으로 생성, 수동으로 수정x

2. public/

• 설명: 애플리케이션의 정적 파일을 저장하는 폴더. 여기서는 애플리케이션에서 변경되지 않는 파일(이미지, 아이콘 등)을 관리
• 주요 파일:
  • index.html: 기본 HTML 템플릿 파일. Vue 애플리케이션이 렌더링될 기본 HTML 구조를 제공. <div id="app"></div> 이 부분은 Vue 애플리케이션이 실제로 삽입될 DOM 요소.
  • favicon.ico: 브라우저 탭에 표시되는 아이콘 파일.

3. src/

• 설명: Vue 애플리케이션의 소스 코드가 위치하는 폴더. 실제로 Vue 컴포넌트와 JavaScript, 스타일 시트 등의 파일이 이곳에 저장됨.
• 주요 폴더 및 파일:
  • main.js: Vue 애플리케이션의 진입점. 이 파일에서 Vue 인스턴스를 생성하고, 루트 컴포넌트를 마운트함.
  • javascript 코드 복사 import Vue from 'vue'; import App from './App.vue'; Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app');
  • App.vue: 기본 루트 컴포넌트. 여기서는 애플리케이션의 가장 상위 레벨의 UI와 로직을 정의함. Vue 파일은 <template>, <script>, <style> 세 가지 섹션으로 나누어져 있음.
  • vue 코드 복사 <template> <div id="app"> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: 'Hello, Vue!' }; } }; </script> <style> h1 { color: #42b983; } </style>
  • assets/: 애플리케이션에서 사용할 이미지, 스타일, 폰트 등의 정적 파일이 위치하는 폴더.
  • components/: Vue 컴포넌트들이 위치하는 폴더. 애플리케이션을 여러 컴포넌트로 나누어 개발할 때 사용. 예를 들어, HelloWorld.vue라는 기본 컴포넌트가 생성.

4. babel.config.js

• 설명: JavaScript 코드가 구형 브라우저에서도 실행될 수 있도록 트랜스파일링하는 설정 파일. Vue CLI는 최신 JavaScript를 이전 버전의 JavaScript로 변환하여 호환성을 높임.

5. package.json

• 설명: 프로젝트의 설정 파일. 프로젝트 이름, 버전, 사용한 npm 패키지, 스크립트 명령어 등을 정의.
• 주요 항목:
  • dependencies: 애플리케이션에서 사용하는 라이브러리 및 패키지 목록.
  • scripts: npm run serve, npm run build 등 애플리케이션을 실행하거나 빌드하는 데 사용하는 명령어들.
  • devDependencies: 개발 환경에서만 필요한 패키지 목록 (예: 빌드 도구, 테스팅 라이브러리 등).