[Vue3.js] 새로운 프로젝트 생성, vite 설치까지

Windows에서 Visual Studio Code (VSCode)를 사용하여 Vue 3 프로젝트를 만드는 과정은 간단하며 몇 단계로 이루어집니다. 여기에 프로젝트를 생성하고 설정하는 방법을 안내해드리겠습니다.

### 1. 필요한 도구 설치하기

먼저, Node.js와 함께 npm (Node Package Manager)이 설치되어 있어야 합니다. VSCode도 설치되어 있어야 합니다.

1. Node.js와 npm 설치: [Node.js 공식 웹사이트](https://nodejs.org/)에서 LTS 버전의 Node.js를 다운로드하고 설치합니다. npm은 Node.js와 함께 자동으로 설치됩니다.
2. VSCode 설치: [VSCode 공식 웹사이트](https://code.visualstudio.com/)에서 VSCode를 다운로드하고 설치합니다.

### 2. Vue CLI 설치 >> 이미 되어 있었

Vue CLI는 Vue.js 프로젝트를 손쉽게 생성할 수 있는 커맨드 라인 인터페이스입니다. Vue CLI를 설치하기 위해 다음 명령어를 사용합니다:

```bash

npm install -g @vue/cli

vue --version // 로 확인 가능

```

### 3. Vue 프로젝트 생성

Vue CLI를 사용하여 새로운 Vue 3 프로젝트를 생성합니다. `practice_vue`라는 이름의 프로젝트를 만들려면 다음과 같은 명령어를 사용합니다:

```bash

vue create practice_vue

```

이 명령을 실행하면 여러 설정 옵션이 나타납니다. Vue 3를 선택하고 추가적으로 필요한 구성 요소를 선택합니다.

### 4. 프로젝트 폴더로 이동

생성된 프로젝트 폴더로 이동합니다:

```bash

cd practice_vue

```

### 5. VSCode에서 프로젝트 열기 >> 라고 했는데 나는 VSCode 터미널에서 실행했기때문에 열려있었음

VSCode에서 `practice_vue` 폴더를 열어야 합니다. 이를 위해 다음 두 가지 방법 중 하나를 사용할 수 있습니다:

1. **명령 줄에서 VSCode 열기**: `code .` 명령을 사용하여 현재 폴더(즉, `practice_vue`)를 VSCode에서 직접 엽니다.

```bash
code .
```

2. **VSCode에서 직접 열기**: VSCode를 열고 '파일' > '폴더 열기'를 선택한 다음 `practice_vue` 폴더를 찾아 엽니다.

이제 `practice_vue` 프로젝트가 VSCode에서 열려 있으며 Vue 3 개발을 시작할 준비가 되었습니다!

---

`vue create vueprac_2024` 명령을 사용해 Vue.js 프로젝트를 생성하면 기본적으로 다음과 같은 파일 구조를 갖게 됩니다. 여기서는 Vue CLI 3 이상의 버전을 기준으로 설명합니다:

```
vueprac_2024/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── package-lock.json
└── README.md
```

각 디렉토리와 파일의 역할은 다음과 같습니다:

- **node_modules/**: 프로젝트의 모든 npm 종속성이 설치되는 디렉토리입니다. `npm install`을 실행할 때 여기에 모듈이 저장됩니다.

- **public/**: 정적 파일을 포함하는 디렉토리입니다. 이 폴더 안의 내용은 웹팩 프로세스를 거치지 않고 직접 빌드에 포함됩니다.
  - **favicon.ico**: 웹사이트의 파비콘(즐겨찾기 아이콘)입니다.
  - **index.html**: 애플리케이션의 진입점이 되는 HTML 파일입니다. Vue 애플리케이션은 이 파일 내에 마운트됩니다.

- **src/**: 소스 코드를 포함하는 주요 디렉토리입니다.
  - **assets/**: 이미지나 스타일시트 같은 정적 자원을 보관하는 디렉토리입니다.
  - **components/**: Vue 컴포넌트 파일을 저장하는 디렉토리입니다.
  - **App.vue**: 애플리케이션의 루트 컴포넌트입니다.
  - **main.js**: Vue 인스턴스를 생성하고 애플리케이션을 마운트하는 엔트리 파일입니다.

- **.gitignore**: Git 버전 관리에서 제외할 파일 목록을 지정하는 파일입니다.

- **babel.config.js**: Babel 설정을 포함하는 파일입니다. JavaScript 코드를 이전 버전의 JavaScript로 변환하는 데 사용됩니다.

- **package.json**: 프로젝트의 메타데이터와 의존성 목록을 포함하는 파일입니다. npm을 통해 관리되는 프로젝트에서는 필수적인 파일입니다.

- **package-lock.json**: 설치된 npm 패키지의 정확한 버전을 기록하는 파일로, 다른 환경에서도 동일한 종속성을 설치할 수 있게 합니다.

- **README.md**: 프로젝트에 대한 설명을 작성하는 마크다운 파일입니다.

이러한 구조는 Vue CLI를 사용하여 프로젝트를 생성할 때 제공되는 기본 템플릿을 기반으로 합니다. Vue CLI의 플러그인 시스템을 통해 추가적인 구성이나 변경이 가능합니다.

---

여러 페이지를 관리하기 위해 Vue.js에서는 Vue Router를 사용합니다. Vue Router는 싱글 페이지 애플리케이션(SPA)에서 페이지 간의 라우팅을 가능하게 해주는 공식 라이브러리입니다. 먼저 Vue Router를 프로젝트에 추가하고, 라우터를 설정해야 합니다.

### Vue Router 설치

Vue Router를 설치하기 위해 프로젝트 디렉토리에서 다음 명령어를 실행합니다:

```bash

npm install vue-router@4

npm list vue-router //로 확인 가능

### 파일 구조

라우터를 사용하기 위해 `src` 폴더 내에 `router`라는 새 디렉토리를 생성하고, 그 안에 `index.js` 파일을 만듭니다. 파일 구조는 대략 다음과 같이 됩니다:

```
vueprac_2024/
├── ...
├── src/
│   ├── ...
│   ├── router/
│   │   └── index.js
│   ├── ...
│   ...
├── ...
```

### 라우터 설정

`src/router/index.js` 파일을 생성하고 다음과 같이 라우터를 설정합니다:

```javascript
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
```

위 코드에서는 두 개의 라우트를 설정했습니다: 하나는 홈(`Home.vue`)으로, 다른 하나는 어바웃(`About.vue`) 페이지로 연결됩니다. 여기서 `Home.vue`와 `About.vue`는 `src/views` 폴더에 위치해야 합니다.

### 뷰 컴포넌트 생성

`src/views` 폴더에 각 페이지에 해당하는 뷰 컴포넌트를 생성합니다. 예를 들어, `Home.vue`와 `About.vue` 파일을 생성합니다.

```vue
<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>
```

```vue
<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>
```

### 라우터를 앱에 연결

`main.js` 파일에서 Vue Router를 앱에 연결해야 합니다:

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');
```

### 라우트를 위한 링크 추가

애플리케이션의 다른 부분에서 라우터 링크를 사용하여 페이지 간 이동이 가능합니다. `App.vue`에 라우터 링크를 추가해 보겠습니다:

```vue
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>
```

`<router-link>`를 사용하여 페이지를 전환하고, `<router-view>`는 현재 라우트에 맞는 컴포넌트를 렌더링하는 영역입니다.

이제 Vue Router 설정이 완료되었으며, 애플리케이션에서 여러 페이지를 관리할 수 있습니다.

---

vite 설치 후에는 npm run dev 명령어로 실행해야

---

Vue 3와 Vite를 사용하여 프로젝트를 구성하고 상단에 고정된 헤더를 만드는 방법에 대해 설명해 드리겠습니다. 이 헤더에는 좌측에 로고와 우측에 네비게이션 메뉴가 포함됩니다.

### 1. Vite 프로젝트 생성

먼저 Vite를 사용하여 새로운 Vue 프로젝트를 만듭니다. 터미널에서 다음 명령을 실행하면 Vite 프로젝트를 생성할 수 있습니다:

```bash

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

```

### 2. 프로젝트 구조 설정

기본적으로 생성된 프로젝트 구조는 다음과 같습니다:

```
my-vue-app/
├─ node_modules/
├─ src/
│  ├─ assets/
│  ├─ components/
│  ├─ App.vue
│  └─ main.js
├─ index.html
├─ package.json
└─ vite.config.js
```

### 3. 컴포넌트 생성

`src/components/` 디렉터리 안에 두 개의 컴포넌트를 만듭니다: `TheHeader.vue`와 `NavigationMenu.vue`.

**TheHeader.vue:**

```vue

<template>
  <header class="header">
    <img src="@/assets/logo.png" alt="Logo" class="logo" />
    <NavigationMenu />
  </header>
</template>

<script setup>
import NavigationMenu from './NavigationMenu.vue';
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #333;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.logo {
  height: 50px;
}
</style>

```

**NavigationMenu.vue:**

```vue

<template>
  <nav>
    <ul class="menu">
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</template>

<style scoped>
.menu {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.menu li a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
}

.menu li a:hover {
  background-color: #555;
}
</style>

```

### 4. App.vue 수정

`App.vue` 파일을 수정하여 `TheHeader` 컴포넌트를 포함시킵니다.

```vue

<template>
  <div id="app">
    <TheHeader />
    <main style="padding-top: 60px;">
      <!-- 여기에 나머지 앱 컨텐츠를 넣으세요 -->
      <h1>Welcome to Your Vue.js App</h1>
    </main>
  </div>
</template>

<script setup>
import TheHeader from './components/TheHeader.vue';
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>

```

### 5. Vite 서버 실행

프로젝트 설정을 마친 후, 개발 서버를 실행합니다:

```bash

npm run dev

```

이제 브라우저에서 `localhost`의 특정 포트(예: http://localhost:3000)로 접속하면, 상단에 로고와 네비게이션 메뉴가 포함된 헤더를 볼 수 있습니다. 이 헤더는 스크롤 시에도 화면 상단에 고정됩니다.